javascript - 判断一个点是否在一条线上

假设我在 HTML5 Canvas 中绘制了一条线:

...
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.closePath();
...

我想知道鼠标按下事件是否发生在这一行，我有这样的代码:

var handleMouseDown = function(e) {
  var coords = translateCoords(e.x,e.y);
  ...
  if (ctx.isPointInPath(coords.x, coords.y) {
    ...

现在，此代码适用于圆形和矩形，但不适用于线条。我有两个问题:

我的想法是，在一行上调用 closePath() 可能是不正确的。问题 - 如何检查鼠标按下事件是否发生在这条线上？

如何扩展它以查找鼠标按下事件是否在线附近发生？

最佳答案

第一步是找到点在直线上的法线投影。这其实很简单:取点1到目标的距离，点2到目标的距离，分别称为D1和D2。然后计算 D1+(D2-D1)/2 。这是从点 1 到线上投影点的距离。
您现在可以找到该点，并获得从该点到目标的距离。如果距离为零，则目标正好在这条线上。如果距离小于 5，则目标距离小于 5px，依此类推。
编辑:一张图片值一千字。这是一个图表:

(来源: adamhaskell.net )
(事后看来，可能应该让这些圆圈变成不同的颜色……另外，紫色线应该与线 AB 垂直。蓝线怪我糟糕的目标!)

关于javascript - 判断一个点是否在一条线上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14371841/