Javascript檢查畫布上的透明圖像是否已被點擊

Question

我有一個畫布，我畫了一個透明的圖像，並且有一個像形狀的多邊形。現在我需要檢查該圖像是否已被點擊。

我有電線 { X：30， Y：20， 寬：100， H：100 }

我可以檢查一個框或圓圈點擊，但如果它是剛性的像一個多邊形是否有像素點擊測試或凸算法（但我不想指定邊緣）？

謝謝。

Answer 1

一種解決方案是使用輔助畫布實現像素檢測，以用作地圖。

1. 將您的形狀繪製到您的場景畫布上。
2. 在第二個畫布上繪製確切的形狀，但將顏色設置爲rgb（0,0,0）。
3. 存儲該顏色爲某種映射的參考來引用第一「形狀」

例如

var pixelMap = { 
    '000' : 'rectangle 1', 
    '001' : 'rectangle 2' 
}; 

每次繪製新形狀到畫布上，增加1對RGB除非你有超過1670萬的形狀（256^3），這種方法應該足夠了。

這裏有一個示例實現：https://jsfiddle.net/mikeschultz/nbtnxpf2/