Question

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

有验证，因此他们只能连接1中的点并转到2（.. n）。问题是，现在是没有验证该线是直线，我正在寻找一个算法来做到这一点，这是我到目前为止所想到的

对于2个点（x1，y1）到（x2，y2），通过找到斜率得到所有坐标并使用公式y = mx + b
在touchmove上获取x，y co-ornnates并确保它是前一步中的一个点并绘制一条线，否则不绘制该线。

有更好的方法可以做到这一点，还是我可以采取任何不同的方法？

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
}

这种方法也为您提供了一些灵活性 - 您可以随时修改功能，使其不太精确，以适应那些不完全画直线但又相当接近的人。

精密：正如我的评论中所提到的，您可以更改函数的行为方式，使其不那么严格。我认为这样做的好方法如下：

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

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

此处n会更改点与线的接近程度，以便计算。

我很确定这个广告有用，并且有助于说明人们画线有点弯曲，但有人应该仔细检查我的数学。

Answer 2

function drawGraphLine(x1, y1, x2, y2, color) {

    var dist = Math.ceil(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
    var angle = Math.atan2(y2-y1, x2-x1)*180/Math.PI;
    var xshift = dist - Math.abs(x2-x1);
    var yshift = Math.abs(y1-y2)/2;

    var div = document.createElement('div');
    div.style.backgroundColor = color;
    div.style.position = 'absolute';
    div.style.left = (x1 - xshift/2) + 'px';
    div.style.top = (Math.min(y1,y2) + yshift) + 'px';
    div.style.width = dist+'px';
    div.style.height = '3px';
    div.style.WebkitTransform = 'rotate('+angle+'deg)';
    div.style.MozTransform = 'rotate('+angle+'deg)';

}

// Tomer Almog

两点之间的直线

2 个答案: