August 20, 2011

nocknock nocknock
Lab Rat
11 posts

How to use Scale Element with State Element

 

I can write lines below and got it work:

  1.   states: State {
  2.     name: "active"; when:myitem.activeFocus;
  3.                                                 PropertyChanges { target: myitem; z:1000; scale: 1.2 }
  4.                                                 }
  5.                                                 transitions: Transition {
  6.                                                 NumberAnimation { properties: scale; duration: 1000 }
  7.     }

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

I found Scale Element

  1.  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.

4 replies

August 20, 2011

Diph Diph
Lab Rat
40 posts

This seems to work.

  1. Scale {
  2.     id: scaleItem
  3.     origin.x: 25; origin.y: 25; xScale: 3
  4. }
  5.  
  6. function scaleMe() {
  7.     myitem.transform = scaleItem
  8. }
  9.  
  10. states: State {
  11.      name: "active"; when: myitem.activeFocus;
  12.      PropertyChanges { target: myitem; z:1000; }
  13.      StateChangeScript { name: "scaleScript"; script: myitem.scaleMe(); }
  14. }

August 20, 2011

nocknock nocknock
Lab Rat
11 posts

Hi thanks for idea
but it gives an error

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

August 20, 2011

nocknock nocknock
Lab Rat
11 posts

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.

August 20, 2011

nocknock nocknock
Lab Rat
11 posts

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):

  1.     Item {
  2.         id: container
  3.         width: 1290; height: 650
  4.         Scale {
  5.                     id: scaleItem
  6.                     origin.x: 25; origin.y: 25; xScale: 3
  7.                 }
  8.      
  9.                 function scaleMe(polyVar) {
  10.                     polyVar.transform = scaleItem
  11.                 }
  12.      
  13.      
  14.                                                     Polygon {
  15.                                                     id:poly
  16.                                                     x:0; y:0;
  17.                                                     width: 0; height: 0;
  18.                                                     name: aPolygon
  19.                                                     color: "#0000cc"
  20.                                                     vertices:[
  21.                                                         Point{x:20;y:20},
  22.                                                         Point{x:20;y:40},
  23.                                                         Point{x:40;y:20}
  24.                                                     ]
  25.                                                     states: State {
  26.                                                     name: active; when: poly.activeFocus;
  27.                                                     StateChangeScript {
  28.                                                                     name: "scaleChange";
  29.                                                                     script: {
  30.                                                                         console.log("went to scaleChange state")
  31.                                                                         container.scaleMe(poly);
  32.                                                                     }
  33.                                                                 }
  34.                                                     }
  35.      
  36.                                                     }
  37.      
  38.      
  39.                                                     Polygon {
  40.                                                     id:poly2
  41.                                                     x:0; y:0;
  42.                                                     width: 0; height: 0;
  43.                                                     name: bPolygon
  44.                                                     color: "#0000cc"
  45.      
  46.                                                     vertices:[
  47.                                                         Point{x:80;y:80},
  48.                                                         Point{x:80;y:100},
  49.                                                         Point{x:100;y:80}
  50.                                                     ]
  51.      
  52.      
  53.                                                     }
  54.     }

 
  ‹‹ Problem using custom components on Windows      Packaging and deploying a qml desktop application ››

You must log in to post a reply. Not a member yet? Register here!

 
Selected by the fine Qt Content Robot based on tags and ratings.

Possibly related content

Forum posts and FAQ

© 2013 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Digia plc and/or its subsidiaries and is used pursuant to a license from Digia plc and/or its subsidiaries.
All other trademarks are property of their respective owners. Privacy Policy
This site is hosted by Gitorious AS. Your use of this web site is governed by these terms of service.

Qt Project Hosting, P.O. Box 4332 Nydalen, 0402 Oslo, Norway. Org. Nr. 997 447 913