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

Question

[extempl]

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

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

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

Попробовать можно тут: jsfiddle.net/extempl/wkyyhkht

Answer 1

[Александр Таратин]

Делаете полупрозрачную подложку одного цвета, а рисуемые полигоны применяете к ней как маску.

Comments

[extempl]

Интересная мысль! Но будет ли это работать, если полигонов много и они могут быть разных цветов? То есть, соединяться должны только полигоны одного цвета, тогда нужно будет создавать по маске на каждый цвет и наслаивать их друг на друга, если я правильно себе это представляю

[Александр Таратин]

@extempl наверное должно работать, будет по подложке на каждый цвет.

[extempl]

Нашёл такое решение (stackoverflow.com/questions/14386642/if-two-partia...
По сути, оно мало чем отличается от Вашего, они оба работают с глобальной прозрачностью, в обоих случаях сложно работать, как с одним объектом, но, видимо, пока остановлюсь на этом.