在Flex应用程序中扭曲图像控件

  在Flex应用程序中扭曲图像控件

 

        这例子告诉大家怎么利用Transform和Maxtrix两个类来在水平和垂直方向上扭曲图像控件。
源代码如下：

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white"  viewSourceURL ="srcview/index.html" >

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

            private function degreesToRadians(degrees:Number):Number {
                return (degrees * (Math.PI / 180));
            }

            private function skewr(target:DisplayObject):void {
                var m:Matrix = target.transform.matrix;
                m.b = Math.tan(degreesToRadians(sliderY.value));
                m.c = Math.tan(degreesToRadians(sliderX.value));

                var t:Transform = new Transform(target);
                t.matrix = m;

                target.transform = t;
            }

            private function resetMatrix(target:DisplayObject):void {
                // Reset sliders.
                sliderX.value = 0;
                sliderY.value = 0;
                skewr(target);
            }
         ]]>
     </ mx:Script >

     < mx:ApplicationControlBar  dock ="true" >
         < mx:Form  styleName ="plain" >
             < mx:FormItem  label ="skew X:" >
                 < mx:HSlider  id ="sliderX"
                        minimum ="-15"
                        maximum ="15"
                        value ="0"
                        liveDragging ="true"
                        snapInterval ="1"
                        change ="skewr(image);"   />
             </ mx:FormItem >
             < mx:FormItem  label ="skew Y:" >
                 < mx:HSlider  id ="sliderY"
                        minimum ="-15"
                        maximum ="15"
                        value ="0"
                        liveDragging ="true"
                        snapInterval ="1"
                        change ="skewr(image);"   />
             </ mx:FormItem >
             < mx:FormItem >
                 < mx:Button  label ="Reset"
                        click ="resetMatrix(image);"   />
             </ mx:FormItem >
         </ mx:Form >
     </ mx:ApplicationControlBar >

     < mx:Image  id ="image"
            source ="@Embed('Fx.png')"
            scaleContent ="true"
            maintainAspectRatio ="true"
            width ="200"
            height ="200"   />

</ mx:Application >