两点之间的直线

use*_*437 2 javascript algorithm geometry

在 HTML 画布上,我有多个点,从 1 到 N,这基本上是一个连接点的应用程序,并在 touchstart 上激活。

有验证,以便他们只能连接从 1 到 2 (.. n) 的点。问题是现在没有验证这条线是直线,我正在寻找一种算法来做到这一点,这是我到目前为止的想法

  1. 对于 2 个点 (x1,y1) 到 (x2,y2),通过找到斜率并使用公式 y = mx + b 获得所有坐标
  2. 在 touchmove 上获取 x,y 坐标并确保它是前面步骤中的点之一,然后画一条线,否则不画线。

有没有更好的方法来做到这一点,或者我可以采取什么不同的方法?

Tik*_*vis 7

编辑:似乎我最初误解了这个问题。

至于验证路径:我认为拥有一个确定一个点是否有效的函数比事先计算所有值更容易。就像是:

function getValidatorForPoints(x1, y1, x2, y2) {
    var slope = (y2 - y1) / (x2 - x1);
    return function (x, y) {
        return (y - y1) == slope * (x - x1);
    }
}
Run Code Online (Sandbox Code Playgroud)

然后,给出两点,你可以这样做:

var isValid = getValidatorForPoints(x1, y1, x2, y2);
var x = getX(), y = getY();// getX and getY get the user's new point.
if (isValid(x, y)) {
    // Draw
}
Run Code Online (Sandbox Code Playgroud)

这种方法还为您提供了一些灵活性——您可以随时将函数修改为不那么精确,以适应那些不能完全绘制直线但可以容忍地接近的人。

精度:正如我在评论中提到的,您可以更改函数的行为方式以使其不那么严格。我认为这样做的一个好方法如下:

现在,我们正在使用公式(y - y1) == slope * (x - x1)。这与(slope * (x - x1)) - (y - y1) == 0. 我们可以将零更改为某个正数,以使其接受“靠近”有效线的点,如下所示:

Math.abs((slope * (x - x1)) - (y - y1)) <= n
Run Code Online (Sandbox Code Playgroud)

这里n改变了点与线的接近程度才能计数。

我很确定这和宣传的一样有效,并且有助于解释人们画线有点歪,但有人应该仔细检查我的数学。

  • 如果 x1 == x2,您在计算斜率时不会得到除以零吗? (2认同)