1

免責事項：これはベクターグラフィックスへの私の最初のアプローチです;）

ユーザーが（図面を作成するために）画像をアップロードしているときにWebアプリを作成しています。彼は、「マスク」として機能するベクター画像（SVG）をアップロードすることになっています。

Paper.jsライブラリを使用しています。

したがって、私の目標は、SVGを読み取り、それを表すpaper.js PathItemを作成することです（次に、fillcolorを追加します）。

シンプルな形で試してみました：

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

SVGでのそれは次のようになります：

// Adobe Illustrator
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<polygon fill="none" stroke="#000000" points="48.771,12.137 59.323,33.518 82.919,36.947 65.845,53.59 69.875,77.09 48.771,65.994 
    27.667,77.09 31.697,53.59 14.623,36.947 38.219,33.518 "/>
</svg>


// Inkscape pure svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100"
   height="100"
   viewBox="0 0 100 100"
   id="Livello_1"
   xml:space="preserve"><metadata
   id="metadata3358"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
   id="defs3356" />
<polygon
   points="59.323,33.518 82.919,36.947 65.845,53.59 69.875,77.09 48.771,65.994 27.667,77.09 31.697,53.59 14.623,36.947 38.219,33.518 48.771,12.137 "
   id="polygon3352"
   style="fill:none;stroke:#000000" />
</svg>

この種の形状の処理は非常に簡単です。points文字列を配列に変換し、パスを作成し.add()て各要素を呼び出します。

問題は、形状が単なる線ではない場合に発生します。たとえば、次のようになります。

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

湾曲した部分をpaper.jsコマンドに変換する方法が本当にわかりません！SVGには次のような構造が含まれています。

<path fill="#FFFFFF" stroke="#000000" d="M74.89,73.117H34.605c-11.32,0-20.497-9.177-20.497-20.497v-5.695
    c0-11.32,9.177-20.497,20.497-20.497H74.89"/>
<line fill="none" stroke="#000000" x1="74.89" y1="26.428" x2="74.89" y2="73.117"/>

運が悪かったので、W3C svg変換を読み取りましたが、実際にはそのM 74.89,73.117 H 34.605 c -11.32,0 -20.497,-9.177 -20.497,-20.497 v -5.695 c 0,-11.32 9.177,-20.497 20.497,-20.497 H 74.89部分を変換する方法がわかりません。

何か案が？

4

2 に答える 2

9

Paper.jsには、SVGコンテンツを非常に簡単にインポートおよびエクスポートできる独自の本格的なSVGパーサーおよびエクスポーターが付属していることをご存知ですか？

それについてのチュートリアルはまだありませんが、機能ページには2つの例が示されています。

http://paperjs.org/features/#svg-import-and-export

そして、それはここのリファレンスに文書化されています：

http://paperjs.org/reference/project/#importsvg-svg http://paperjs.org/reference/item/#importsvg-svg

これがお役に立てば幸いです。

于 2014-09-28T08:31:55.563 に答える
0

変換はあなたが探しているものではなく、パスです。パスデータを正しく解析するにはいくつかの作業が必要であり、確立されたSVGライブラリでは今日まで正しく解析できないことに注意してください（ここではlibrsvgについて話しています）。

幸いなことに、SVGDOMが役に立ちます。path要素にはプロパティがあります。これにより、属性normalizedPathSegListからのデータが簡略化され、dすべてのセグメントを反復処理できます。同様の質問に対する優れた回答を参照してください：SVGでの<path>データのスクリプト作成（読み取りと変更）。

fabric.jsは、SVG/キャンバスのギャップを埋めるために役立つ可能性のあるもう1つのライブラリです。

于 2012-12-10T12:27:52.130 に答える