html - HTML5 画布 isPointInPath() 方法

Question

作为漏斗图的一部分，我在画布上绘制平行四边形。为了方便单击平行四边形（即漏斗的段），我存储坐标并检查鼠标坐标以查看鼠标是否在正确的区域。这工作得很好，花花公子。

但是现在我遇到了 .isPointInPath() 方法（只花了四年时间）。所以我想知道使用这些坐标是否会更快（肯定会更容易）：

1) 重放路径，无需抚摸或填充它，因此它不可见 2) 使用此 .isPointInPath() 方法检查鼠标坐标

当点击发生并开始检查时，可能有多个段要检查 - 例如 5。

Answer 1

通常取决于笔画或图形的填充，鼠标检测坐标应该改变（从像素完美检测的角度来看），因此在重绘平行四边形时，您应该尽可能准确。

话虽如此，通常最好的方法是在屏幕外的画布中执行此操作。您可以使用辅助画布一一重绘平行四边形，并使用isPointInPath()检查您的状况。不过，您必须非常小心使用此方法，因为如果该点位于画布的当前默认路径中，它会返回 true，并且取决于您绘制图形的方式，它可能并不总是符合您的预期:)

另一种解决方案是逐个绘制图形，并使用getImageData()来检测鼠标坐标中是否有颜色，这意味着图形被击中。你可以在这里看到一个例子

希望这可以帮助