1

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

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

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

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

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

谢谢你的帮助！

4

1 回答 1

0

KineticJS 非常好（迄今为止我发现的最好的库）

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

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

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

于 2012-07-18T16:07:28.010 回答