how you handle your rotation around the middle point?

[haplo]

i'm getting lost with setting the xoffset and yoffset to be width/2 and height/2.

when setting the values of xoffset and yoffset the view location is changing to fix that i need to add the xoffset to x or yoffset to y , something like :

this.setAttribute("xoffset",this.width/2)
this.setAttribute("yoffset",this.height/2)
this.setAttribute("y",this.y+this.height/2)
this.setAttribute("x",this.x+this.width/2)
now the problem start to get more complicate when i have more complicate stuff to do.
for example, i'm trying to rotate a view around the middle of some wrapper. when the user click the view he can rotate the view around the view's middle point.
i have reallly hard time to keep the y and x coordinates right. . . .
any one done something similier?

[haplo]

ok, i wrote some code to explain my problem

both views have yellow dot that allow the user to rotate the view
the wrapper rotation should also effect the small view's rotation

the small view can not be a child of the wrapper

how to make this one work with out funny jumps ?



<canvas debug="true">
<class name="rotator_state" extends="state">
<attribute name="rotation" value="${
Math.round((Math.atan2(parent.getMouse('y')-
this.y, parent.getMouse('x')-this.x))/Math.PI*180)+
this.angleFactor}"/>

<attribute name="angleFactor" value="${180-(Math.atan((this.height/2)/(this.width/2))/Math.PI*180)}"/>
</class>


<view id="wrapper" width="300" height="300" bgcolor="red" x="200" y="200">
<attribute name="xoffset" value="$once{this.width/2}"/>
<attribute name="yoffset" value="$once{this.height/2}"/>
<attribute name="x" value="$once{this.width/2+this.x}"/>
<attribute name="y" value="$once{this.height/2+this.y}"/>
<view bgcolor="yellow" height="10" width="10" onmousedown="parent.rotator.apply()" onmouseup="parent.rotator.remove()"/>

<rotator_state name="rotator">
<method event="onapply">
myObject.AlignOffsetForWrapper()
myObject.wrapperRotate.apply()
</method>
</rotator_state>
</view>

<view id="myObject" width="50" height="50" bgcolor="green" x="270" y="250">
<view bgcolor="yellow" height="10" width="10" onmousedown="parent.rotator.apply()" onmouseup="parent.rotator.remove()"/>

<method name="AlignOffsetForWrapper">
this.setAttribute("yoffset",((wrapper.y-wrapper.yoffset)+wrapper.height/2) - this.y )
this.setAttribute("xoffset",((wrapper.x-wrapper.xoffset)+wrapper.width/2) - this.x)
this.setAttribute("y",((wrapper.y-wrapper.yoffset)+wrapper.height/2) )
this.setAttribute("x",((wrapper.x-wrapper.xoffset)+wrapper.width/2) )
</method>
<method name="AlignOffsetForThis">
this.setAttribute("yoffset",this.height/2 )
this.setAttribute("xoffset",this.width/2 )
this.setAttribute("x",this.width/2+this.x )
this.setAttribute("y",this.height/2+this.y )
</method>

<!--this used by the wrapper to rotate the object-->
<state name="wrapperRotate">
<attribute name="pre_rotation" value="$once{this.rotation}"/>
<attribute name="rotation" value="${this.pre_rotation+wrapper.rotation}"/>
</state>

<rotator_state name="rotator">
<method event="onapply">
myObject.AlignOffsetForThis()

</method>
</rotator_state>

</view>

</canvas>