Точку в полигоне проверять с помощью SVG и JavaScript?

Question

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

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

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

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

РЕДАКТИРОВАТЬ: усложнение вопроса aнемного, я должен отметить, что svg:path элементы, кажется, основаны на кривых, а не на линиях, поэтому просто парсинг атрибута d для создания массива ребер не представляется возможным.

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

Answer 1

Ответы на Ударное тестирование фигур SVG? может помочь вам в этом квесте. Есть проблемы с отсутствующей поддержкой браузера, но вы, возможно, могли бы использовать svgroot.checkIntersection для проверки маленького (возможно, даже 0 ширина / высота будет работать?) Прямоугольника внутри вашей формы многоугольника.

Answer 2

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

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

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

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

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