Как соединить два пересекающихся полигона в svg? Проблема следующего вида.
- Пользователь имеет возможность выделить полигон вручную точка за точкой.
- Он также имеет возможность выделить сколько угодно полигонов.
- Полигоны могут перекрывать друг друга.
- У полигона полупрозрачный фон, что при перекрытии затемняется прямопропорционально кол-ву наложений.
- Полигон сам себя не перекрывает, с этим проблем нет, это берёт на себя svg.
- один путь (path) может содержать в себе множество полигонов. При этом действуют правила перекрытия описанные в w3 ( www.w3.org/TR/SVG/painting.html#FillRuleProperty ) - может кто сможет объяснить как использовать это на практике. Вкратце, если указать evenodd - мы гарантированно получим "бублик", т.е. все перекрытия будут инвертировать, грубо говоря, наличие цвета в получающихся новых полигонах. Если не указывать - работает правило по умолчанию nonzero, поведение которого зависит от направления линий, которые пересекает некий луч, пущенный из некой точки в бесконечность. Грубо говоря, если взять два выпуклых полигона, оба нарисовать в одном направлении (по/против часовой стрелки), то они сольются нормально. Если в разных направлениях, то с "вырезанием дырок". Казалось бы, достаточно определить направление пересекаемых сегментов, и, в случае разницы направлений просто инвертировать оное, но что-то не так это просто (сложные полигоны, сложные пересечения).
- Для отрисовки я использую Raphaeljs. Он умеет определять, пересекаются ли полигоны и возвращает при этом точки пересечения, номера сегментов (порядковый номер по порядку отрисовки фигуры), где происходит пересечение, координаты начала и конца этих сегментов.
- на фоне картинка, если что.
Любые мысли приветствуются.
Даже нестандартные ;) Например, может самое просто решение, это склеить два непрозрачных полигона, перевести в растр и обратно в вектор как единый полигон.
UPD: похоже, что полигон таки может сам себя перекрывать с вырезанием дырок, при достаточно сложных путях. В таком случае нужен выпуклый многоугольник (с использованием всех точек, которые "касаются" внешнего пространства) без дырок
Попробовать можно тут: jsfiddle.net/extempl/wkyyhkht
Как соединить два пересекающихся полигона в svg? Проблема следующего вида.
- Пользователь имеет возможность выделить полигон вручную точка за точкой.
- Он также имеет возможность выделить сколько угодно полигонов.
- Полигоны могут перекрывать друг друга.
- У полигона полупрозрачный фон, что при перекрытии затемняется прямопропорционально кол-ву наложений.
- Полигон сам себя не перекрывает, с этим проблем нет, это берёт на себя svg.
- один путь (path) может содержать в себе множество полигонов. При этом действуют правила перекрытия описанные в w3 ( www.w3.org/TR/SVG/painting.html#FillRuleProperty ) - может кто сможет объяснить как использовать это на практике. Вкратце, если указать evenodd - мы гарантированно получим "бублик", т.е. все перекрытия будут инвертировать, грубо говоря, наличие цвета в получающихся новых полигонах. Если не указывать - работает правило по умолчанию nonzero, поведение которого зависит от направления линий, которые пересекает некий луч, пущенный из некой точки в бесконечность. Грубо говоря, если взять два выпуклых полигона, оба нарисовать в одном направлении (по/против часовой стрелки), то они сольются нормально. Если в разных направлениях, то с "вырезанием дырок". Казалось бы, достаточно определить направление пересекаемых сегментов, и, в случае разницы направлений просто инвертировать оное, но что-то не так это просто (сложные полигоны, сложные пересечения).
- Для отрисовки я использую Raphaeljs. Он умеет определять, пересекаются ли полигоны и возвращает при этом точки пересечения, номера сегментов (порядковый номер по порядку отрисовки фигуры), где происходит пересечение, координаты начала и конца этих сегментов.
- на фоне картинка, если что.
Любые мысли приветствуются.
Даже нестандартные ;) Например, может самое просто решение, это склеить два непрозрачных полигона, перевести в растр и обратно в вектор как единый полигон.
UPD: похоже, что полигон таки может сам себя перекрывать с вырезанием дырок, при достаточно сложных путях. В таком случае нужен выпуклый многоугольник (с использованием всех точек, которые "касаются" внешнего пространства) без дырок
Попробовать можно тут: jsfiddle.net/extempl/wkyyhkht
- Пользователь имеет возможность выделить полигон вручную точка за точкой.
- Он также имеет возможность выделить сколько угодно полигонов.
- Полигоны могут перекрывать друг друга.
- У полигона полупрозрачный фон, что при перекрытии затемняется прямопропорционально кол-ву наложений.
- Полигон сам себя не перекрывает, с этим проблем нет, это берёт на себя svg.
- один путь (path) может содержать в себе множество полигонов. При этом действуют правила перекрытия описанные в w3 ( www.w3.org/TR/SVG/painting.html#FillRuleProperty ) - может кто сможет объяснить как использовать это на практике. Вкратце, если указать evenodd - мы гарантированно получим "бублик", т.е. все перекрытия будут инвертировать, грубо говоря, наличие цвета в получающихся новых полигонах. Если не указывать - работает правило по умолчанию nonzero, поведение которого зависит от направления линий, которые пересекает некий луч, пущенный из некой точки в бесконечность. Грубо говоря, если взять два выпуклых полигона, оба нарисовать в одном направлении (по/против часовой стрелки), то они сольются нормально. Если в разных направлениях, то с "вырезанием дырок". Казалось бы, достаточно определить направление пересекаемых сегментов, и, в случае разницы направлений просто инвертировать оное, но что-то не так это просто (сложные полигоны, сложные пересечения).
- Для отрисовки я использую Raphaeljs. Он умеет определять, пересекаются ли полигоны и возвращает при этом точки пересечения, номера сегментов (порядковый номер по порядку отрисовки фигуры), где происходит пересечение, координаты начала и конца этих сегментов.
- на фоне картинка, если что.
Любые мысли приветствуются.
Даже нестандартные ;) Например, может самое просто решение, это склеить два непрозрачных полигона, перевести в растр и обратно в вектор как единый полигон.
UPD: похоже, что полигон таки может сам себя перекрывать с вырезанием дырок, при достаточно сложных путях. В таком случае нужен выпуклый многоугольник (с использованием всех точек, которые "касаются" внешнего пространства) без дырок
Попробовать можно тут: jsfiddle.net/extempl/wkyyhkht
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Интересные статьи из справочника
Поможем написать учебную работу
Отвечай на вопросы, зарабатывай баллы и трать их на призы.
Подробнее
Подробнее
Для соединения двух пересекающихся полигонов в SVG с полупрозрачным фоном можно использовать следующий подход:
Создайте два полигона с заданными точками для каждого из них.Объедините точки каждого полигона в один общий массив точек.Используйте алгоритм построения выпуклой оболочки (convex hull) для получения выпуклого многоугольника, описывающего все точки.Создайте новый полигон с точками выпуклой оболочки и установите ему необходимые стили (полупрозрачный фон).Добавьте новый полигон на SVG холст, оставив только один полигон, который представляет собой объединение двух начальных полигонов.Этот подход позволит вам объединить два пересекающихся полигона в единый многоугольник с учетом полупрозрачного фона. Вы можете использовать библиотеку Raphaeljs для реализации данного подхода.
Если это не подходит, то можно рассмотреть и другие алгоритмы обработки пересекающихся полигонов, например, алгоритм объединения (union) или вычитания (subtraction) полигонов.
Надеюсь, эти рекомендации помогут вам найти решение для данной проблемы. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.