Question

我有一个场景，在上下文堆栈中有几个项目，我需要获得相对于画布本身的x，y坐标。

情况是我正在用HTML5编写2D游戏，我希望用户控制的“角色”能够瞄准鼠标。该字符嵌套在转换中。有一个相机对象可以转换画布以跟随角色并执行缩放/旋转，当然角色本身也会向下转换，有时会旋转远离它的中心。

如果我能够获得我的角色相对于画布的位置，我可以做一个atan2来瞄准鼠标。或者，如果我可以获得相对于角色中心的鼠标坐标，那么我也可以这样做。

除了反转我的所有变换计算之外，还有什么方法可以做到这一点吗？

Answer 1

不幸的是我最终手动逆转了转换。以下代码是我放入相机对象的代码：

/**
Transforms mousex and mousey to the positions within the game.
*/
this.transformMouse = function(mousex, mousey){
    var xScale = screenWidth / (currentMaxX - currentMinX);
    var yScale = screenHeight / (currentMaxY - currentMinY);

    this.tmousex = (mousex - screenWidth / 2) / xScale + (currentMaxX + currentMinX) / 2; 
    this.tmousey = (mousey - screenHeight / 2) / yScale + (currentMaxY + currentMinY) / 2;
}

tmousex和tmousey是鼠标的变换x和y位置。这不考虑旋转 - 转换的反转必须进入字符代码（相机和字符的旋转将仅在atan2代码之后添加）。

希望这可以帮助任何有同样问题的人。

Answer 2

我不确定这是不是最好的方式，但当我在你的位置时，我做了以下事情;我从相关对象中获取了变换矩阵，遍历了对象及其所有父节点的场景图，应用了所有父变换矩阵的逆。现在你最终得到了对象世界矩阵。

可选步骤是缓存所有节点的世界矩阵，直到它们再次发生变化，以避免不必要的计算。如果你的场景图没有深度嵌套，这可能并不总是一个好主意。

Javascript / html5 2d画布上下文 - 相对于画布获取X，Y（与转换对象相对）

2 个答案: