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