在Laya中将屏幕中的局部坐标转为世界坐标再将世界坐标转化为屏幕坐标;局部坐标的上层中使用了缩放
和旋转,需要使用Laya的矩阵变换来实现。
首先,将局部坐标转为世界坐标,需要使用节点的矩阵变换,代码如下:
// 获取节点的世界矩阵
var worldMatrix = node.getMatrix();
// 将局部坐标转为世界坐标
var worldPos = new Laya.Vector3(localPosX, localPosY, 0);
Laya.Matrix.transformCoord(worldMatrix, worldPos);
其中,node 为需要转换的节点,localPosX 和 localPosY 为局部坐标的 x 和 y 值。
接下来,将世界坐标转为屏幕坐标,需要使用摄像机的视图矩阵和投影矩阵,代码如下:
// 获取摄像机的视图矩阵和投影矩阵
var viewMatrix = camera.viewMatrix;
var projectionMatrix = camera.projectionMatrix;
// 将世界坐标转为屏幕坐标
var screenPos = new Laya.Vector3();
Laya.Vector3.transformV3ToV4(worldPos, viewMatrix, screenPos);
Laya.Vector3.transformV4(screenPos, projectionMatrix, screenPos);
// 归一化
screenPos.x = screenPos.x / screenPos.w;
screenPos.y = screenPos.y / screenPos.w;
// 计算屏幕坐标
var screenWidth = Laya.stage.width;
var screenHeight = Laya.stage.height;
var screenX = (screenPos.x + 1) * 0.5 * screenWidth;
var screenY = (1 - screenPos.y) * 0.5 * screenHeight;
其中,camera 为摄像机节点,screenWidth 和 screenHeight 为屏幕的宽度和高度。
最终得到的 screenX 和 screenY 就是局部坐标在屏幕中的坐标
原文地址: https://www.cveoy.top/t/topic/eElg 著作权归作者所有。请勿转载和采集!