HTML Canvas Tracing

Question

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

我已经想出了如何将外部图像加载到画布中,并允许在其上绘制mousedown/mousemovement事件来绘制图像,但是我无法解决这个问题是比较两者.

图像在白色轮廓上都是简单的黑色,所以从我可以看出,getPixel样式事件可以判断在鼠标所在的下方或下方是否有黑色.

我只能用鼠标位置做到这一点,但这需要定义每个图像轮廓的路径(并且有一个公平的数字,因此理想情况下希望通过分析底层图像来实现).

我被告知可以使用Flash,但是如果可能的话,我希望避免这种情况,这样可以保持与非Flash平台(即ipad)的兼容性,因为它们是页面运行的主要目标.

任何见解或帮助将不胜感激!

Answer 1

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

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

使用光标的位置，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 上下文应该为您提供足够的灵活性（除非应用程序比看起来更复杂）。