vector - BezierCurve を B-Spline に変換するにはどうすればよいですか?

Question

HTML5 キャンバスを使用して複雑なパスのアニメーションを作成しようとしています。パスをいくつかのベジェ曲線に分割し、3 次ベジェ曲線の式と JavaScript 関数 lineTo() を使用してそれぞれを描画しました。問題は、曲線が互いに接続されているポイントです。それらはスムーズに接続されていません。ベジェ曲線の代わりに B-Spline 曲線を使用すると、この問題が解決されることに気付きました。それで、ベジエ曲線を b-spline に変換する方法があるかどうか疑問に思っていますか?

Answer 1

理論的には、ベジエ曲線は単一セグメントの B-スプライン曲線と見なすことができます。したがって、「ベジエ曲線を B スプライン曲線に変換する」というようなことは実際にはありません。Wikipedia ページの情報に従って 3 次ベジエ曲線評価関数を実装できれば、De Boor アルゴリズムに従って B スプライン曲線を実装することは難しくありません。

B スプライン カーブの実装に余分な長さを使用したくない場合は、ベジエ カーブのコントロール ポイントをローカルで変更して、それらをスムーズに結合することができます。P0、P1、P2 および P3 によって定義される 2 つの 3 次ベジエ曲線 C1(t) と、P3=Q0 の Q0、Q1、Q2 および Q3 によって定義される C2(t) があると仮定します。P2 と Q1 を共通点 P3 を通る直線上に射影すると、C1(t) と C2(t) を滑らかに結合できます。ラインの方向をどのように選択するかは、あなた次第です。