注:这里的DisplayObject的注册点都在左上角的原点(0,0)处,也就是说显示对象里面的内容的左上角与(0,0)坐标重合,如果你已经把显示对象的注册点弄到了内容的中心上,就不能也不需要用这段代码了。
//com.cstar.utils.FlipUtil.as
package com.cstar.utils{ public class FlipUtil { public static function flipH(target:DisplayObject):void { if(!target || !target.parent) { return; } var matrix:Matrix=target.transform.matrix; //如果设置了3D属性,则matrix会变成null,无法再执行2D水平翻转 if(!matrix) { return; } var bound:Rectangle=target.getBounds(target.parent); var cX:Number=bound.x+bound.width/2; var m:Matrix=new Matrix(-1,0,0,1,cX*2,0); matrix.concat(m); target.transform.matrix=matrix; } public static function flipV(target:DisplayObject):void { if(!target || !target.parent) { return; } var matrix:Matrix=target.transform.matrix; //如果设置了3D属性,则matrix会变成null,无法再执行2D垂直翻转 if(!matrix) { return; } var bound:Rectangle=target.getBounds(target.parent); var cY:Number=bound.y+bound.height/2; var m:Matrix=new Matrix(1,0,0,-1,0,cY*2); matrix.concat(m); target.transform.matrix=matrix; } }}
参考资料:http://cairographics.org/matrix_transform/
matrix transform
This is some basic information about matrix transformation for people who forgot their math course or didn't have one.
Lets take that C = math.cos(A), S = math.sin(A), T = math.tan(A)
mtrx have to be used in the command ctx.transform(mtrx)
Action | Command | Matrix for transform |
Shift by dx,dy | ctx.translate(dx,dy) | mtrx = cairo.Matrix(1,0,0,1,dx,dy) |
Scale by fx,fy | ctx.scale(fx,fy) | mtrx = cairo.Matrix(fx,0,0,fy,0,0) |
Rotation to A radians | ctx.rotate(A) | mtrx = cairo.Matrix(C,S,-S,C,0,0) |
Rotation to A radians with center in x,y | ctx.translate(x,y); ctx.rotate(A); ctx.translate(-x,-y) | mtrx = cairo.Matrix(C,S,-S,C,x-C*x+S*y,y-S*x-C*y) |
X-skew by A | -- | mtrx = cairo.Matrix(1,0,T,1,0,0) |
Y-skew by A | -- | mtrx = cairo.Matrix(1,T,0,1,0,0) |
Flip H/V with center in cx:cy | -- | mtrx = cairo.Matrix(fx,0,0,fy,cx*(1-fx),cy*(fy-1)) |
Flip H/V and rotation with center in cx:cy | -- | mtrx = cairo.Matrix(fx*C,fx*S,-S*fy,C*fy,C*cx*(1-fx)-S*cy*(fy-1)+cx-C*cx+S*cy,S*cx*(1-fx)+C*cy*(fy-1)+cy-S*cx-C*cy) |
(For flips fx/fy = 1 means 'no flip', fx/fy = -1 are used for horizontal/vertical flip).
To apply more than one transformation you can multiply matrix. 'Unfortunately' matrix multiplication is slightly different than regular multiplication of numbers. For square matrix with N columns and N rows the rule is 'Rij == sum of Aix to Bxj products, where x = [1,N]'. It's easy to figure out that for matrix multiplication A*B is not always the same as B*A. The rule of matrix multiplication is illustrated with a picture here:
In a cairo.matrix(1,2,3,4,5,6), 1 is a11, 2 is a21, 3 is a12, 4 is a22, 5 is a13 and 6 is a23. a31 and a32 are 0, a33 is 1.
Cairo provides matrix and some other matrix .