11

ストローク パスを塗りつぶされたオブジェクトに変換したいと考えています。(プログラム的に、JavaScript で。)

この線は単純な曲線であり、一連の座標です。この線をパスとしてレンダリングし、特定の太さのストロークを与えることができます...しかし、ワープなどのさらなる変更を行うことができるように、ストロークされた線ではなく塗りつぶされた形状を取得しようとしていますそのため、結果として得られる「ストローク」の太さが異なるか、カスタム ビットが切り取られる可能性があります (私が知る限り、実際の SVG ストロークではこれらのいずれも可能ではありません)。

だから私は線を手動で「太く」しようとしています。これを行う関数が見つかりません - D3.jsとRaphaëlのドキュメントを調べましたが、運がありません。これを行うライブラリ/関数を知っている人はいますか?

または、さらに良いこと: 誰かがこのタスクを手動で行う方法について幾何学理論を説明してくれたら、私が持っている線座標のリストを取得し、それを効果的に「ストローク」する新しいパスを作成することによって、それは驚くべきことです. 別の言い方をすれば、パスをストロークするように指示したときにブラウザは何をしますか? ストロークがどのような形状であるべきかをどのように判断するのでしょうか?

4

3 に答える 3

4

最近同様の質問がありました： svg：「アウトラインパス」を生成します

全体として、これは簡単な作業ではありません。リンクされた質問への私の回答で述べたように、PostScriptには、基本的にストロークと同じ出力を生成するパスを生成するためのコマンドがありますstrokepath。リンクされた質問で投稿したコードを実行したときにGhostscriptが吐き出すものを見ると、かなり醜いです。そして、Inkscapeでさえ本当に良い仕事をしていません。InkscapeでPath=>Outlineストロークを試してみましたが（英語のキャプションはそう言うべきだと思います）、出てきたものは実際にはストロークされたパスと同じようには見えませんでした。

「最も単純な」ケースは、曲線を含まない自己交差しないポリライン、ポリゴン、またはパスしかない場合です。これは、一般に、正確な「平行な」ベジェ曲線を左右に描くことができないためです。ストローク領域を区切る自明でないベジェ曲線-数学的には存在しません。したがって、いずれかの方法で近似する必要があります。直線セグメントの場合、正確な解は比較的簡単に見つけることができます。

曲線/円弧を含むベクトルパスをレンダリングする古典的な方法は、十分に滑らかなポリラインですべてを近似することです。De Casteljauのアルゴリズムは、通常、ベジェ曲線を線分に変換するために使用されます。（これは、基本的にGhostscriptでコマンドを使用したときにも表示されますstrokepath。）次に、平行線分の区切りを見つけることができますが、適切なlinejoinおよびmiterlimitルールを使用してそれらを正しく結合する必要があります。もちろん、ラインキャップを忘れないでください。

自己交差するパスは、パスの内側に中空の領域ができる可能性があるため、注意が必要だと思いました。つまり、黒いパスの「交差領域」が白くなる可能性があります。これは、ゼロ以外の巻線ルールを使用する場合のオープンパスでは問題にならない可能性がありますが、これについては注意が必要です。閉じたパスの場合、反対方向に実行するには、おそらく2つの「区切り」パスが必要です。しかし、これが本当にすべての潜在的な落とし穴をカバーしているかどうかは今のところわかりません。

私がこれと多くの混乱を引き起こし、多分あまり役に立たない場合は申し訳ありません。

于 2012-11-30T12:50:23.373 に答える
2

このページには、一般的なベジエ曲線に関するかなり優れたチュートリアルと、オフセット曲線に関する優れたセクションがあります。

http://pomax.github.io/bezierinfo/

精度は劣りますが、より高速な方法がここにあります。

http://seant23.wordpress.com/2010/11/12/offset-bezier-curves/

ベジェ曲線に平行な曲線は一般にベジェ曲線ではないため、数学的な答えはありません。特に一連の曲線を扱う場合、ほとんどのメソッドには退化したケースがあります。

単純な曲線は、問題のない曲線と考えてください。尖り、ループ、屈曲がなく、理想的には厳密に増加する曲率です。すべての開始曲線をこれらの単純な曲線に切り刻みます。これらの単純な曲線のすべてのオフセット曲線を見つけます。ギャップと交差を処理して、すべてのオフセット カーブを元に戻します。二次曲線は、使用するオプションがあれば、はるかに扱いやすくなります。

ほとんどのブラウザは、二次曲線であっても退化したケースがあるため、processingjs と同様のことを行うと思います。たとえば、厚さが 100 以上の曲線 200,300 719,301 500,300 を見てください。

于 2012-12-28T11:21:26.073 に答える
1

標準的な方法は、Tiller-Hanson アルゴリズム (Offsets of Two-Dimensional Profiles、1984 年、腹立たしいことに無料でオンラインではありません) であり、適切な近似を作成します。各ベジエ曲線の制御点は曲線の始点と終点に接する線上にあるため、平行曲線は同じプロパティを持つという考え方です。そのため、曲線の始点と終点をオフセットし、これらの交点を使用して新しい制御点を見つけます。ただし、これは鋭い曲線に対して非常に悪い結果をもたらすため、最初のステップは元の曲線を 2 等分することです。これは、ベジエ曲線に対して非常に簡単に行うことができ、十分に小さな角度で曲がるまで行います。

(i) 各頂点の内側にある平行線間の交点。(ii) 各頂点の外側のギャップを埋めるために円弧を挿入します。(iii) エンドキャップの追加 - 正方形、突き合わせ、または円形。

Tiller-Hanson の実装は困難ですが、FreeType ライブラリの ftstroke.c (http://git.savannah.gnu.org/cgit/freetype/freetype2.git/tree/src/ base/ftstroke.c)。

このコードを統合するのは非常に難しいと言って申し訳ありませんが、私はそれをうまく使用しており、うまく機能しています。

于 2012-12-22T18:17:10.570 に答える