Html5 Canvas Hit Testing

標籤：style   c   blog   tar   http   ext   

名詞解釋：

     Shape : 向量圖形，點線面之類的；

     Hit Testing : 點擊測試； 

參考內容：

     A Gentle Introduction to Making HTML5 Canvas Interactive

     

小記：

     在Html5中使用Canvas對象來繪製向量圖形Shape，我們希望對這些Shape對象做更進一步的操作，如選中、拖拽等，那麼必然我們需要在Canvas上有一個Hit Testing ，遺憾的是Canvas並沒有提供對內建對象Hit Testing的方法。(W3C.Org正在標準裡面增加Hit Testing的方法!)

     這裡我想到的方法是，在UICanvas背後產生一個HittestCanvas對象，兩個Canvas對象同時繪製Shape對象，在HittestCanvas中我們為每個Shape對象製作一個顏色編號，當滑鼠移入UICanvas中時，我們擷取UICanvas中的滑鼠位置，然後在HittestCanvas中使用getImageData來擷取滑鼠位置的顏色，通過顏色編號擷取得到的Shape對象，然後在UICanvas中為這個Shape對象加上邊框或者全色填充，這樣，就完成了Hit Testing的工作。

     註：現在我面臨一個問題，當我在一個Canvas中有500+複雜麵對象（盆地）時，如果兩個Shape對象相切或者相交時，當我從一個Shape對象移入到另一個Shape對象過程中發現顏色編號的變換出現了問題：當滑鼠在兩個很近的Shape對象的間隙中時，觸發了遠在他方的第三個Shape對象的高亮事件。寫這篇部落格的目的就是希望能夠記錄解決這個問題的點點滴滴，供參考。