Flex中利用Transform和Matrix类将图片扭曲的例子

By Minidxer | April 8, 2008

接下来的例子演示了Flex中如何利用Transform和Matrix类将Image控件横向，纵向扭曲。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private function radiansToDegrees(radians:Number):Number {
  10.                 return (radians * (180 / Math.PI));
  11.             }
  12.  
  13.             private function degreesToRadians(degrees:Number):Number {
  14.                 return (degrees * (Math.PI / 180));
  15.             }
  16.  
  17.             private function skewr(target:DisplayObject):void {
  18.                 var m:Matrix = target.transform.matrix;
  19.                 m.b = Math.tan(degreesToRadians(sliderY.value));
  20.                 m.c = Math.tan(degreesToRadians(sliderX.value));
  21.  
  22.                 var t:Transform = new Transform(target);
  23.                 t.matrix = m;
  24.  
  25.                 target.transform = t;
  26.             }
  27.  
  28.             private function resetMatrix(target:DisplayObject):void {
  29.                 // Reset sliders.
  30.                 sliderX.value = 0;
  31.                 sliderY.value = 0;
  32.                 skewr(target);
  33.             }
  34.         ]]>
  35.     </mx:Script>
  36.  
  37.     <mx:ApplicationControlBar dock="true">
  38.         <mx:Form styleName="plain">
  39.             <mx:FormItem label="skew X:">
  40.                 <mx:HSlider id="sliderX"
  41.                         minimum="-15"
  42.                         maximum="15"
  43.                         value="0"
  44.                         liveDragging="true"
  45.                         snapInterval="1"
  46.                         change="skewr(image);" />
  47.             </mx:FormItem>
  48.             <mx:FormItem label="skew Y:">
  49.                 <mx:HSlider id="sliderY"
  50.                         minimum="-15"
  51.                         maximum="15"
  52.                         value="0"
  53.                         liveDragging="true"
  54.                         snapInterval="1"
  55.                         change="skewr(image);" />
  56.             </mx:FormItem>
  57.             <mx:FormItem>
  58.                 <mx:Button label="Reset"
  59.                         click="resetMatrix(image);" />
  60.             </mx:FormItem>
  61.         </mx:Form>
  62.     </mx:ApplicationControlBar>
  63.  
  64.     <mx:Image id="image"
  65.             source="@Embed('Fx.png')"
  66.             scaleContent="true"
  67.             maintainAspectRatio="true"
  68.             width="200"
  69.             height="200" />
  70.  
  71. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Recent Posts

Blogroll

Sponsored Ads