User 13204940 Ответов: 1

Поиск ближайшей линии к точке в javascript


Привет,

У меня есть серия линий, нарисованных с помощью HTML Canvas, и я пытаюсь выяснить, какая из линий ближе всего к курсору, а затем выделить ее другим цветом.

Результаты не совсем верны, поскольку, похоже, формула, которую я использую, не учитывает тот факт, что эти линии не бесконечны. Вот это да скриншот.

Вы можете видеть зеленые линии примера, а красная видится как самая близкая, потому что если вы представите, что она бесконечно тянется вниз, она будет ближе всего к курсору. Однако ясно, что линия чуть выше курсора находится ближе всего. Как я могу это объяснить?

Для каждой из линий я выполняю следующие действия, чтобы найти расстояние, затем нахожу самое короткое из всех расстояний и выделяю линию красным цветом.

Формула:
var dist = Math.abs(((x * (y2 - y1)) - (y * (x2 - x1)) + (x2 * y1) - (y2 * x1))) / Math.sqrt(((y2 - y1) ^ 2) + ((x2 - x1) ^ 2));
Где (x, y) - положение курсора, а (x1, y1, x2, y2) - линия.

Интерпретировано с Википедия

Что я уже пробовал:

------------------------------------------------------------------------