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

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

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

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

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

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

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

2 ответов


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


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

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

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

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

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