@extempl

Как соединить два пересекающихся полигона в svg?

Проблема следующего вида.
- Пользователь имеет возможность выделить полигон вручную точка за точкой.
- Он также имеет возможность выделить сколько угодно полигонов.
- Полигоны могут перекрывать друг друга.
- У полигона полупрозрачный фон, что при перекрытии затемняется прямопропорционально кол-ву наложений.
- Полигон сам себя не перекрывает, с этим проблем нет, это берёт на себя svg.
- один путь (path) может содержать в себе множество полигонов. При этом действуют правила перекрытия описанные в w3 ( www.w3.org/TR/SVG/painting.html#FillRuleProperty ) - может кто сможет объяснить как использовать это на практике. Вкратце, если указать evenodd - мы гарантированно получим "бублик", т.е. все перекрытия будут инвертировать, грубо говоря, наличие цвета в получающихся новых полигонах. Если не указывать - работает правило по умолчанию nonzero, поведение которого зависит от направления линий, которые пересекает некий луч, пущенный из некой точки в бесконечность. Грубо говоря, если взять два выпуклых полигона, оба нарисовать в одном направлении (по/против часовой стрелки), то они сольются нормально. Если в разных направлениях, то с "вырезанием дырок". Казалось бы, достаточно определить направление пересекаемых сегментов, и, в случае разницы направлений просто инвертировать оное, но что-то не так это просто (сложные полигоны, сложные пересечения).
- Для отрисовки я использую Raphaeljs. Он умеет определять, пересекаются ли полигоны и возвращает при этом точки пересечения, номера сегментов (порядковый номер по порядку отрисовки фигуры), где происходит пересечение, координаты начала и конца этих сегментов.
- на фоне картинка, если что.

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

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

Попробовать можно тут: jsfiddle.net/extempl/wkyyhkht
  • Вопрос задан
  • 3407 просмотров
Решения вопроса 1
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Делаете полупрозрачную подложку одного цвета, а рисуемые полигоны применяете к ней как маску.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы