Получить координаты линии в Javascript

Question

Я рисую линии, используя Canvas (HTML 5), поскольку линии / фигуры не сохраняются как объекты в Canvas, я не могу прикрепить к нему уникальные события (например, onmouseclick)

Я хочу прикрепить событие onmouseoverк линии, это возможно, узнав, находится ли мышь над определенной линией (используя ее координаты 2 X и 2 Y) в Canvas, используя Javascript.Будет ли это работать для разной ширины линии (например, 2,5 пикселя)

Хотите избежать использования SVG, поскольку весь проект построен на Canvas

Пожалуйста, совет

Answer 1

Есть функция isPointInPath (x, y) . Он вернет истину, если точка находится на текущем пути. Вам нужно будет вызывать это для каждой линии, которую вы хотите проверить, и лучший способ сделать это в то же время, когда вы рисуете.

Answer 2

Лучший способ - это использовать некоторые фреймворки Canvas.Посмотрите на " LibCanvas :: Создание линий " (не забудьте dblClick на canvas)

Answer 3

Вам потребуется использовать математические формулы для вычисления площади линии и того, пересекает ли ее определенная точка.

Вот базовый пример:

• Найти координаты мыши относительно положения холста ( Как найти позицию мыши на элементе )
• Вычислить, находится ли мышь x / y внутри какого-либо прямоугольника ( Точка в формуле прямоугольника )
• Готово.