CocosCreator开发笔记(22)-使用convertToNodeSpace和convertToWorldSpace

最新推荐文章于 2025-10-13 22:16:06 发布

原创最新推荐文章于 2025-10-13 22:16:06 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CocosCreator

Cocos 专栏收录该内容

44 篇文章

订阅专栏

这篇博客详细解释了CocosCreator中convertToNodeSpace、convertToNodeSpaceAR、convertToWorldSpace和convertToWorldSpaceAR四个方法的含义和使用场景。convertToNodeSpace和convertToNodeSpaceAR将点从世界坐标转换到节点的局部坐标，而convertToWorldSpace及convertToWorldSpaceAR则反之。理解这些方法对于在CocosCreator中进行精确的坐标操作至关重要。

含义

convertToNodeSpace

将一个点转换到节点 (局部) 坐标系，并加上锚点的坐标。
也就是说返回的坐标是相对于节点包围盒左下角的坐标。

convertToNodeSpaceAR

将一个点转换到节点 (局部) 空间坐标系，这个坐标系以锚点为原点。
也就是说返回的坐标是相对于节点原点的坐标。

convertToWorldSpace

将一个相对于节点左下角的坐标位置转换到世界空间坐标系。

convertToWorldSpaceAR

将一个相对于节点原点的坐标位置转换到世界空间坐标系。

使用总结

cocos引擎的世界坐标总是以左下角为原点，即左下角坐标为(0, 0)；
convertToNodeSpace和convertToNodeSpaceAR的输入参数是个世界坐标，返回值是相对于节点的局部坐标；
convertToWorldSpace和convertToWorldSpaceAR的输入参数是节点相对坐标，返回值是世界坐标；
如果要把A节点的坐标转换为相对于B节点的坐标，应先把A坐标转换为世界坐标，然后再把得到的世界坐标转换为B坐标；
convertToNodeSpaceAR返回目标节点空间系的局部坐标，一般使用它就够用了；
convertToNodeSpace是在convertToNodeSpaceAR基础上，加上目标节点锚点的坐标，最终得到相对于节点左下角的局部坐标。看下它的源码实现就明白了：

convertToNodeSpace(node, worldPoint) {
    let localPt = node.convertToNodeSpaceAR(worldPoint);
    localPt.x += node.anchorX * node.width;
    localPt.y += node.anchorY * node.height;
    return localPt;
}