PDA

View Full Version : Zoom an object from center



akash
22nd August 2011, 14:45
Hi,

I m trying to increase the size of an object(rectangle transformed to circle).
My objective is to increase the size of an object using some predefined data in js file. But increment should looks like the object is zoomed from center and not from the lefttop corner.
Below code is incrementing from topleft.
Please suggest how to do it from center.
Code:

------sim_ani.qml
import QtQuick 1.0
import "simulation_data.js" as Sd

Rectangle
{
id: myRect;
width: 1000;
height: 1000;
state: "OldState"
color:"white"
Rectangle
{
id: s0;
width: 20;
height: 20;
color: "red"
radius: 10

x: 250
y: 50
}

Rectangle
{
id: s1;
width: 40;
height: 40;
color: "red"
radius: 20
x: 250
y: 200
}

Rectangle
{
id: s2;
width: 20;
height: 20;
color: "red"
radius: 10
x: 200
y: 350
}
Rectangle
{
id: s3;
width: 20;
height: 20;
color: "red"
radius: 10
x: 300
y: 350
}
Rectangle
{
id: start;
width: 60;
height: 40;
color: "red"
radius: 30
x: 250
y: 500

Text {
id: name
text: "Start"
color: "White"
anchors.centerIn: parent;



}
MouseArea
{
anchors.fill: parent;
onClicked: {
if (myRect.state == "OldState") myRect.state = "NewState";
else myRect.state = "OldState"
}
}

}
}


states:
[
State
{
name: "NewState"


//0.000000 0.000000 10.000000 0.000000 0.000000
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 20; color: "green";x:250;y:200 }
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 10; color: "green";x:300;y:350 }


//1.000000 0.098023 9.900498 0.000493 0.000986
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.098023*50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.900498; color: "green";x:250;y:200 }
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 50* 0.000493 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 50* 0.000986 + 10; color: "green";x:300;y:350 }

//2.000000 0.192176 9.801986 0.001946 0.003892
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.192176*50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.801986; color: "green";x:250;y:200 }
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.001946 * 50 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.003892 * 50 + 10; color: "green";x:300;y:350 }

//3.000000 0.282582 9.704455 0.004321 0.008642
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.282582 * 50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.704455; color: "green" ;x:250;y:200}
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.004321 * 50 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.008642 * 50 + 10; color: "green" ;x:300;y:350}

//4.000000 0.369357 9.607893 0.007583 0.015167
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.369357 * 50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.607893; color: "green";x:250;y:200 }
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.007583 * 50 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.015167 * 50 + 10; color: "green" ;x:300;y:350}

//5.000000 0.452661 9.512226 0.011704 0.023409
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.452661*50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.512226; color: "green" ;x:250;y:200}
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.011704* 50 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.023409* 50 + 10; color: "green" ;x:300;y:350}

//6.000000 0.532547 9.417414 0.016680 0.033359
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.532547* 50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.417414; color: "green" ;x:250;y:200}
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.016680* 50 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.033359 * 50+ 10; color: "green";x:300;y:350 }

//7.000000 0.609014 9.323457 0.022509 0.045019
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.609014* 50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.323457; color: "green";x:250;y:200 }
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.022509* 50 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.045019* 50 + 10; color: "green";x:300;y:350 }

// 8.000000 0.682063 9.230357 0.029193 0.058387
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.682063* 50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.230357; color: "green";x:250;y:200 }
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.029193* 50 + 10; color: "green";x:200;y:350 }
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.058387* 50 + 10; color: "green";x:300;y:350 }

//9.000000 0.751692 9.138112 0.036732 0.073464
PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.751692* 50; color: "green";x:250;y:50;}
PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.138112; color: "green";x:250;y:200 }
PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.036732* 50 + 10; color: "green" ;x:200;y:350}
PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.073464* 50 + 10; color: "green";x:300;y:350 }



}
]
transitions:
[
Transition
{
from: "OldState"; to: "NewState"
PropertyAnimation { properties: "width,height,color,radius"; duration: 10000}
},
Transition {
from: "NewState"; to: "OldState"
PropertyAnimation { properties: "width,height,color,radius"; duration: 10000}
}
]
}

------sim_data.js
var sim_data;



var sim_data = new Array(4);

for(var i = 0;i<4;i++)
sim_data[i] = new Array(10);

sim_data[0]= [0.000000,0.098023, 0.192176,0.282582,0.369357,0.452661,
0.532547,0.609014,0.682063,0.751692,0.817902];
sim_data[1]= [10.000000,9.900498,9.801986,9.704455,9.607893,9.51 2226,
9.417414,9.323457,9.230357,9.138112,9.046724];
sim_data[2] = [0.000000,0.000493,0.001946,0.004321,0.007583,0.011 704,
0.016680,0.022509,0.029193,0.036732];
sim_data[3]= [0.000000,0.000986,0.003892,0.008642,0.015167 ,0.023409,
0.033359 ,0.045019, 0.058387 , 0.073464];
-----
thanks in advance

aya_lawliet
23rd August 2011, 10:40
try using

transformOrigin: Item.Center

for the elements you want to zoom.

akash
24th August 2011, 08:43
HI,
Thanks for the reply,
I tried to using this option as below:
Rectangle
{
id: s0;
width: 20;
height: 20;
color: "red"
radius: 10
transformOrigin: Item.Center / transformOrigin: s2.Center
x: 250
y: 50
}

In both cases there is no change in output.

Could you please let me know where the code should be changed to get that effect.

Thanks,
Akash

SamFredericks
7th September 2011, 13:17
My objective is to increase the size of an object using some predefined data in js file. But increment should looks like the object is zoomed from center and not from the lefttop corner.

Do you want to zoom in? Then you have to set the Scale-Factor....
Look at Scale (http://doc.qt.nokia.com/latest/qml-scale.html)

Try it like this:


Rectangle
{
id: s0;
width: 20;
height: 20;
color: "red"
radius: 10
transform: customScale
// or transformOrigin: Item.Center; scale: 1.5
x: 250
y: 50

Scale {
id: customScale
origin.x: 10
origin.y: 10
xScale: 1.5
yScale: 1.5
}
}