5

ランダムなポイントのセットがあり、raphaeljsを使用して滑らかなsvgシェイプを作成したいと思います。ポイントを接続するために、catmull-rom-splineを使用しています。問題は、パスが閉じているポイントがスムーズではないことです。

これは私のプロジェクトからのパスの例です：

M125,275R 125,325 175,325 225,325 275,325 225,275 175,275 125,275Z

jsfiddleも作成しました：http：//jsfiddle.net/ry8kT/

これはキャットマルカーブで達成できますか？そうでない場合は、完全に滑らかな形状を得る方法の例を教えてください。

よろしくお願いします、マクファーレン

4

2 に答える 2

3

最初の例では、パスは125,275で始まり、閉じる前に再び125,275でした。「Z」は開始点と終了点を接続する別の滑らかなパスセグメントを作成するため、その小さなループが得られます。開始点に戻る前に閉じると、指定されたすべての点に接触する目的の滑らかな形状が得られます。

これは、サンプルパスの修正バージョンです。

M125,275R 125,325 175,325 225,325 275,325 225,275 175,275Z
于 2012-08-31T08:16:35.947 に答える
3

私はそれを自分で修正しました：

catmull romスプラインを使用する代わりに、2次曲線と計算された中点を使用しています。このソリューションは、滑らかな形状を描画する場合にのみ機能しますが、パスがポイントを直接通過する必要がある場合には機能しないことに注意してください。

仕組みは次のとおりです。

最初：ラインの始点を最初のポイントに設定し、直後にmoveToコマンドを設定します

M point1.x,point1.y M

これは、エッジなしでパスを閉じるために重要です。

ここで、すべてのポイントをループし、現在のポイントと次のポイントの間に計算された中点を追加し、その後に次のポイントをコントロールとして使用した2次曲線を追加します。

mid.x,mid.y C next.x,next.y

これを使用して、AとBの間の中点Mを計算します。

M.x = (A.x-B.x)/2 + B.x
M.y = (A.y-B.y)/2 + B.y

すべてのポイントをループした後、最初のポイントをコントロールとして、1番目と2番目のポイントの中点まで2次曲線を作成する必要があります。

C first.x,first.y mid.x, mid.y

次に、Zを使用してパスを閉じ、図形を塗りつぶすことができます。

Z

パスの先頭に2つのmoveToコマンドがあるため、この接続は表示されません。

私のソリューションの結果とソースコードを確認するには、更新されたjsfiddleにアクセスしてください：http： //jsfiddle.net/ry8kT/1/

于 2012-02-03T10:45:42.317 に答える