CocosCreator中_worldMatrix到底是什么(下) (2)

在代码中使用了两次旋转分别使用angle以及rotation 前者默认逆时针方向后者默认顺时针方向。也许目前您可能会认为逆时针旋转30°，然后再顺时针旋转30°，刚好回到0°位置。其实不是的，cocos 中矩阵的更新是通过最后的状态值确定的。图像最终表现为顺时针旋转30°。在最初构思这部分内容时，想更清晰展示矩阵在游戏开发中的魔力。计划是通过属性的方式将图形变形，然后直接改变node私有变量_matrix给变回去，就泡汤了。以上代码图形的最终结果如下

回到控制台，输出的日志信息如下

------------------旋转30°------------------- ---1. [世界坐标矩阵]--- [ 0.8660254037844387, -0.49999999999999994, 0, 0, 0.49999999999999994, 0.8660254037844387, 0, 0, 0, 0, 1, 0, 480, 320, 0, 1 ] ---2. [本地坐标矩阵]--- [ 0.8660254037844387, -0.49999999999999994, 0, 0, 0.49999999999999994, 0.8660254037844387, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] ---3. [当前各属性状态]--- 1. position: (0.00, 0.00, 0.00) 2. scale: 1 3. angle: -30 4. skewX: 0 5. skewY: 0 6. width: 100 7. height: 100 8. parentWidth: 960 9. parentHeight: 640 ---4. [锚点角(0,0)坐标信息]--- 原点的世界坐标:(480.00, 320.00) 本地坐标: (0.00, 0.00) ---5. [右上角(50,50)坐标信息]--- 右上角的世界坐标:(548.30, 338.30) 本地坐标: (68.30, 18.30)

以上输出中 math.sin(math.PI/6)=0.499,math.cos(math.PI/6)=0.866,最终使用的rotation所有需要注意负号。从当前属性的状态中也angle=-30也说明了问题。本地坐标矩阵和世界坐标矩阵结果也符合推导结果。我们这里在看看右上角(50,50)的坐标变成了(68.30,18.30)，我们通过结果矩阵来推导下这个坐标值，由于cocos creator中Mat4中 toString方法做了转置，所有需要使用点乘本地坐标矩阵，即

根据矩阵公式可知

6. 分别沿x轴和y轴方向倾斜30°

修改start中代码为如下

start() { this.log("初始状态"); this.node.angle = 30; this.log("旋转30°"); this.node.rotation = 30; this.log("旋转30°"); this.node.skewX = 30; this.node.skewY = 30; this.log("XY倾斜30°"); }

重新编译，您将在浏览器看到倾斜后的图形，显示如下

回到控制台，输出日志如下

------------------XY倾斜30°------------------- ---1. [世界坐标矩阵]--- [ 1.1547005383792515, 5.551115123125783e-17, 0, 0, 1, 0.577350269189626, 0, 0, 0, 0, 1, 0, 480, 320, 0, 1 ] ---2. [本地坐标矩阵]--- [ 1.1547005383792515, 5.551115123125783e-17, 0, 0, 1, 0.577350269189626, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] ---3. [当前各属性状态]--- 1. position: (0.00, 0.00, 0.00) 2. scale: 1 3. angle: -30 4. skewX: 30 5. skewY: 30 6. width: 100 7. height: 100 8. parentWidth: 960 9. parentHeight: 640 ---4. [锚点角(0,0)坐标信息]--- 原点的世界坐标:(480.00, 320.00) 本地坐标: (0.00, 0.00) ---5. [右上角(50,50)坐标信息]--- 右上角的世界坐标:(587.74, 348.87) 本地坐标: (107.74, 28.87)

说明,在js中一个很小的值就认为是0，针对输出结果做一下简单推导,由于旋转和倾斜都是30度所有，我们用s c t 分别代表sin(30) cos(30) tan(30) 所以当前输出的复合矩阵P有以下关系

依次带入求值便可得到以上输出结果。

7. 将图形缩放0.5倍

继续修改start方法里边的代码，改动如下

start() { this.log("初始状态"); this.node.angle = 30; this.log("旋转30°"); this.node.rotation = 30; this.log("旋转30°"); this.node.skewX = 30; this.node.skewY = 30; this.log("XY倾斜30°"); this.node.scale = 0.5; this.log("缩小50%"); }

重新编译，您将在浏览器看到缩小后的图形，显示如下

回到控制台，输出日志如下

------------------缩小50%------------------- ---1. [世界坐标矩阵]--- [ 0.5773502691896257, 2.7755575615628914e-17, 0, 0, 0.5, 0.288675134594813, 0, 0, 0, 0, 1, 0, 480, 320, 0, 1 ] ---2. [本地坐标矩阵]--- [ 0.5773502691896257, 2.7755575615628914e-17, 0, 0, 0.5, 0.288675134594813, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] ---3. [当前各属性状态]--- 1. position: (0.00, 0.00, 0.00) 2. scale: 0.5 3. angle: -30 4. skewX: 30 5. skewY: 30 6. width: 100 7. height: 100 8. parentWidth: 960 9. parentHeight: 640 ---4. [锚点角(0,0)坐标信息]--- 原点的世界坐标:(480.00, 320.00) 本地坐标: (0.00, 0.00) ---5. [右上角(50,50)坐标信息]--- 右上角的世界坐标:(533.87, 334.43) 本地坐标: (53.87, 14.43)

针对缩放相对简单，输出结果矩阵每项直接乘以缩放比列0.5可得

8. 将图形向右上方平移10px