什麼HTML5畫布像素檢測和圖像處理庫在那裏？

Question

我正在嘗試開發一個「Web應用程序」（缺乏更好的術語），該應用程序使用HTML5 Canvas元素爲移動設備顯示一種交互式地圖。該地圖有大約30個不同形狀和大小的建築物（由其上的半透明PNG圖像製成）。我希望用戶能夠利用任何建築物來獲取關於它們的信息。這些建築物通常與其他建築物的理論邊界框相同，因此它不像檢測用戶在邊界框中敲擊時那樣簡單（想象一下U形建築物內有另一棟建築物）。因此，它應該使用某種光柵像素檢測。爲了使事情更加複雜，我需要允許用戶放大/縮小並在地圖上平移（因爲30個建築物和地圖太多以致無法在小手機屏幕上顯示用戶）。因此平穩和平穩移動是必要的。

我要尋找一個JavaScript庫，可以支持這些功能：

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

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

有沒有其他的JavaScript庫可以做這些事情嗎？

感謝您的幫助！

Answer 1

的KineticJS是相當不錯的（最好的lib中，我發現迄今）

我從來沒有嘗試過使用PNG圖像與它，但變焦並用幾百元對象平移是相當平滑的（不含像素檢測 - 我想像素檢測是相當cpu昂貴的操作）。

也許你可以嘗試覆蓋標準多邊形（一個建築物的幾個）並附加到相同的點擊/點擊事件。

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