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