找出一个点是否在一条线上

Question

假设我在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) {
    ...

现在,这个代码在圆形和矩形的情况下工作正常,但不适用于行.我有两个问题:

1. 我的想法是,或许在一行上调用closePath()是不正确的.问题 - 如何检查此行上是否发生了鼠标按下事件？

2. 如何扩展它以查找鼠标停止事件是否发生在线附近？

Answer 1

第一步是找到点到线上的正常投影.这实际上非常简单:从第1点到目标的距离,从第2点到目标,分别称它们为D1和D2.然后计算D1+(D2-D1)/2.这是从点1到线上投影点的距离.

您现在可以找到该点,并获得从该点到目标的距离.如果距离为零,则目标正好在线上.如果距离小于5,则目标距离小于5px,依此类推.

编辑:一张图片胜过千言万语.这是一个图表:

图http://adamhaskell.net/img/schematic.png

(事后看来,可能应该让那些圆圈变成不同的颜色......而且,紫色线应该垂直于AB线.用蓝线怪我可怕的目标!)

Answer 2

这是从维基百科文章距离从点到线（由两点定义的线）的方法

        var Dx = x2 - x1;
        var Dy = y2 - y1;
        var d = Math.abs(Dy*x0 - Dx*y0 - x1*y2+x2*y1)/Math.sqrt(Math.pow(Dx, 2) + Math.pow(Dy, 2));

其中 (x0,y0) 是您的 Point 坐标，您的 Line 是 ((x1,y1),(x2,y2)) 但是，这不会检查线的边界，因此我不得不为它添加另一个检查。

    function inBox(x0, y0, rect) {
        var x1 = Math.min(rect.startX, rect.startX + rect.w);
        var x2 = Math.max(rect.startX, rect.startX + rect.w);
        var y1 = Math.min(rect.startY, rect.startY + rect.h);
        var y2 = Math.max(rect.startY, rect.startY + rect.h);
        return (x1 <= x0 && x0 <= x2 && y1 <= y0 && y0 <= y2);
    }

您的 Line 定义为矩形。希望这可以帮助。