問題タブ [catmull-rom-curve]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
c# - ベジエ曲線の制御点を見つけるにはどうすればよいですか?
C# (Unity) で曲線の形で接続を実装する必要があります。Miro.com での実装とできるだけ同じ結果を得たいと考えています (スクリーンショットを参照)。
曲線を付けた後、3 次ベジエ曲線のパスを計算します。この最初のセグメントでは、接続するオブジェクトからのアンカー ポイントとオフセットが使用されます。この段階では問題はありません。
問題: セグメントの青い点の 1 つをクリックしてドラッグして曲線をセグメントに分割すると (スクリーンショットを参照)、途中で 2 つに分割されます。2 つの新しい曲線の接合点で、コントロール ポイントの接線と座標が不明な新しいインタラクティブな (移動可能な) ポイントが形成されます。インタラクティブなポイント (下の図の白い点) の位置が変わるたびに、これらのコントロール ポイントの位置を見つける必要があります。さらに、曲線は、ループを形成するのではなく、分割するときにその位置を大幅に変更してはならず、異なる長さの制御点ベクトルを持ち (ここではわかりません)、可能な限り適切に動作する必要があります (Miro のボードのように)。
コントロール ポイントとは、ベジエ セグメントの 2 つの目に見えないガイド ポイントを意味します。
既知のコントロール ポイントを黒で、見つける必要があるコントロール ポイントを赤で塗りました。(Pn - インタラクティブ ポイント、Cn - コントロール ポイント)
それらを見つけようとしたアルゴリズムでは、コントロール ポイントの距離と方向が正しくありません。
次のアルゴリズムがテストされました。
- Tacentからの補間- 分離時の曲線のジャンプ、不適切な方向とコントロール ポイントのインデント量。
- Chaikin のアルゴリズム - 分離中に曲線がジャンプし、ループが作成されます。
- 推測に基づく「カスタム」補間(セグメントの開始点と終了点の間のセグメントの中心までの距離、および開始点と終了点の間の方向を考慮に入れる)-すべて同じ問題がありますが、見た目は同じです上記よりもわずかに優れています。
解決策は、Catmull-Rom スプラインを使用してポイントを弦補間し、結果をベジエ曲線のポイントに変換することだと思います。ただし、実装にはまだ問題があります。
3DMax の曲線も非常によく似ています。彼らのドキュメントでは、パラメトリック曲線についての言及しか見つかりませんでした。
私が使用しなかった(または機能しなかった)方法:
- Catmull-Rom 補間;
- B-スプライン補間;
- エルミート補間;
- De Casteljau のアルゴリズム (これには当てはまらないようですが)
大変お手数をおかけいたしますが、可能な限り詳細をお願いいたします。