How to use Scale Element with State Element



  • I can write lines below and got it work:

    @ states: State {
    name: "active"; when:myitem.activeFocus;
    PropertyChanges { target: myitem; z:1000; scale: 1.2 }
    }
    transitions: Transition {
    NumberAnimation { properties: scale; duration: 1000 }
    }@

    But in these lines i can not give specific origin to scale property!

    I found Scale Element

    @ transform: Scale { origin.x: 25; origin.y: 25; xScale: 3}@

    How can i inject this into state property above, because i want to use "when" property of state,

    i want scaling to run on that "when" condition.

    Or is there any other way to scale in a condition with specifying origins?

    Thanks for any idea.



  • This seems to work.

    @Scale {
    id: scaleItem
    origin.x: 25; origin.y: 25; xScale: 3
    }

    function scaleMe() {
    myitem.transform = scaleItem
    }

    states: State {
    name: "active"; when: myitem.activeFocus;
    PropertyChanges { target: myitem; z:1000; }
    StateChangeScript { name: "scaleScript"; script: myitem.scaleMe(); }
    }
    @



  • Hi thanks for idea
    but it gives an error

    Invalid property assignment: "data" is a read-only property
    Scale {



  • i think the error is about my custom type QDeclarativeITem subclass, i am going to try to fix it.
    Thanks very much, the code is so useful.



  • i moved the Scale element and scaleMe function out of my objects and now got working excellently, thanks very much Diph.

    here is the code(Polygon is my custom item):

    @ Item {
    id: container
    width: 1290; height: 650
    Scale {
    id: scaleItem
    origin.x: 25; origin.y: 25; xScale: 3
    }

                function scaleMe(polyVar) {
                    polyVar.transform = scaleItem
                }
     
     
                                                    Polygon {
                                                    id:poly
                                                    x:0; y:0;
                                                    width: 0; height: 0;
                                                    name: aPolygon
                                                    color: "#0000cc"
                                                    vertices:[
                                                        Point{x:20;y:20},
                                                        Point{x:20;y:40},
                                                        Point{x:40;y:20}
                                                    ]
                                                    states: State {
                                                    name: active; when: poly.activeFocus;
                                                    StateChangeScript {
                                                                    name: "scaleChange";
                                                                    script: {
                                                                        console.log("went to scaleChange state")
                                                                        container.scaleMe(poly);
                                                                    }
                                                                }
                                                    }
     
                                                    }
     
     
                                                    Polygon {
                                                    id:poly2
                                                    x:0; y:0;
                                                    width: 0; height: 0;
                                                    name: bPolygon
                                                    color: "#0000cc"
     
                                                    vertices:[
                                                        Point{x:80;y:80},
                                                        Point{x:80;y:100},
                                                        Point{x:100;y:80}
                                                    ]
     
     
                                                    }
    }
    

    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.