Нахождение координат многоугольника на холсте

Question

Я нарисовал несколько полигонов на холсте. Теперь меня интересует, как найти координаты (вершины) выбранного многоугольника. Я могу найти выбранный полигон (регион), используя координаты мыши, но мне нужно перерисовать его, если он выбран, поэтому для этого мне нужны его координаты.

Аналогичный ответ, который я нашел до сих пор, это https://help.geogebra.org/topic/-solved-how-do-i-get-a-list-of-coordinates-from-a-polygon- с использованием GeoGebra, но я использую HTML5 и JavaScript!

Answer 1

Похоже, вы пытаетесь решить пару разных проблем:

1) Определите, на какой полигон нажал пользователь. Как уже упоминалось, если вы храните массив ваших полигонов в памяти и можете реализовать метод isPointInPath, то вы можете перебрать свои полигоны в памяти и проверить, щелкнул ли какой-нибудь из них. Не забывайте, что для получения точной проверки вам, возможно, потребуется взять заданные координаты «мыши x» и «мыши y» (например, из события щелчка) и вычесть страницы холста X и Координата Y.

(см. Ответ SO Как получить координаты щелчка мышью на элементе canvas? для получения более подробной информации.)

2) Как только вы определили, что пользователь нажал на многоугольник P, вы хотите перерисовать его. Вы сможете перерисовать его без проблем, просто перерисовав тот же многоугольник, используя те же координаты, что и раньше (например, вы можете изменить strokeStyle или fillStyle на другой цвет для представления выделения).

Если вы хотите сделать многоугольник больше и в той же позиции, это другой вопрос - в основном вам нужно перевести холст в центр многоугольника, тогда масштаб холст, затем нарисуйте свой многоугольник. Если это плохо для вас, есть учебник, доступный по http://codetheory.in/canvas-rotating-and-scaling-images-around-a-particular-point/ (использует изображения вместо полигонов, но с той же концепцией).

Обратите внимание, что если ваш многоугольник сложный, даже определение правильной точки для масштабирования вокруг может быть затруднено. На вопрос «что такое центр сложного многоугольника» есть несколько разных ответов; простой ответ - усреднить все значения X и Y точки многоугольника (Центр X = avg (X), Центр Y = avg (Y)). Если это не выглядит правильным, есть другие более сложные подходы, доступные в другом вопросе SO, Какой самый быстрый способ найти «визуальный» центр многоугольника неправильной формы? .

Надеюсь, это направит вас в правильном направлении!

Answer 2

Когда вы рисуете что-то на холсте, вы не можете получить координаты нарисованного вами объекта, если у вас нет какого-либо алгоритма обработки изображений.

Вместо этого вам нужно сохранить в памяти объект многоугольника, который вы нарисовали на холсте, и определить его границы на холсте.

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