Javascript/html5 2d Canvas Context -获取相对于Canvas的X, Y(相对于转换对象

Javascript/html5 2d Canvas Context - Getting X, Y relative to canvas (opposed to transformed object)

本文关键字：相对于 Canvas 对象 转换 获取 html5 2d Context Javascript      更新时间：2023-09-26

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

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

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

是否有任何方法可以做到这一点，而不是逆转我所有的变换计算?

我不确定这是否是最好的方法，但是当我在你的位置上时，我做了以下事情;我从问题对象中取变换矩阵，遍历场景图从对象到它的所有父元素，应用所有父元素变换矩阵的逆。现在你已经得到了对象世界矩阵。

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

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

/**
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代码之后添加)。

希望这对有同样问题的人有所帮助。

相关文章：