有哪些 HTML5 Canvas 像素检测和图像处理库？

Question

我正在尝试开发一个“Web 应用程序”（由于缺乏更好的术语），它使用用于移动设备的 HTML5 Canvas 元素显示一种交互式地图。该地图有大约 30 座不同形状和大小的建筑物（由其上的半透明 PNG 图像制成）。我希望用户能够点击任何建筑物以获取有关它们的信息。这些建筑物通常位于与其他建筑物相同的理论边界框内，因此它并不像仅检测用户何时点击边界框那么简单（想象一个 U 形建筑物和 U 内的另一建筑物）。因此，它应该使用某种光栅像素检测。为了让事情变得更复杂，我需要允许用户在地图上放大/缩小和平移（因为 30 座建筑物和一张地图对于在一个小手机屏幕上显示用户来说太过分了）。所以缩放和平滑移动是必要的。

我正在寻找可以支持这些功能的 JavaScript 库：

1. 图像像素检测
2. 移动触摸事件
3. 画布（或舞台？）缩放
4. 可在移动设备上使用

到目前为止，我发现 KineticJS 支持所有这些功能。但是当我尝试在舞台上移动超过 4 个建筑物的地图时，它太跳动了。我尝试检查 Fabric.js，但它似乎没有像素检测（因为当您在边界框内单击时它会选择图像，而不是实际图像本身）。

还有其他 JavaScript 库可以做这些事情吗？

感谢您的帮助！

Answer 1

KineticJS 非常好（目前我发现的最好的库）

我从来没有尝试过使用 png 图像，但是使用数百个原始对象进行缩放和平移非常流畅（没有像素检测 - 我想像素检测是相当昂贵的 cpu 操作）。

也许您可以尝试叠加标准多边形（一栋建筑有几个）并附加到同一个点击/点击事件。

此外，您无需在画布上移动对象，只需将较大的画布放在较小的 div 中（带有溢出：隐藏）并拖动整个画布元素。