Javascript / html5 2d畫布上下文-相對於畫布獲取X，Y（與轉換后的對象相對）

Question

我有一個場景，其中上下文堆棧上有多個項目，我需要獲得相對於畫布本身的x，y坐標。

情況是我正在用HTML5編寫2D游戲，我希望由用戶控制的“角色”能夠對准鼠標。 角色嵌套在轉換中。 有一個攝影機對象可以轉換畫布以跟隨角色並執行縮放/旋轉，當然，角色本身是向下變換的，有時會遠離其中心旋轉。

如果我可以得到角色相對於畫布的位置，則可以執行atan2來對准鼠標。 或者，如果我可以獲得相對於角色中心的鼠標坐標，則可以執行相同操作。

除了反轉我所有的變換計算之外，還有其他方法嗎？

Answer 1

不幸的是，我最終手動撤消了轉換。 以下代碼是我放入camera對象的內容：

/**
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

我不確定這是否是最好的方法，但是當我處於您的位置時，我執行了以下操作： 我從有關對象獲取了轉換矩陣，遍歷了對象的場景圖及其所有父級，並應用了所有父級轉換矩陣的逆矩陣。 現在，您終於有了對象世界矩陣。

可選步驟是緩存所有節點的世界矩陣，直到它們再次更改為止，以避免不必要的計算。 如果場景圖未深度嵌套，這可能並不總是一個好主意。