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, 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, 100, 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, 0, 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, 0, 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, 0, 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, 0, 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, angle:Number, 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;

}

}

}