1

javascriptを使用してストロークパスをシェイプに変換する方法はありますか? これを組み込み機能として提供するライブラリはありますか?

Illustrator にこの機能があることは知っているので、画面上の SVG 画像をコピーして Illustrator に移動することが解決策として考えられるのですが、それができた場合、属性として保存されている関連するメタデータがすべて失われますか?

4

2 に答える 2

2

[I] JavaScript を使用してストローク パスをシェイプに変換する方法はありますか?

はい、SVG パス ストロークをアウトライン シェイプに変換する方法があります。残念ながら、これは SVG に組み込まれた事前にパッケージ化された関数ではありません。それを行う方法は数学と呼ばれます。ベジエ曲線、マイター設定、ラインキャップ、ラインジョイン、およびダッシュ配列を考慮する必要があります。@inhanが指摘したように、さまざまな関数を使用して支援したり近似したりすることができますが、それらのどれもあなたのために計算を行うつもりはありません. 可能ですが、JavaScript では決して簡単ではありません。

[W]画面上の svg 画像をコピーして Illustrator に移動する方法はありますか?

もちろん、それは簡単です。

  1. Web ブラウザーで D3.js SVG ベースのイラストを開きます。
  2. 開発者ツール (または Firebug) を開きます。
  3. 必要な要素を見つけて右クリックし、[HTML としてコピー] または [SVG をコピー] を選択します。
  4. コードをテキスト エディターに貼り付け、SVG でラップします。
  5. Illustrator で SVG を開きます。
  6. 必要なパスの輪郭を描きます。
  7. SVG として保存
  8. Illustrator でエクスポートした SVG コードをコピーして、好きな場所に貼り付けます。

しかし、これはあなたに何をもたらしますか？確かに、D3.js ビジュアライゼーションで機能するものは何もありません。

しかし、それができた場合、属性として保存されている関連するメタデータがすべて失われるでしょうか?

あなたは何について話しているのですか？ソースコードの属性について話している場合、結果に属性をコピー/貼り付けしない場合にのみ失われます。Web ブラウザーで実行されているビジュアライゼーションにバインドされた JavaScript データについて話している場合、Adobe Illustrator を介して往復すると、もちろんデータが失われます。

あなたの質問は私にはほとんど意味をなさないので、あなたのニーズ/目標が何であるかを見逃しているに違いないと感じています. あなたは本当に何を達成しようとしていますか？

于 2012-05-22T04:29:41.670 に答える
0

関数内でそのパスのstoke-widthおよびstroke-dasharray属性と一緒に Raphaëlの 関数Element.getTotalLength()と関数を使用すると、おそらく結果が得られます。Element.getSubpath()

于 2012-05-22T02:33:15.187 に答える