javascript - HTML Canvas 跟踪

Question

我正在尝试在 HTML5/Canvas 中构建一些东西，以允许跟踪图像并在偏离预定义路径时发出警报。

我已经想出了如何将外部图像加载到 Canvas 中，并允许其上的 mousedown/mousemovement 事件在图像上绘制，但我难以理解的是比较两者。

图像都是白色轮廓上的简单黑色，因此据我所知，getPixel 样式事件可以判断在绘制的下方或鼠标所在的下方是否有黑色。

我可以只用鼠标位置来完成，但这需要定义每个图像轮廓的路径(并且有很多，因此理想情况下希望通过分析底层图像来完成)。

有人告诉我可以使用 Flash，但我想尽可能避免这种情况，以便可以保持与非 Flash 平台(即 ipad)的兼容性，因为它们是页面运行的主要目标。

如有任何见解或帮助，我们将不胜感激!

Answer 1

我认为您已经谈到了解决此问题的最直接方法。

给定 Canvas 上的黑白图像，您可以将 mousemove 事件处理程序附加到该元素以跟踪光标的位置。如果用户按住 left-mouse，您想要确定他们当前是否正在追踪预定义的路径。为了让用户不那么烦恼，我会通过对一个小像素窗口进行采样来解决这部分问题。 9x9 像素 左右的尺寸可能比较合适。请注意，您希望窗口大小在两个维度上都是奇数，以便在两个方向上进行对称采样。

使用光标的位置，在 Canvas 上调用 getImageData()。你的函数调用看起来像这样:getImageData(center_x - Math.floor(window_size/2), center_y - Math.floor(window_size/2), window_size, window_size) 这样你就可以得到一个样本中心位于光标上方的像素窗口。从那里，您可以做一个简单的检查，看看窗口内是否有任何非白色像素，或者您可以更严格，要求一定数量的非白色像素来声明路径上的用户。

我认为，使这项工作顺利进行的关键是确保用户在偏离路径最微小的一点时不会收到负面反馈(除非这是您想要的)。在这一点上，你冒着让用户恼火和沮丧的风险。

最终归结为两种方法之一。要么加载应用程序的实际矢量路径以与用户的光标进行比较(即执行 point-in-path 检查)，要么从图像中采样像素数据。如果您不需要完美的 point-in-path 检查精度，我认为像素采样应该可以正常工作。

---

编辑:我刚刚重新阅读了您的问题，并意识到，根据您对 getPixel() 的引用，您可能正在为此使用 WebGL。 WebGL 的方法是相同的，除了您当然会使用不同的函数。但是，我认为您不需要 WebGL，因为 2D 上下文应该给您足够的灵 active (除非应用程序比看起来更复杂)。