Flash/Flex学习笔记(56)：矩阵变换

先回顾一下Silvelright中的矩阵变换[转]WPF中的MatrixTransform，简单点讲：矩阵变换能改变对象的x,y坐标，x或y方向上的缩放，以及对象在x,y轴上的旋转(扭曲变形)

上面这个是WPF/Silverlight中的3*3变换矩阵，其中X,Y用于改变对象的坐标；M11,M22用于对象在x,y轴上的缩放；而M12,M21用于y轴,x轴上的扭曲。

 

As3.0中的Matix类跟这个类似：

只不过，这个矩阵旋转了一下(行列互换了)，tx,ty仍然是用于坐标的平移；a,d用于x,y方向的缩放(前提是b,c设置为0)；b,c用于y，x轴上的扭曲。当然这些元素可以组合起来使用。(更详细的用法，请参阅AS3.0 Matrix )

 

tx,ty的平移示例：

import fl.events.SliderEvent;

var box:Box = new Box();
var startX:Number = stage.stageWidth/2 ;
var startY:Number = stage.stageHeight/2 ;
box.x = startX;
box.y = startY;
addChild(box);

silder_tx.addEventListener(SliderEvent.CHANGE,slider_tx_ChangeHandler);
silder_ty.addEventListener(SliderEvent.CHANGE,slider_ty_ChangeHandler);

function slider_tx_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();	
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.tx = startX + e.value;   
    box.transform.matrix = tempMatrix;

}

function slider_ty_ChangeHandler(e:SliderEvent):void{	
	txt_ty.text = e.value.toString();
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.ty = startY + e.value;   
    box.transform.matrix = tempMatrix;
}

a,d缩放示例：

import fl.events.SliderEvent;

var box:Box = new Box();
var startX:Number = stage.stageWidth/2;
var startY:Number = stage.stageHeight/2;
box.x = startX;
box.y = startY;
addChild(box);

silder_scaleX.addEventListener(SliderEvent.CHANGE,silder_scaleX_ChangeHandler);
silder_scaleY.addEventListener(SliderEvent.CHANGE,silder_scaleY_ChangeHandler);

function silder_scaleX_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();	
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.a = e.value;//x轴缩放
    box.transform.matrix = tempMatrix;

}

function silder_scaleY_ChangeHandler(e:SliderEvent):void{	
	txt_ty.text = e.value.toString();
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.d = e.value; //y轴缩放  
    box.transform.matrix = tempMatrix;
}

a,b,c,d 旋转示例：

import fl.events.SliderEvent;

var box:Box = new Box(50,100,0x00ff00);
var startX:Number = stage.stageWidth/2 ;
var startY:Number = stage.stageHeight/2 ;
box.x = startX;
box.y = startY;
addChild(box);

var box2:Box = new Box(100,75,0xff6600);

box2.x = startX;
box2.y = startY;
addChild(box2);

silder_Angle.addEventListener(SliderEvent.CHANGE,silder_Angle_ChangeHandler);

function silder_Angle_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();	
	
	var angle = e.value * Math.PI /180;
	//trace(angle);
	
	var sin = Math.sin(angle);
	var cos = Math.cos(angle);	
	
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.a = cos;
	tempMatrix.b = sin;
	tempMatrix.c = -sin;
	tempMatrix.d = cos;
	box.transform.matrix = tempMatrix;	
	box2.transform.matrix = tempMatrix;		
    
}

b,c 倾斜示例：

import fl.events.SliderEvent;

var box:Box = new Box(50,50);
var startX:Number = stage.stageWidth/2 ;
var startY:Number = stage.stageHeight/2 ;
box.x = startX;
box.y = startY;
addChild(box);

silder_skewX.addEventListener(SliderEvent.CHANGE,silder_skewX_ChangeHandler);

function silder_skewX_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();		
	var angle = e.value * Math.PI /180;	
	var tan = Math.tan(angle);	
	var tempMatrix:Matrix = box.transform.matrix;    	
	tempMatrix.c = tan;	
	box.transform.matrix = tempMatrix;   
}


silder_skewY.addEventListener(SliderEvent.CHANGE,silder_skewY_ChangeHandler);

function silder_skewY_ChangeHandler(e:SliderEvent):void{	
	txt_ty.text = e.value.toString();		
	var angle = e.value * Math.PI /180;	
	var tan = Math.tan(angle);	
	var tempMatrix:Matrix = box.transform.matrix;    	
	tempMatrix.b = tan;	
	box.transform.matrix = tempMatrix;   
}