Rotating a View About its Center

[antun]

Normally views are rotated about their top-left corner, which not always what you want. To rotate one about its center, you need to offset it inside a container view (with clipping turned off), and rotate that container about its top-left hand corner. The offset needs to be such that the top-left corner of the container view is at the center of the view you want to rotate (i.e. half the width to the left, and half the height up):


<canvas>

<include href="slider/slider.lzx" />

<simpleslider width="200" minlimit="-360" maxlimit="360"
majordivision="2" minordivision="4">
<method event="onvalue">
snowflakeContainer.setAttribute( 'rotation',
Math.round(this.value) );
</method>
</simpleslider>


<view x="120" y="120" name="snowflakeContainer">
<view name="snowflake" resource="snowflake.png"
x="$once{-this.width/2}" y="$once{-this.height/2}" />
</view>

</canvas>


Enjoy!

Thanks to Peter Chea for his excellent slider component (available at mylaszlo.com (http://www.mylaszlo.com/)), and to IconFactory (http://www.iconfactory.com/) for the snowflake graphic.