HTML5畫布：縮放和翻譯後計算鼠標位置

我嘗試開發矢量圖的交互式查看器，並希望具有縮放功能。縮放功能工作得很好，但現在我有問題來計算拾取對象的鼠標位置。該事件返回屏幕座標。畫布沒有反方式使用變換矩陣的方法。有沒有人有解決這個問題的辦法？HTML5畫布：縮放和翻譯後計算鼠標位置

來源

2011-12-11 strangeoptics

我做了一個非常小的簡單的類來跟蹤轉換矩陣。

我添加了一個invert（）函數的原因是這樣的。我也做了一個invertPoint（）函數，但沒有把它放在最終版本中。雖然不難推斷，但只需將點轉化並轉化到一起即可。

我經常只是用這個類來計算適宜的變換，然後根據應用使用setTransform。

我希望我可以給你一個更具體的解決方案，但沒有你想要的代碼示例很難做到。

Here's轉換類代碼。並here's一個博客文章，有點解釋。

來源

2011-12-11 22:07:58

嗨西蒙，感謝您的快速回復。解決方案是完美的。我會盡力將你的乾淨的課程整合到我的項目中。
畫布還沒有像這樣的要求得到適當的方法，這是一個恥辱。 Android和我知道的每個其他圖形平臺都有。 – strangeoptics

很好用。謝謝。 – strangeoptics

您應該添加一個反轉函數，以返回一個新的Transformobject/Matrix。否則，我必須在完成屏幕上的世界翻譯後再次調用翻轉。這可能會更高效。 – strangeoptics

-1

這裏有您圖書館一些有價值的功能，同時保留矩陣狀態，並建立一個場景圖需要：

Transform.prototype.reset = function() { 
    this.m = [1,0,0,1,0,0]; 
    this.stack = []; 
}; 

Transform.prototype.push = function() { 
    this.stack.push(this.m.slice()); 
}; 

Transform.prototype.pop = function() { 
    this.m = this.stack.pop(); 
};

來源

2011-12-15 21:49:55 strangeoptics

HTML5畫布：縮放和翻譯後計算鼠標位置

回答

相關問題