HTML5 canvas hittesting

我在HTML5 Canvas上繪製了一些圖像，我想檢查它們是否點擊鼠標。看起來很簡單，我有圖像的邊界，但是圖像被轉換（翻譯和縮放）。不幸的是，上下文沒有獲得當前變換矩陣的方法，並且也沒有用於矩陣乘法的API。似乎唯一的解決辦法是跟蹤自己的轉換和實現矩陣乘法。歡迎提出建議。HTML5 canvas hittesting

來源

2010-06-30 Valentin Iliescu

經過了更多的思考，我意識到即使上下文有一個獲取當前變換矩陣的方法，它也不會有用，因爲我需要鼠標點擊時的圖像變換矩陣，並且那個時候上下文有不同的轉變。我可能需要的是一個場景圖，可以實現一個簡單的場景或者使用像Cake JS這樣的庫。 – 2010-07-01 22:40:23

你不需要矩陣來翻譯和縮放。例如，要翻譯和縮放鼠標的X座標，請使用newPointX = event.x * scaleX + translateX – 2010-07-02 21:07:24

謝謝，您是對的，在這種情況下，我不必實現矩陣乘法。 – 2010-07-04 00:22:16

這是3D（OpenGL）圖形世界中的常見問題。

解決的辦法是創建一個輔助畫布對象（不顯示），並重新繪製圖像。該繪製與您的主要畫布繪製完全相同，只是每個元素都以獨特的顏色繪製。然後，查找與您的鼠標拾取對應的像素，並讀取其顏色，這會給您相應的元素（如果有）。

這是OpenGL世界中常用的方法。你可以通過谷歌搜索條款找到它的描述，如"opengl object picking"。這裏是one of the many search results。

更新： HTML5 canvas規範現在包含hit regions。我不確定這些瀏覽器支持的程度如何。

來源

2010-06-30 17:43:38 brainjam

很酷的主意！陳述得很好 – 2010-07-03 07:53:59

天才。如果可以的話，我會贊成10倍！ – 2011-10-16 03:50:28

這裏的問題是，畫布都做非可選的顏色混合和抗鋸齒。當物體彼此鄰接時產生顏色。這些顏色之間的距離可能會接近您存儲的其他顏色ID，因此可能會將邊框區域誤判爲不同對象的命中。我不確定解決此問題的最佳方法。對每個可檢測對象使用單獨的畫布會浪費太多內存，並且在鼠標移動時單獨呈現每個對象，檢查似乎會浪費太多性能。 – 2013-03-15 20:48:40

HTML5 canvas hittesting

回答

相關問題