Как закрыть путь двух параллельных квадратичных кривых Безье, где каждая начинается с тега MoveTo

Как закрыть путь двух параллельных квадратичных кривых Безье, где каждая начинается с тега MoveTo

06.01.2020 12:21:23 Просмотров 45 Источник

Я реализую диаграмму Sankey с нуля с использованием VueJS и SVG, теперь я столкнулся с трудностями закрытия путей двух параллельных квадратичных кривых Безье от узлов к узлам.

Где например путем дополнительных вычислений я получил следующие пути

path_1 = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

path_2 = "M 35 107.65044814340591 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

Пути объединяются таким образом, думая, что это будет работать, но это не удается

<g>
 <template v-for="(point,index) in sankeyNode">
  <template v-for="(pnode, idex) in Object.entries(point)">
   <template v-for="(paths,idx) in pnode[1].paths" v-if="pnode[1].hasOwnProperty('paths')">
    <g style="stroke-width:1;"  stroke="black" fill="pink" :stroke-opacity="0.3">
     <path :d="paths[0]+' '+paths[1]+' Z'" />
    </g>
   </template>
  </template>
 </template>
</g>

Эти два пути параллельны друг другу, но я хотел бы сделать их близкими, чтобы я мог заполнить объединенные пути и выглядел бы так, как показано на рисунке ниже

enter image description here

В настоящее время при объединении путей это выглядит следующим образом

enter image description here

Я попробовал следующее с использованием изображения ниже для иллюстрации

enter image description here

Теперь, когда я добрался до" точки А", которая является концом пути 2, я попытался добавить вертикальную линию в" точку В", чтобы из" точки в "я мог сформировать квадратичную кривую Безье в" точку Е "и закрыть путь Кейба, а также сделать то же самое для Пути 1, добавив вертикальную линию из" точки С В Е", а затем из точки Е сформировал квадратичную кривую Безье в точку F и закрыть путь GCEF.

Моя попытка не сработала, и я перечитываю документы SVG, чтобы найти ключ к тому, как решить эту проблему..

Пожалуйста, мне нужно, чтобы кто-то дал мне подсказку о том, как решить эту проблему. Спасибо

У вопроса есть решение - Посмотреть?

Ответы - Как закрыть путь двух параллельных квадратичных кривых Безье, где каждая начинается с тега MoveTo / How to close path of two parallel quadratic Bezier curves where each starts with a MoveTo tag

Является ответом!
enxaneta

06.01.2020 01:02:35

Поскольку оба пути начинаются слева, мне пришлось повернуть второй путь так, чтобы он начинался справа. Затем я присоединил атрибуты 2 d для путей и заменил команду M второго пути командой L (line). Кроме того, я закрыл путь, добавив команду z в конце. Я надеюсь, что это то, что вам нужно.

<svg viewBox="0 0 400 200">

<path d = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994
           L360.07142857142856,171.66646326824585Q197.53571428571428,107.65044814340591 35,107.65044814340591
           z"/>

</svg>

https://stackoverflow.com/questions/59609470/how-to-close-path-of-two-parallel-quadratic-bezier-curves-where-each-starts-with/59610052#comment105385342_59610052
Огромное спасибо.
Закрыть X