flex_(11)显示对象矩阵转换;

=>MatrixTransformerApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
? xmlns:s="library://ns.adobe.com/flex/spark"
? xmlns:mx="library://ns.adobe.com/flex/mx"
? minWidth="955" minHeight="600" creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import com.cen.programmingas3.matrix.MatrixTransformer;

import mx.events.FlexEvent;

protected function creationCompleteHandler(event:FlexEvent):void
{
/*初始化各个控件*/
resetFields();

setImageMask();
}

/**
* 遮盖
*/
public function setImageMask():void
{
/*create a rectangular mask shape*/
var maskImage:Shape = new Shape();
maskImage.graphics.beginFill(0x666666);
maskImage.graphics.drawRect(0,?imagePanel.width,imagePanel.height);
maskImage.graphics.endFill();

/*align(对齐) the mask with the parent imagePanel*/
var maskOrigin:Point = maskImage.globalToLocal(imagePanel.localToGlobal(new Point(0,0)));
maskImage.x = maskOrigin.x;
maskImage.y = maskOrigin.y;

img.content.mask = maskImage;// 保证只能通过矩形才能看到图像面板；
}

/**
* 重置各个控件值
*/
private function resetFields():void
{
xScaleSlider.value = 100;
yScaleSlider.value = 100;
dxSlider.value = 0;
dySlider.value = 0;
rotationSlider.value = 0;
skewSlider.value = 0;
}

private function resetTransform():void
{
img.content.transform.matrix = new Matrix();
resetFields();
}

