Zoom an object from center
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
Re: Zoom an object from center
try using
transformOrigin: Item.Center
for the elements you want to zoom.
Re: Zoom an object from center
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
Re: Zoom an object from center
Quote:
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
Try it like this:
Code:
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
}
}
