那里有什么HTML5 Canvas像素檢測和圖像處理庫？

Question

我正在嘗試開發一個“ Web App”（由於缺乏更好的術語），使用針對移動設備的HTML5 Canvas元素來顯示一種交互式地圖。 地圖上有大約30座形狀和大小各異的建築物（由半透明的PNG圖像制成）。 我希望用戶能夠點擊任何建築物以獲得有關它們的信息。 這些建築物通常位於其他建築物的同一理論邊界框內，因此，它不只是檢測用戶何時敲擊邊界框（想象一個U形建築物以及U內的另一座建築物）那樣簡單。 因此，它應該使用某種柵格像素檢測。 為了使事情變得更復雜，我需要允許用戶放大/縮小並在地圖上平移（因為30座建築物和地圖太多，無法在很小的手機屏幕上顯示用戶）。 因此，縮放和平滑移動是必要的。

我正在尋找一個可以支持以下功能的JavaScript庫：

1. 圖像像素檢測
2. 移動觸摸事件
3. 畫布（或舞台？）縮放
4. 在移動設備上可用

到目前為止，我已經找到了支持所有這些功能的KineticJS。 但是，當我嘗試移動舞台上有4座以上建築物的地圖時，實在太跳了。 我嘗試檢查Fabric.js，但似乎沒有像素檢測（因為當您在邊界框內單擊時它選擇圖像，而不是實際圖像本身）。

那里還有其他JavaScript庫可以執行這些操作嗎？

謝謝你的幫助！

Answer 1

KineticJS非常好（到目前為止，我發現的最好的庫）

我從沒有嘗試過使用png圖像，但是使用數百個原始對象進行縮放和平移是相當平滑的（沒有像素檢測-我想像素檢測是相當昂貴的CPU操作）。

也許您可以嘗試疊加標准多邊形（一棟建築物幾個），並附加到同一click / tap事件。

同樣，您也不需要移動畫布上的對象，您只需將較大的畫布放在較小的div中（使用overflow：hidden）並拖動整個畫布元素即可。