6

JavascriptでN>2のN点をスムーズに曲線を描く必要があります。現在、html5キャンバスオブジェクト内でbezierCurveTo（）を使用しています。私はこれを達成するための最良の方法を見つけるためにかなりの時間を費やしました。Catmull-RomSplinesは有望に聞こえますが、線として描く方法を知りません。したがって、ポリラインベジェ曲線が残り、すべての中間制御点を見つける必要があります。

かなりの数学を再学習するのに時間がかかりましたが、ここに部分的に機能する例があります。線が特に滑らかでない場合があり、特定のベクトルに対してコントロールポイントがオフになっているという問題があります。これが私の最初のmath.stackexchangeの質問で、コントロールポイントの計算の大部分を取得するように依頼しました。

Catmull-Romスプラインにもオープンですが、キャンバス上のラインに変換する方法については、いくつかの助けが必要です。私はこのリソースを見つけましたが、それを自分のニーズに適用することに再び迷いました。

上記のリンク例から作成された画像は、不良コントロールポイントを複製する方法を示しています。

ここに画像の説明を入力してください

よろしくお願いします！

4

1 に答える 1

4

元のコード:

var a = new Array(points[p-1].x,points[p-1].y);
var b = new Array(points[p].x,points[p].y);
var c = new Array(points[p+1].x,points[p+1].y);

var delta_a = subtract_v(a, b);
var delta_c = subtract_v(c, b);

// Get vector (m) perpendicular bisector
var m = normalize_v( add_v( normalize_v(delta_a),normalize_v(delta_c) ) );

// Get ma and mc
var ma = normalize_v( subtract_v(delta_a,multiply_v(multiply_v(delta_a,m),m) ) );
var mc = normalize_v( subtract_v(delta_c,multiply_v(multiply_v(delta_c,m),m) ) );

// Get the coordinates
points[p].c2x = resolution( b[0] + ( (Math.sqrt( sqr(delta_a[0]) + sqr(delta_a[1]) ) / tightness) * ma[0] ) );
points[p].c2y = resolution( b[1] + ( (Math.sqrt( sqr(delta_a[0]) + sqr(delta_a[1]) ) / tightness) * ma[1] ) );
points[p+1].c1x = resolution( b[0] + ( (Math.sqrt( sqr(delta_c[0]) + sqr(delta_c[1]) ) / tightness) * mc[0] ) );
points[p+1].c1y = resolution( b[1] + ( (Math.sqrt( sqr(delta_c[0]) + sqr(delta_c[1]) ) / tightness) * mc[1] ) );

ここで「Get ma and mc」が何をするのかわかりません。必要なのは、角度の二等分線 ( m) に直交するベクトルとその負のベクトルです。

ひどい絵でごめんなさい

したがって、これで問題ありません。

var delta_a = subtract_v(b, a); // note that we're calculating AB instead of BA
var delta_c = subtract_v(c, b);

// Get an orthogonal to the angle bisector
var m = normalize_v( add_v( normalize_v(delta_a),normalize_v(delta_c) ) );

var ma = [-m[0],-m[1]];
var mc = m;

resolution()また、コントロール ポイントの も必ず削除してください。

編集：
エッジケースのフォールバックも追加する必要があります（たとえば、A==BまたはA==C、スクリプトが例外をスローし、0ベクトルを正規化しようとします）

于 2011-07-23T03:58:50.510 に答える