private function transformDisplayObject():void
{
var tempMatrix:Matrix = img.content.transform.matrix;

/*defines the skew type code*/
var skewSide:String = new String();
if(skewRight.selected) {
skewSide = "right";
}else {
skewSide = "bottom";
}

tempMatrix = MatrixTransformer.transform(tempMatrix,?
xScaleSlider.value,
yScaleSlider.value,?
dxSlider.value,
dySlider.value,
rotationSlider.value,
skewSlider.value,
skewSide);

img.content.transform.matrix = tempMatrix;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RadioButtonGroup id="skewMode"/>
</fx:Declarations>

<!--显示对象矩阵转换-->
<s:HGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<s:Panel width="350" height="630" title="缩放、转化、旋转以及倾斜">
<s:VGroup width="100%" height="100%">
<mx:Text textAlign="left" width="100%"
text="在下边设置转换值，然后按下‘转换’按钮来查看右边图形的整体变化；"/>

<s:Form width="100%" height="100%">
<s:FormItem label="Scale X(%):" width="100%">
<mx:HSlider id="xScaleSlider" width="100%" minimum="0" maximum="200"
tickInterval="20" snapInterval="1" labels="[0,100,200]"/>
</s:FormItem>

<s:FormItem label="Scale Y(%):" width="100%">
<mx:HSlider id="yScaleSlider" width="100%" minimum="0" maximum="200"
tickInterval="20" snapInterval="1" labels="[0,200]"/>
</s:FormItem>

<s:FormItem label="Move X(pixels):" width="100%">
<mx:HSlider id="dxSlider" width="100%" minimum="-100" maximum="100"
? ?tickInterval="20" snapInterval="1" labels="[-100,100]"/>
</s:FormItem>

<s:FormItem label="Move Y(pixels)" width="100%">
<mx:HSlider id="dySlider" width="100%" minimum="-100" maximum="100"
tickInterval="20" snapInterval="1" labels="[-100,100]"/>
</s:FormItem>

<s:FormItem label="Rotate (°):" width="100%">
<mx:HSlider id="rotationSlider" width="100%" minimum="-360" maximum="360"
tickInterval="90" snapInterval="1" labels="[-360,360]"/>
</s:FormItem>

<s:FormItem label="Skew Mode:" width="100%">
<mx:RadioButton groupName="skewMode" id="skewRight" value="skewRight" label="Slide right-hand side down"
width="100%" selected="true"/>
<mx:RadioButton groupName="skewMode" id="skewBottom" value="skewBottom" label="Slide bottom side to right"
width="100%"/>
</s:FormItem>

<s:FormItem label="Skew angle (°):" width="100%">
<mx:HSlider id="skewSlider" width="100%" minimum="-90" maximum="90"
tickInterval="10" snapInterval="1" labels="[-90,90]"/>
</s:FormItem>
</s:Form>

<mx:ControlBar width="100%" horizontalAlign="right">
<s:Button label="转换" id="TransformBtn" click="{transformDisplayObject()}"/>
<s:Button label="重置" id="resetBtn" click="{resetTransform()}"/>
</mx:ControlBar>
</s:VGroup>
</s:Panel>

<s:Panel id="imagePanel" title="图像" height="630" width="410">
<s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Image id="img" scaleContent="true" source="public/img/Banana.jpg"/>
</s:VGroup>
</s:Panel>
</s:HGroup>
</s:Application>

=>MatrixTransformer.as

package com.cen.programmingas3.matrix { import flash.geom.Matrix; /** * 支持单个matrix转换: scaling(缩放),translation(移动),rotation(旋转),and skewing(倾斜). * 理由：这样的薪资不多(纵观各行各业，这样的薪酬真的不多)；物价飞快增长，房价、住房费用居高不下，生活开支多； * 积极性_真的不想每年回家都两袋空空，那样真的很打击人，会使人产生一种消极心理，总是怀疑自己行不行，这样的感觉真的很不好； * @author cen */ public class MatrixTransformer { /** * 静态方法：矩形转换方法； * @param sourceMatrix * @param xScale * @param yScale * @param dx * @param dy * @param rotation * @param skew * @param skewType * @return? */ public static function transform(sourceMatrix:Matrix,xScale:Number=100,yScale:Number=100,dx:Number=0,dy:Number=0,rotation:Number=0,skew:Number=0,skewType:String="right"):Matrix { /*(倾斜)skew*/ sourceMatrix = MatrixTransformer.skew(sourceMatrix,skew,skewType); /*(缩放)scale*/ sourceMatrix = MatrixTransformer.scale(sourceMatrix,xScale,yScale); /*(移动)translate*/ sourceMatrix = MatrixTransformer.translate(sourceMatrix,dx,dy); /*(旋转)rotate*/ sourceMatrix = MatrixTransformer.rotate(sourceMatrix,rotation,"degrees"); return sourceMatrix; } /** * 旋转 * @param sourceMatrix * @param angle * @param unit * @return? */ public static function rotate(sourceMatrix:Matrix,angle:Number,unit:String="radians"):Matrix{ if(unit == "degrees") { angle = Math.PI * 2 * angle / 360; } if(unit == "gradients") { angle = Math.PI * 2 * angle / 100; } sourceMatrix.rotate(angle); trace("=>rotate_angle("+angle+")_unit("+unit+");"); return sourceMatrix; } /** * 移动 * @param sourceMatrix * @param dx * @param dy * @return? */ public static function translate(sourceMatrix:Matrix,dx:Number,dy:Number):Matrix{ sourceMatrix.translate(dx,dy); trace("=>translate_xScale("+dx+")_yScale("+dy+");"); return sourceMatrix; } /** * 缩放? * @param sourceMatrix * @param xScale * @param yScale * @param percent * @return? */ public static function scale(sourceMatrix:Matrix,xScale:Number,yScale:Number,percent:Boolean=true):Matrix { if(percent) {// 参数为百分比； xScale = xScale / 100; yScale = yScale / 100; } sourceMatrix.scale(xScale,yScale); trace("=>scale_xScale("+xScale+")_yScale("+yScale+");"); return sourceMatrix; } /** * 倾斜 * @param sourceMatrix * @param angle * @param skewSide * @param unit * @return? */ public static function skew(sourceMatrix:Matrix,skewSide:String="right",unit:String="degrees"):Matrix{ if(unit == "degrees") { // 单位为度； angle = Math.PI * 2 * angle ?/ 360; } if(unit == "gradients") { // 单位为渐变； angle = Math.PI * 2 * angle / 100; } var skewMatrix:Matrix = new Matrix(); if(skewSide == "right") { skewMatrix.b = Math.tan(angle); }else {// skewSide == "bottom" skewMatrix.c = Math.tan(angle); } sourceMatrix.concat(skewMatrix); trace("=>skew_angle("+angle+")_skewSide("+skewSide+");"); return sourceMatrix; } } }