How to use Scale Element with State Element

nocknock

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.

Diph

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(); }
}
@

nocknock

Hi thanks for idea
but it gives an error

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

nocknock

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.

nocknock

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}
                                                ]
 
 
                                                }
}

@