在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>
效果如下:
<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>