Пункт на многоугольниках с SVG и JavaScript?

Question

У меня есть карта, которую я преобразовал из растровой графики в файл SVG, преобразовав разные цветные области на пути.

Я знаю, как сделать базовый промежуток точечного полигона, учитывая массив краев, но svg:path Элементы представляют несколько многоугольников, а также маски (для учета морей и т. Д.) и извлекать эту информацию, расставая d атрибут кажется довольно тяжелым.

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

Как кажется, элементы SVG, кажется, позволяют обработку событий мыши, я думаю, что это не должно быть большим из проблем (т. Е. Если вы можете сказать, является ли указатель мыши на вершине элемента, вы уже решаете точку Проблема полигона).

Редактировать: немного усложняет дело, я должен упомянуть, что svg:path элементы, кажется, основаны на кривых, а не линиях, так что просто разбирается d Атрибут для создания массива ребер, кажется, не является опцией.

Как элементы могут взять fill Атрибут, подход к получению гетто для рендеринга SVG на холсте, а затем нахождение цветового значения пикселя в данной точке может работать, но это кажется действительно очень ужасным способом сделать это.

Answer 1

Ответы на Хит-тестирование SVG Формы? Может помочь вам в этом квесте. Существуют проблемы с отсутствующим поддержкой браузера, но вы, возможно, можете использовать Svgroot.Checkinsection, чтобы ударить тестировать небольшой (возможно, даже 0 ширина / высота будет работать?) Прямоугольник в форме полигона.

Answer 2

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

я нашел хорошая библиотека JS Это облегчает визуализацию SVG на холсте. С визуализированным SVG, все, что требуется, это вызов 2D-контексте getImageData Метод для области 1x1 в точке, которую вы хотите проверить. Я думаю, что это помогает создать копию SVG с цветовой кодировкой, чтобы облегчить проверку, если ваш SVG более сложный, чем тот, который я использую (вам придется проверить байт RGBA Value-byte).

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

Думаю, если вы хотите относительные координаты, вы могли бы попробовать создать холст размером с 1 до 1, а затем разделите координаты пикселей по размерам Canvas.

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