Collage FX Studio
PhotoMagic Studio
Photo Card Workshop
Magic Animator

Using Matrix and Transform Class in Flex

We often need to rotate an image in both desktop application and web application. This example shows how to rotate a image with Matrix class and Transform class in Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
        layout="vertical" backgroundColor="#E0E0E0">

    <mx:Script>
        <![CDATA[
         
            private function degree2Radian(degree:Number):Number {
                return (degree * (Math.PI / 180));
            }

                private function RotateImage(DispObj:DisplayObject):void {
             
    var q:Number  = degree2Radian(slider.value);
    var centerX:Number = demoImage.width / 2;
    var centerY:Number = demoImage.height /2;
    var m:Matrix = new Matrix();
    m.translate(-1 * centerX, -1 * centerY);
    m.rotate(q);
    m.translate(centerX, centerY);      
    DispObj.transform.matrix = m;
                var t:Transform = new Transform(DispObj);
                t.matrix = m;
                DispObj.transform = t;
            }

            private function resetImage(DispObj:DisplayObject):void {
              
                slider.value = 0;
                RotateImage(DispObj);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" backgroundColor="#E0E0E0">
            <mx:FormItem label="Rotate Degree:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="360"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        change="RotateImage(demoImage);" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Reset"
                        click="resetImage(demoImage);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Image id="demoImage"
            source="@Embed('images/demo.jpg')"
            scaleContent="true"
            maintainAspectRatio="true"           
            width="400"
            height="400" />

</mx:Application>




Comment: 1 | Read times: -
thiyagarajan[2012-05-11 11:53 PM | del]
Simply super
Announce commentary
Your name
Content
Validation code Code