测试一个点是否大约在由另外两个点形成的线段上

Question

我想确定是否在点之间进行了点击,并且大致是在连接这两点的线段上进行了点击.

我的问题类似于如何确定线段上两个点之间的点？但它推迟了两点:

1. 我在javascript工作,坐标是整数(像素)
2. 该点不必完全在线段上.需要宽容.

以下代码改编自这个答案,但我不知道如何在线段周围插入公差

a并且b是线段的终点,c是点击的点.我想检查是否c在连接和之间的段之间a和之间bab

PencilTool.prototype._isBetween = function(a,b,c){
    //test if a, b and c are aligned
    var crossproduct = (c.y - a.y) * (b.x - a.x) - (c.x - a.x) * (b.y - a.y);
    if(Math.abs(crossproduct) !== 0){ return false; }

    var dotproduct = (c.x - a.x) * (b.x - a.x) + (c.y - a.y)*(b.y - a.y)
    if(dotproduct < 0){ return false }

    var squaredlengthba = (b.x - a.x)*(b.x - a.x) + (b.y - a.y)*(b.y - a.y);
    if(dotproduct > squaredlengthba){ return false; }

    return true;
}

Answer 1

可能是你想要的公式.

这是该公式的维基百科页面的链接.

这个来源非常彻底,但可能不是最容易阅读的.您可以阅读维基上的解释,但我将在这里以另一种方式解释它,希望我可以帮助您和其他读者想象它.

x0和y0是点击点的坐标.x1和y1是第一个线端点的坐标.x2和y2是同一行上第二个端点的坐标.

该公式采用三组坐标作为参数.
前两组坐标构成线.
第三个参数是您的点击点.它返回一个距离.

好的,现在让我们试着想象一下这个公式在做什么.所以你取点击点和线的两个端点,你想象一个三角形.我们有三点,这就是制作三角形所需的全部内容.

所以,为了找到三角形的高度,你有一个公式,这是熟悉的A =(1/2)bh的重新排列

因此,当您找到三角形的高度时,您将找到点击点和线之间的距离.(这是点击点和线之间最短的距离)

上面更大的距离公式基本上就是这样做的.这里的差异,以及它看起来更复杂的原因是,计算A的部分是明确显示的.

关于你提到的公差,只需设置公差变量,并将距离与公差进行比较.如果你想要对线附近的点击容差更加"模糊",你需要做更多的数学运算,但我假设你只想知道点击是否距离线一定距离.

当你写这个函数时,请确保你做好记账并在正确的位置设置正确的坐标,否则你会得到一个距离但不是你想要的距离.既然你提到你使用的是整数,你可能无法从距离公式得到一个完美的int,我的意思是,看看那个平方根,所以如果你没有得到一个完美的int回来,不用担心,只是向上或向下,