прямая линия между двумя точками

Question

На холсте HTML у меня есть несколько точек, начиная с 1 до N, это в основном приложение для подключения точек и активируется при сенсорном запуске.

Существует проверка, чтобы они могли соединить точки только от 1 и перейти к 2 (.. n).Проблема в том, что сейчас нет подтверждения того, что линия является прямой линией, и я ищу алгоритм для этого, вот что я думал до сих пор

1. Для 2 баллов (x1, y1) - (x2, y2) получить все координаты, найдя наклон и используя формулу y = mx + b
2. при касании, получить координаты 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
}

Этот подход также дает вам некоторую гибкость - вы всегда можете изменить функцию, чтобы она была менее точной, чтобы приспособиться к людям, которые не совсем рисуют прямую линию, но сносно близки.

Точность: Как упоминалось в моем комментарии, вы можете изменить поведение функции, чтобы сделать ее менее требовательной. Я думаю, что хороший способ сделать это заключается в следующем:

Прямо сейчас мы используем формулу (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)';

}

// Томер Альмог