哪些HTML5 Canvas Pixel Detection和图像处理库都在那里？

Question

我正在尝试开发一个“Web App”（缺少更好的术语），它使用HTML5 Canvas元素为移动设备显示一种交互式地图。该地图有大约30个不同形状和大小的建筑物（由半透明的PNG图像制成）。我希望用户能够点击任何建筑物以获取有关它们的信息。建筑物通常位于与其他建筑物相同的理论边界框内，因此它不像检测用户何时敲入边界框那样简单（想象U形建筑物与U内的另一个建筑物）。因此，它应该使用某种光栅像素检测。为了使问题更复杂，我需要允许用户放大/缩小并在地图上平移（因为30个建筑物和地图太多而无法在微小的手机屏幕上显示用户）。因此，缩放和平稳移动是必要的。

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

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

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

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

感谢您的帮助！

Answer 1

KineticJS相当不错（迄今为止我发现的最好的lib）

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

也许您可以尝试覆盖标准多边形（一个建筑物的几个）并附加到相同的点击/点击事件。

此外，您无需在画布上移动对象，只需将较大的画布放在较小的div中（使用overflow：hidden）并拖动整个画布元素。