HTML5 캔버스를 사용하여 복잡한 경로의 애니메이션을 만들려고합니다. 내 경로를 베 지어 곡선으로 나눠서 cubic bezier curves formula 및 javascript 함수 lineTo()를 사용하여 각 경로를 그립니다. 문제는 커브가 서로 연결된 점입니다. 그들은 원활하게 연결되지 않습니다. 베 지어 커브 대신 B- 스플라인 커브를 사용하면이 문제가 해결된다는 것을 깨달았습니다. 그래서, 베 지어 곡선을 b- 스플라인으로 변환하는 방법이 있는지 궁금합니다.BezierCurve를 B-Spline으로 변환하려면 어떻게해야합니까?
이론적으로 베 지어 곡선은 단일 세그먼트 B- 스플라인 곡선으로 간주 할 수 있습니다. 따라서 "베 지어 곡선을 B- 스플라인 곡선으로 변환"하는 것과 같은 것은 없습니다. Wikipedia 페이지의 정보에 따라 3 차 베 지어 곡선 평가 기능을 구현할 수 있다면 De Boor algorithm에 따라 B- 스플라인 곡선을 구현하는 것이 어렵지 않습니다.
여분의 길이의 B- 스플라인 커브를 사용하지 않으려는 경우 베 지어 곡선의 제어점을 로컬로 수정하여 원활하게 결합 할 수 있습니다. Q0, Q1, Q2 및 Q3에 의해 정의 된 P0, P1, P2 및 P3 및 C2 (t)로 정의되는 두 개의 3 차 베 지어 곡선 C1 (t)가 P3 = Q0 인 것으로 가정합니다. 공통점 P3을 지나는 선에 P2와 Q1을 투영하여 C1 (t)와 C2 (t)를 부드럽게 결합 할 수 있습니다. 라인의 방향은 당신에게 달려 있습니다.
새 b- 스플라인이 b- 곡선 세트와 비슷할 것이라고 가정하겠습니다. 그러나 b- 스플라인의 경로가 현재의 b- 곡선과 정확히 일치하지 않을 수 있습니다. 그렇습니까? – markE
Yead, 괜찮습니다. 그러나 미니 커브가 서로 연결되어 더 큰 모양을 만들면 변환 후 각 미니 커브의 시작/끝 점이 동일해야합니다. – Saeed