Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Анализ SVG изображения (https://javascript.ru/forum/dom-window/68223-analiz-svg-izobrazheniya.html)

Bu3r 03.04.2017 13:13

Анализ SVG изображения
 
Добрый день.
Такой вопрос у меня: Имеется некая SVG картинка на фоне. Необходимо вставлять круги поверх изображения, но при условии, что если круг пересекается с некоторым объектом SVG, он обрезается по этот объект.
Центр круга не может располагаться на объекте.
Пример:

Круги размещает пользователь
Update: По сути, мне нужен способ нахождения пересечения линий (лучи из центра круга), с объектами. Дальше уже разобраться легко.

SV0L0CH 04.04.2017 06:47

Надо разделить объекты изображения на фоновые и передний план.
Сначала идет фон, потом передний план, а между ними <svg:g/> в который и вставляются твои круги.
И не надо никакой геометрии.

Bu3r 04.04.2017 12:02

В таком случае круги не будут обрезаться под "угол обзора", а просто ложиться слоем ниже.

Грубо говоря: у меня есть схема/карта местности. и точка это человек, так вот - кругами нужно показать обзорную видимость из точки. Все объекты - это стены.

Мне не нужен полный код, мне нужен способ определения точек, возможно и через канву (я не силен вообще в js)

SV0L0CH 04.04.2017 14:25

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

Bu3r 06.04.2017 09:04

Сделал методом перегона svg на канву и определение цвета. Да, действительно - ресурсоемкая задача. Если в хроме все впорядке, то у ФФ возникают проблемы и подвисание на 5-20 сек при обсчете области (вернее анализе каждого пиксела).

Не совсем понимаю смысл по распределению по квадратам.
Стены - это объекты "path" их как то можно перевести в сплайны? Или лучше изначально все нарисовать полигонами?

SV0L0CH 06.04.2017 14:05

Полигоны - набор отрезков, следовательно к ним применим описанный мной алгоритм. Ну а куда их пихать в <path/> или <polygon/> или <line/> - не суесвенно.
Кроме того я не знаю хранятся данные у тебя уже в виде SVG и их надо доставать или SVG только взиализирует их. Из всех вариантов <path/> самый неудобный для парсинга.
Так как всё сводится к проверке пересекается ли отрезок от точки до центра с хотя бы одной из стен, то стены в виде набора отрезков предпочтительней в плане реализации этой самой проверки.
Ну а оптимизации по скорости стоит отложить на потом, они актуальны только когда карта значительно превышает область видимости.


Часовой пояс GMT +3, время: 17:03.