Анализ SVG изображения
Добрый день.
Такой вопрос у меня: Имеется некая SVG картинка на фоне. Необходимо вставлять круги поверх изображения, но при условии, что если круг пересекается с некоторым объектом SVG, он обрезается по этот объект. Центр круга не может располагаться на объекте. Пример: ![]() Круги размещает пользователь Update: По сути, мне нужен способ нахождения пересечения линий (лучи из центра круга), с объектами. Дальше уже разобраться легко. |
Надо разделить объекты изображения на фоновые и передний план.
Сначала идет фон, потом передний план, а между ними <svg:g/> в который и вставляются твои круги. И не надо никакой геометрии. |
В таком случае круги не будут обрезаться под "угол обзора", а просто ложиться слоем ниже.
Грубо говоря: у меня есть схема/карта местности. и точка это человек, так вот - кругами нужно показать обзорную видимость из точки. Все объекты - это стены. Мне не нужен полный код, мне нужен способ определения точек, возможно и через канву (я не силен вообще в js) |
Конечно отрисовка в канве векторной графики с последующим извлечением цвета даст результат, однако для этой самой отрисовки понадобится сторонняя библиотека и использование растровой картинки весьма ресурсоёмко.
Если нужен алгоритм определения попадает ли объект в область видимости, то лучше распределить все объекты по квадратам размером радиуса видимости, потом фильтровать объекты для отрисовки и стены по попаданию в пределы окружности, потом отфильтровать их по непопаданию за стены методом полного перебора актуальных стен. Если стены состоят из отрезков, то написать такой алгоритм не составит проблем. Для всяких там сплайнов надо будет искать формулы. Хотя и сплайны можно заменить ломаными, если отклонения не критичны. |
Сделал методом перегона svg на канву и определение цвета. Да, действительно - ресурсоемкая задача. Если в хроме все впорядке, то у ФФ возникают проблемы и подвисание на 5-20 сек при обсчете области (вернее анализе каждого пиксела).
Не совсем понимаю смысл по распределению по квадратам. Стены - это объекты "path" их как то можно перевести в сплайны? Или лучше изначально все нарисовать полигонами? |
Полигоны - набор отрезков, следовательно к ним применим описанный мной алгоритм. Ну а куда их пихать в <path/> или <polygon/> или <line/> - не суесвенно.
Кроме того я не знаю хранятся данные у тебя уже в виде SVG и их надо доставать или SVG только взиализирует их. Из всех вариантов <path/> самый неудобный для парсинга. Так как всё сводится к проверке пересекается ли отрезок от точки до центра с хотя бы одной из стен, то стены в виде набора отрезков предпочтительней в плане реализации этой самой проверки. Ну а оптимизации по скорости стоит отложить на потом, они актуальны только когда карта значительно превышает область видимости. |
Часовой пояс GMT +3, время: 17:03. |