Поиск ближайшей линии к точке в 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) - линия.
Интерпретировано с Википедия
Что я уже пробовал:
------------------------------------------------------------------------