转载自 https://www.jianshu.com/p/350a488f4802
主要简单讲解下坐标系统,由于Creator是基于Cocos2dx,也就是使用OpenGL的坐标系,即原点在屏幕左下角,x轴向右,y轴向上。然后讲解下本地坐标与世界坐标,最后讲下坐标转换。
坐标系
基于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);
}
最后
通过本文的讲解,希望给新手们有所帮助。坐标转换的应用可以到触摸事件Demo查看。