cocos坐标系转换-局部坐标和世界坐标互转

需求描述

点击事件交互后(点击暂停按钮)

黄色区域组件上会显示一个图片遮挡,且有一个按钮(继续按钮)

需要图片在黄色组件居中显示,但同时只能点击button,其他区域不可点击

img

解决方式

黄色组件添加一个同样大小的子节点

同时根节点创建一个带有遮罩层的子节点

点击暂停时,获取黄色组件下图片节点的局部坐标,然后转为世界坐标

然后把根节点的图片节点按世界坐标调整对应的x和y轴,设置遮罩不可点击

这样,图片节点的展示层在最上层,同时整个页面因为遮罩阻断不可点击

局部坐标转为世界坐标

//将指定节点的局部坐标转成世界坐标
let worldPosData = this.node.parent.convertToWorldSpaceAR(new cc.Vec2(this.node.x, this.node.y));
console.log(worldPosData); 
//把世界坐标转为某个节点的局部坐标
let localPosData = this.node.parent.convertToNodeSpaceAR(new cc.Vec2(worldPosData.x, worldPosData.y));
console.log(localPosData);

tips

convertToNodeSpaceAR 将一个点转换到节点 (局部) 空间坐标系

convertToWorldSpaceAR 将节点坐标系下的一个点转换到世界空间坐标系

END