在Javascript中获取线坐标

时间:2011-07-13 08:09:35

标签: javascript html5 javascript-events canvas

我使用Canvas(HTML 5)绘制线条,因为线条/形状没有作为对象存储在Canvas中,我无法将独特的事件附加到它(例如onmouseclick)

我希望将onmouseover事件附加到一行,是否可以通过使用Javascript在Canvas中了解鼠标是否超过特定行(使用其2 X和2 Y坐标)。这适用于不同的线宽(例如:2.5像素)

希望避免使用SVG,因为整个项目都是基于Canvas构建的

请咨询

3 个答案:

答案 0 :(得分:0)

您需要使用数学公式来计算线的面积以及某个点是否与其相交。

这是一个基本的例子:

答案 1 :(得分:0)

有一个函数isPointInPath(x,y)。如果某个点位于当前路径上,它将返回true。 您必须为要检查的每一行调用它,并且最好的方法是在绘制的同时进行。

答案 2 :(得分:0)

最好的方法是使用一些画布框架。看看“LibCanvas :: Creating Lines”(不要忘记画布上的dblClick)