Блог

Главная - Вопросы по программированию - Как найти точки пересечения двух фигур SVG с помощью d3.js

Как найти точки пересечения двух фигур SVG с помощью d3.js

#javascript #angular #svg #d3.js

#javascript #угловой #svg #d3.js

Вопрос:

У меня есть две фигуры SVG (линия и спиральный путь), которые пересекаются друг с другом в нескольких точках. Я хочу найти все точки пересечения этих SVG-фигур, используя d3.js . Кроме того, мне нужно добиться этого без использования каких-либо сторонних пакетов, таких как kld-intersection и т.д.

Ниже приведен код для обеих фигур svg :

 .cls-3 {
                fill: none;
                stroke-width: 10px;
                stroke: #000;
        stroke-miterlimit: 10;
            } 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1031.1 1010.3" preserveAspectRatio="xMinYMin meet">
    <title>SVG Shapes</title>
            <g id="Spiral_Path">
                <path class="cls-3 svg-range-line"
                    d="M881.5,154.9C679.6-47,352.3-47,150.4,154.9c-195.9,195.9-195.9,513.4,0,709.3,189.7,190,497.5,190.1,687.5.4l.4-.4c184.3-184.3,184.3-483,0-667.3h0C659.6,18.1,369.8,18.1,191.1,196.8H191C17.6,370.3,17.6,651.4,191,824.8" />
<line stroke="red" x1="486.5027" y1="501.64715" x2="-220.59908118654766" y2="-205.45963118654743"></line>
</svg>

Комментарии:

1. Разбейте путь на отдельные многоточия, повторите их, проверяя пересечение линий многоточия. Хотя поиск пересечения линий с многоточием известен, перевод обозначения дуги в стиле SVG во что-то полезное для вычислений, вероятно, будет утомительным.

2. Вы видели этот пример ?