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

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

我不確定這是否是最好的方式，但是當我處於您的位置時，我做了以下操作;我從所討論的對象中取出變換矩陣，從對象中遍歷場景圖並遍歷所有父元素，應用所有父變換矩陣的逆。現在你已經結束了對象世界矩陣。

可選步驟是緩存所有節點的世界矩陣，直到它們再次發生變化，以避免不必要的計算。這可能並不總是一個好主意，因爲你的場景圖沒有深度嵌套。