javascript - 绘制到透明 Canvas 并检查点是否透明比检查点是否在复杂多边形中慢多少？

Question

老实说，这更像是一个通用问题，只是想知道是否有人对这个主题进行过任何类型的研究。

基本上，我正在为我为自己个人使用而创建的小型游戏引擎添加事件支持。我希望像素完美的悬停在 2d 对象事件支持上，并且我只是在考虑最好的方法。实际上，对我个人而言，只需在透明 Canvas 上调用对象的绘制并检查鼠标 x y 是否位于透明像素上方会更快，因为我不必创建一组定义对象外部的点。这也允许我在我的对象上有洞，并且它仍然可以正确地知道我是否将鼠标悬停在上面。

我想知道的是使用此处显示的方法:How can I determine whether a 2D Point is within a Polygon?

我的方法比那里显示的方法慢多少？

我目前仍在学习，因此对我来说实现所有这些并自己测试并不容易，因为我可能需要很长时间才能正确工作并测试速度。

旁注:我仍然会有一个基本的边界框，以防止每次重新绘制和测试。

Answer 1

检查一个点是否在多边形中 99.999999% 的时间都会快得多。

要慢一些，多边形需要非常复杂。

要执行另一种方法，您需要使用getImageData，并且在 Canvas 上获取图像数据非常慢。

多边形算法中的点确实正确地考虑了孔。确保您拥有遵守 non-zero winding number rule 的产品，因为这就是 Canvas 所使用的(而不是奇偶规则)，并且您可能希望与 Canvas 中构造的路径兼容(现在或以后)。