在Flex应用程序中扭曲图像控件
文章来源：365jz.com 点击数：299 更新时间：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>
效果如下：
源代码如下：
<?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>如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
- 上一篇：在winform的控件上面如何使用彩色的鼠标指针
- 下一篇：水晶报表使用问题
