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