在Javascript中获取直线坐标

Get Line co-ordinates in Javascript

本文关键字：坐标 获取 Javascript      更新时间：2023-09-26

我正在使用画布(HTML 5)绘制线条，因为线条/形状不是作为对象存储在画布中，我不能将唯一的事件附加到它(例如onmouseclick)

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

希望避免使用SVG，因为整个项目是建立在画布上的

请建议。

你需要用数学公式来计算这条线的面积以及某一点是否与它相交。

下面是一个基本的例子:

  • 查找相对于画布位置的鼠标坐标(如何查找元素上的鼠标位置)
  • 计算鼠标x/y是否在某个矩形内(矩形公式中的点)
  • 。

存在函数isPointInPath(x,y)。如果一个点在当前路径上，它将返回true。你需要对每条想要检查的线调用这个函数，最好的方法是在你画的同时调用它。

最好的方法是使用一些画布框架。看看"LibCanvas:: Creating Lines"(别忘了在canvas上点击dblClick)

相关文章：