Cocos Creator 坐标转换
坐标系
基于OpenGL坐标,也就是原点在屏幕左下角,x轴向右,y轴向上。下面讲解的世界坐标也就是与OpenGL坐标系方向一致。
本地坐标
本地坐标是相对于父节点而言的,也就是相对于父节点的位置。通过node的getPosition()来获取坐标。
世界坐标
世界坐标也就是上面说的OpenGL坐标,原点在屏幕左下角,x轴向右,y轴向上。例如触摸事件中得到的坐标就是世界坐标。
锚点
锚点是对应于Node属性中的AnChor。其中(0.5,0.5)是位于中心,(0,0)是位于左下角,(0,1)是位于左上角,(1,0)是位于右下角,(1,1)是位于右上角
坐标转换
1. 取得节点的世界坐标
/** * 得到一个节点的世界坐标 * node的原点在中心 * @param {*} node */ function localConvertWorldPointAR(node) { if (node) { return node.convertToWorldSpaceAR(cc.v2(0, 0)); } return null; } /** * 得到一个节点的世界坐标 * node的原点在左下边 * @param {*} node */ function localConvertWorldPoint(node) { if (node) { return node.convertToWorldSpace(cc.v2(0, 0)); } return null; }
2. 世界坐标转换成某个节点下的坐标
/** * 把一个世界坐标的点,转换到某个节点下的坐标 * 原点在node中心 * @param {*} node * @param {*} worldPoint */ function worldConvertLocalPointAR(node, worldPoint) { if (node) { return node.convertToNodeSpaceAR(worldPoint); } return null; } /** * 把一个世界坐标的点,转换到某个节点下的坐标 * 原点在node左下角 * @param {*} node * @param {*} worldPoint */ function worldConvertLocalPoint(node, worldPoint) { if (node) { return node.convertToNodeSpace(worldPoint); } return null; }
3. 节点的本地坐标转到另一个节点的本地坐标下
/** * * 把一个节点的本地坐标转到另一个节点的本地坐标下 * @param {*} node * @param {*} targetNode */ function convetOtherNodeSpace(node, targetNode) { if (!node || !targetNode) { return null; } //先转成世界坐标 let worldPoint = localConvertWorldPoint(node); return worldConvertLocalPoint(targetNode, worldPoint); } /** * * 把一个节点的本地坐标转到另一个节点的本地坐标下 * @param {*} node * @param {*} targetNode */ function convetOtherNodeSpaceAR(node, targetNode) { if (!node || !targetNode) { return null; } //先转成世界坐标 let worldPoint = localConvertWorldPointAR(node); return worldConvertLocalPointAR(targetNode, worldPoint); }