Flash/flex Study Notes (56): matrix transformation

First, let's review the matrix transformation in silvelright [to] the matrixtransform in WPF. To put it simply, the matrix transformation can change the scale of the X, Y, X, or Y coordinates of the object, and the rotation (distortion) of the object on the X and Y axes)

The above is the 3*3 Transformation Matrix in WPF/Silverlight, where X and Y are used to change the coordinates of objects; M11 and m22 are used to scale objects on X and Y axes; while M12, m21 is used to distort the Y axis and X axis.

 

The matix class in as3.0 is similar to this one:

However, this matrix is rotated (the rows and columns are interchangeable), and TX and ty are still used for coordinate translation. A and D are used for zooming in the X and Y directions (premise: B, C is set to 0); B, C is used for Y, X axis distortion. Of course, these elements can be combined. (For more detailed usage, see as3.0 matrix)

 

Example of TX, Ty Translation:

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 scaling example:

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; // zoom box on the X axis. 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-axis zoom box. transform. matrix = tempmatrix ;}
 

A, B, C, D rotation example:

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 skew example:

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 ;}