您现在的位置: 365建站网 > 365学习 > 在Flex应用程序中扭曲图像控件

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

文章来源:365jz.com     点击数:224    更新时间:2009-09-18 10:31   参与评论
这例子告诉大家怎么利用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>
效果如下:

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (224人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------