javascript - 两点之间的直线

Question

在 HTML Canvas 上，我有多个点，从 1 到 N，这基本上是一个连接点应用程序，并在触摸启动时激活。

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

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

有没有更好的方法来做到这一点，或者我可以采用任何不同的方法？

Answer 1

编辑:看来我最初误解了这个问题。

就验证路径而言:我认为只使用一个函数来确定一个点是否有效比预先计算所有值要容易得多。像这样的东西:

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

然后，给定两点，你可以这样做:

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
}

这种方法还为您提供了一定的灵 active ——您可以随时修改函数以降低精确度，以适应不太画直线但可以容忍接近的人。

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

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

Math.abs((slope * (x - x1)) - (y - y1)) <= n

此处 n 更改点与线的距离以便计数。

我很确定这会像宣传的那样有效，并有助于解决人们画线时有点歪曲的问题，但有人应该仔细检查我的数学。