HTML5 canvas isPointInPath()方法

时间:2012-08-27 07:12:34

标签: html5 canvas

作为漏斗图表的一部分,我在画布上绘制平行四边形。为了便于点击平行四边形(即漏斗的片段),我将存储坐标并对鼠标坐标进行检查以查看鼠标是否在正确的区域。这很好用,花花公子。

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

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

当发生点击并开始检查时,可能会有多个要检查的部分 - 例如5。

1 个答案:

答案 0 :(得分:0)

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

有了这个说法,通常最好的方法是在离屏画布上执行此操作。您可以使用辅助画布逐个重绘平行四边形,并使用isPointInPath()检查您的状况。你必须非常小心这个方法,因为如果点位于画布的当前默认路径中,它返回true,并且取决于你如何绘制你的数字,它可能并不总是按照你的预期行事:)

另一个解决方案是逐个绘制图形,并使用getImageData()检测鼠标坐标中是否有颜色,这意味着图形上有撞击。您可以看到示例here

希望这有帮助