MoveTo 태그로 시작하는 두 개의 평행 한 2 차 베 지어 곡선 경로를 닫는 방법

debugcn 에 게시 Dev

아마 크리 타무 노에미

저는 VueJS와 SVG를 사용하여 Sankey Diagram을 처음부터 구현하고 있습니다. 이제 노드에서 노드까지 두 개의 병렬 2 차 베 지어 곡선 경로의 경로를 닫는 데 어려움이 있습니다.

예를 들어 추가 계산을 통해 다음 경로를 얻었습니다.

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>

이 두 경로는 서로 평행하지만 결합 된 경로를 채울 수 있고 아래 이미지와 같이 보이도록 가까운 경로로 만들고 싶습니다.

현재 경로가 결합되면 다음과 같이 보입니다.

그림을 위해 아래 이미지를 사용하여 다음을 시도했습니다.

이제 Path2의 끝인 "Point A"에 도달하면 "Point B"에 수직선을 추가하여 "Point B"에서 "Point E"에 대한 2 차 베 지어 곡선을 형성하고 경로를 닫으려고했습니다. "Point C에서 E"까지 수직선을 추가하여 Path1에 대해 동일한 작업을 수행 한 다음 점 E에서 점 F로 2 차 베 지어 곡선을 형성하고 GCEF의 경로를 닫습니다.

내 시도가 작동하지 않았고이 문제를 해결하는 방법에 대한 단서를 찾기 위해 SVG 문서를 다시 읽고 있습니다.

이 문제를 해결하는 방법에 대한 단서를 줄 사람이 필요합니다. 감사

Enxaneta

두 경로가 왼쪽에서 시작하기 때문에 두 번째 경로를 반대로해야 오른쪽에서 시작됩니다. 다음으로 경로의 2d 속성을 결합하고 두 번째 경로의 M 명령을 L (줄)로 대체했습니다. 또한 끝에 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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

MoveTo 태그로 시작하는 두 개의 평행 한 2 차 베 지어 곡선 경로를 닫는 방법

MoveTo 태그로 시작하는 두 개의 평행 한 2 차 베 지어 곡선 경로를 닫는 방법

2 차 베 지어 곡선 코드를 3 차 베 지어 곡선으로 변환하는 방법은 무엇입니까?

2 차 베 지어 곡선으로 임의 경로 그리기

뷰 / 레이어의 이동 경로를 베 지어 곡선 경로로 제한하는 방법은 무엇입니까?

2 차 베 지어 곡선의 세 번째 제어점을 계산하는 방법은 무엇입니까?

십진수 값의 좌표로 베 지어 곡선의 경로를 얻는 방법

3 차 베 지어 곡선에서 루프를 방지하는 방법

트루 타입 글꼴의 글리프는 2 차 베지 어로 만들어집니다. 두 개 이상의 연속 된 비 곡선 점이 글리프 윤곽선에 나타나는 이유는 무엇입니까?

두 개의 선으로 곡선을 맞추기위한 하위 2 차 알고리즘

시작 및 끝 접선 경사가 다른 호에 대한 베 지어 곡선을 만드는 방법

베 지어 곡선을 사용하는 사인 곡선에 대한 WPF 경로 설명

베 지어 곡선을 사용하는 사인 곡선에 대한 WPF 경로 설명

paper.js에서 베 지어 곡선 경로를 따라 개체를 애니메이션하는 방법은 무엇입니까?

두 개의 div 태그를 한 줄에 세로로 유지하는 방법은 무엇입니까?

UIView에서 베 지어 곡선을 그리는 방법

매초마다 베 지어 곡선을 무작위로 그리는 방법은 무엇입니까? 또한 transition.dart 사용

Pandas : 비슷한 ID를 가진 두 개의 열로 행을 평균화하는 방법은 무엇입니까?

선택한 열의 값을 행별로 평균하는 방법

li의 두 요소로 ul 태그의 2 열을 수행하는 방법

두 개의 다른 헤더 (h2) 태그를 한 줄에 유지하는 방법은 무엇입니까?

MatLab에서 두 개의 곡선을 그래픽으로 추가하는 방법이 있습니까?

Kineticjs에서 곡선 경로의 개체를 애니메이션하는 방법

닫힌 큐빅 베 지어 곡선 경로가 타원 내부에 있는지 확인

각 선과 평행 벡터의 점이 주어진 두 선의 교차점을 찾는 방법

두 개의 비동기 함수를 순차적으로 실행하는 방법

곡선 아래 영역의 95 %를 차지하는 두 개의 숫자를 찾기 위해 검색

MATLAB에서 두 개의 변수로 곡선을 그리는 방법은 무엇입니까?

시간과 정렬되지 않은 두 개의 곡선이있는 Google 차트

두 이미지의 차이를 얻어 이미지로 저장하는 방법

베 지어 곡선에 그라디언트를 추가하는 방법은 무엇입니까?