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

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

$\begin{bmatrix} M_{11} & M_{12}& 0\\ M_{21} & M_{22}& 0\\ X & Y& 1 \end{bmatrix}$

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

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

$\begin{bmatrix} a & b& t_{x}\\ c & d& t_{y}\\ 0 & 0& 1 \end{bmatrix}$

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

tx,ty的平移示例：

01
import fl.events.SliderEvent; 

02
  
03
var box:Box = new Box(); 

04
var startX:Number = stage.stageWidth/2 ; 

05
var startY:Number = stage.stageHeight/2 ; 

06
box.x = startX; 

07
box.y = startY; 

08
addChild(box); 

09
  
10
silder_tx.addEventListener(SliderEvent.CHANGE,slider_tx_ChangeHandler); 

11
silder_ty.addEventListener(SliderEvent.CHANGE,slider_ty_ChangeHandler); 

12
  
13
function slider_tx_ChangeHandler(e:SliderEvent):void{    

14
    txt_tx.text = e.value.toString();    

15
    var tempMatrix:Matrix = box.transform.matrix; 

16
    tempMatrix.tx = startX + e.value;    

17
    box.transform.matrix = tempMatrix; 

18
  
19
} 

20
  
21
function slider_ty_ChangeHandler(e:SliderEvent):void{    

22
    txt_ty.text = e.value.toString(); 

23
    var tempMatrix:Matrix = box.transform.matrix; 

24
    tempMatrix.ty = startY + e.value;    

25
    box.transform.matrix = tempMatrix; 

26
}

a,d缩放示例：

01
import fl.events.SliderEvent; 

02
  
03
var box:Box = new Box(); 

04
var startX:Number = stage.stageWidth/2; 

05
var startY:Number = stage.stageHeight/2; 

06
box.x = startX; 

07
box.y = startY; 

08
addChild(box); 

09
  
10
silder_scaleX.addEventListener(SliderEvent.CHANGE,silder_scaleX_ChangeHandler); 

11
silder_scaleY.addEventListener(SliderEvent.CHANGE,silder_scaleY_ChangeHandler); 

12
  
13
function silder_scaleX_ChangeHandler(e:SliderEvent):void{    

14
    txt_tx.text = e.value.toString();    

15
    var tempMatrix:Matrix = box.transform.matrix; 

16
    tempMatrix.a = e.value;//x轴缩放 

17
    box.transform.matrix = tempMatrix; 

18
  
19
} 

20
  
21
function silder_scaleY_ChangeHandler(e:SliderEvent):void{    

22
    txt_ty.text = e.value.toString(); 

23
    var tempMatrix:Matrix = box.transform.matrix; 

24
    tempMatrix.d = e.value; //y轴缩放   

25
    box.transform.matrix = tempMatrix; 

26
}

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

01
import fl.events.SliderEvent; 

02
  
03
var box:Box = new Box(50,100,0x00ff00); 

04
var startX:Number = stage.stageWidth/2 ; 

05
var startY:Number = stage.stageHeight/2 ; 

06
box.x = startX; 

07
box.y = startY; 

08
addChild(box); 

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

11
  
12
box2.x = startX; 

13
box2.y = startY; 

14
addChild(box2); 

15
  
16
silder_Angle.addEventListener(SliderEvent.CHANGE,silder_Angle_ChangeHandler); 

17
  
18
function silder_Angle_ChangeHandler(e:SliderEvent):void{     

19
    txt_tx.text = e.value.toString();    

20
      
21
    var angle = e.value * Math.PI /180; 

22
    //trace(angle); 

23
      
24
    var sin = Math.sin(angle); 

25
    var cos = Math.cos(angle);   

26
      
27
    var tempMatrix:Matrix = box.transform.matrix; 

28
    tempMatrix.a = cos; 

29
    tempMatrix.b = sin; 

30
    tempMatrix.c = -sin; 

31
    tempMatrix.d = cos; 

32
    box.transform.matrix = tempMatrix;   

33
    box2.transform.matrix = tempMatrix;      

34
      
35
}

b,c 倾斜示例：

01
import fl.events.SliderEvent; 

02
  
03
var box:Box = new Box(50,50); 

04
var startX:Number = stage.stageWidth/2 ; 

05
var startY:Number = stage.stageHeight/2 ; 

06
box.x = startX; 

07
box.y = startY; 

08
addChild(box); 

09
  
10
silder_skewX.addEventListener(SliderEvent.CHANGE,silder_skewX_ChangeHandler); 

11
  
12
function silder_skewX_ChangeHandler(e:SliderEvent):void{     

13
    txt_tx.text = e.value.toString();        

14
    var angle = e.value * Math.PI /180;  

15
    var tan = Math.tan(angle);   

16
    var tempMatrix:Matrix = box.transform.matrix;        

17
    tempMatrix.c = tan;  

18
    box.transform.matrix = tempMatrix;    

19
} 

20
  
21
  
22
silder_skewY.addEventListener(SliderEvent.CHANGE,silder_skewY_ChangeHandler); 

23
  
24
function silder_skewY_ChangeHandler(e:SliderEvent):void{     

25
    txt_ty.text = e.value.toString();        

26
    var angle = e.value * Math.PI /180;  

27
    var tan = Math.tan(angle);   

28
    var tempMatrix:Matrix = box.transform.matrix;        

29
    tempMatrix.b = tan;  

30
    box.transform.matrix = tempMatrix;    

31
}