javascript - 使用 Canvas 进行像素完美的 2D 鼠标拾取

Question

我正在使用 Canvas 在 html5 中编写 2D 游戏，这需要检测鼠标单击和悬停事件。这有 3 个问题:检测必须是​​像素完美的，对象不是矩形的(房屋，形状怪异的 UI 按钮......)，并且需要快速和响应。 (显然蛮力不是一种选择)

所以我想问的是如何找出鼠标在哪个对象上，有哪些可能的优化。

P.S:我做了一些调查，发现了一个使用 QuadTree 的人 here .

Answer 1

我有一个(过时的)教程解释了幽灵 Canvas 的概念，它非常适合像素完美的命中检测。教程是here .忽略有关 newer 的警告教程，较新的没有使用幽灵 Canvas 概念。

想法是将有问题的图像绘制到内存中的 Canvas 上，然后使用 getImageData 获取鼠标单击的单个像素。然后您会看到该单个像素是否完全透明。

如果它不是完全透明的，那么，您已经找到了目标。

如果它是完全透明的，将下一个对象绘制到内存 Canvas 并重复。

你只需要在最后清除内存中的 Canvas 。

getImageData 很慢，但如果您想要像素完美的命中检测并且不预先计算任何东西，它是您唯一的选择。

或者，您可以预先计算路径或具有偏移量的像素数组。这将是很多工作，但可能会更快。例如，如果您有一个具有一定透明度的 40x20 图像，您将计算一个数组 [40][20]，该数组的 true 或 false 对应于透明与否。然后你会根据鼠标位置测试它，有一些偏移量，如果图像是在 (25, 55) 绘制的，你想从鼠标位置中减去它，然后在你查看时测试新位置是否为真数组[posx][posy].

这就是我对你问题的回答。 我的建议？如果这是游戏，请忘记像素完美检测。

说真的。

取而代之的是制作代表对象但不是像素完美的路径(不是在 Canvas 中，而是在纯 javascript 代码中)，例如，房子可能是一个正方形，顶部有一个三 Angular 形，非常接近图像但当涉及到 HitTest 时，它被用来代替。计算一个点是否在路径内比进行像素完美检测要非常快。多边形绕数规则检测中的查找点。老实说，这是您最好的选择。