2012-04-17 10 views
3

私はこのようなSVGパスを描く:制御点を含むSVGパス(Z)を閉じますか?

スタート:

M x, y 

....曲線

Q x1, y1, x, y 

などなどを追加し、私は道を閉鎖したい場合、私はちょうどZ

を追加

しかし、最後の線分にはコントロールポイントがありません。

パスを閉じて、最後のセグメントにコントロールポイントを設定するにはどうすればよいですか?

次のようになります。Z Q x1, y1ここで、Zはパス(現在のポイントから最初のポイント)を閉じますが、x1とy1を制御ポイントとして使用します。

答えて

3

私はあなたの願いを理解しています。私がIllustratorでフリーハンドブロブを描画するたびに、私はいつも元の点に最終点を設定し、ドラッグして両側のコントロール点の接線を作成します。

SVGにはこのような機能はありません。これを行うpath commandはありません。最も近い速記パスがSTコマンドですが、何がしたいことは第一の制御から制御点を導出何かあるのに対しこれらは、以前コマンドの最後の制御ポイントから最初制御点を導き出します次のコマンド(ラップアラウンドスタイル)をポイントします。

JavaScriptでこれを行うことができます。

<path d="… Z" class="smooth-close" /> 

等のマークアップ...、すべてsmooth-close経路を発見小さなスクリプトは、最初のコマンドから適切な制御点を決定し、S又はTコマンドを生成し、経路データに追加します。しかし、であなたの質問にタグをつけなかったので、私はそのような解決策はあなたに興味がないと思います。

+0

私はSVGがそれをサポートしているかどうかを知りたいので、javascriptとしてタグ付けしませんでした。私はキャンバス上にパスを描画するためにfabricJSを使用していますが、SVGとまったく同じように動作しています。最初のポイントにもう1つのラインフォームの現在のポイントを追加し、視覚的にパスを閉じてからZを呼び出すことができますが、それでもコントロールポイントを持たない1つのラインを残します。 – vale4674

+0

FWIW Adob​​e Illustratorを使用して2点(4つのコントロールポイント)から楕円を作成すると、 'M0,0 c0、-50,100、-50,100,0 S0,50,0,0 z 'のようなパスデータが得られます。このように、私は上記JavaScriptを使って説明したことを行い、最初のコントロールポイントを接線方向に反映するコントロールポイントで手動でカーブを閉じます。そして、あなたが言うように、それは公式に道を閉じるために(余分な)ゼロ距離 'z'を投げます。 – Phrogz

+0

私は説明したようにしました。私は通常のカーブを追加しましたが、カーブの最後にはパスのスタートコードを付けました。そして、私はZで閉じています。私の実装では、そのポイントを押してパスの開始と終了を制御するかどうかを知っています。 (あなたが理解することを望む、より良く説明する方法を知らない) – vale4674

関連する問題