javascript - Canvas に SVG を描画し、ID を使用して描画要素を操作する

Question

<object>タグに読み込まれた SVG ファイルがあります。このsvg内のいくつかの要素を操作するためにjavascriptを使用しています。例えば：

var theSvgXml = document.getElementById('theObject').contentDocument;
theSvgXml.getElementById('theElementId').style.display = 'inline';
theSvgXml.getElementById('theElementId').style.fill = 'red';
theSvgXml.getElementById('anotherElement').style.display = 'none';

これは完全に機能し、すべてがうまくいきました。しかし、キャンバスでも同じことができるかどうか疑問に思っています。キネティック js、ファブリック js、canvg js についても読んだことがあります。ファイルディレクトリ、xml、または画像を使用して、svg ファイルをキャンバスにロードするさまざまな方法を見てきました。

しかし、この svg ファイルをキャンバスに描画した後、要素を ID で操作できますか?

SVG は Adobe Illustrator を使用して作成され、各レイヤーまたはグループには ID が与えられ、css セレクターを使用してアクセスできます。繰り返しますが、これはキャンバスに SVG を描画した後にキャンバスで実行できますか。（SVGは巨大であり、キャンバスソリューションについて考えている唯一の理由は、svgがイラストレーターの乗算効果を表示して影を作成しないためであることに注意してください）

どんな助けでも大歓迎です。ありがとうございました。

コードスニペット：

<g id="Pockets">
<g id="Pen__x26__Radio_Arm_Pocket" class="st791"> … </g>
<g id="Pen_Pocket_Arm" class="st791"> … </g>
<g id="Card_Zipper_Arm_Pocket" class="st791"> … </g>
<g id="Radio_Pocket_Arm_Pocket" class="st791"> … </g>
<g id="Angled_Chest_Pocket_Right" class="st791"> … </g>
<g id="Angled_Chest_Pocket_Left" class="st791"> … </g>
<g id="Angled_Chest_Pocket_left_and_Right" class="st791"> … </g>
<g id="Chest_Pocket_Right" class="st791"> … </g>
<g id="Chest_Pocket_Left" class="st791"> … </g>
<g id="Chest_Pocket_left_and_Right" class="st791"> … </g>
<g id="Tool_Pocket" class="st791"> … </g>
<g id="Cargo_x2F_Mobile_Pocket_Velcro" class="st791"> … </g>
<g id="Cargo_x2F_Mobile_Pocket_Zip" class="st791"> … </g>
<g id="Cargo_x2F_Mobile_Pocket_Button" class="st791"> … </g>
<g id="Cargo_Pocket_Velcro" class="st791"> … </g>
<g id="Cargo_Pocket_Button" class="st791"> … </g>
<g id="Cargo_Pocket_Zip" class="st791"> … </g>
<g id="Back_Pocket_Right_Velcro" class="st791"> … </g>
<g id="Back_Pocket_left_Velcro" class="st791"> … </g>
<g id="Back_Pocket_left_and_Right_Velcro" class="st791"> … </g>
<g id="Back_Pocket_Right_Velcro_Button" class="st791"> … </g>
<g id="Back_Pocket_left_Velcro_Button" class="st791"> … </g>
<g id="Back_Pocket_left_and_Right_Button" class="st791"> … </g>
<g id="Back_Pocket_Right_Zip" class="st791"> … </g>
<g id="Back_Pocket_left_Zip" class="st791"> … </g>
<g id="Back_Pocket_left_and_Right_Zip" class="st791"> … </g>
</g>

Adobe Illustrator からファイルをエクスポートした後の xml スニペットからわかるように、各グループには ID が設定されています。これらをオブジェクトとしてキャンバスに保存するにはどうすればよいですか (Fabrics.js が getObjects() メソッドの使用を提案しているように)? これを達成する方法はありますか？はいの場合、これらのグループを参照するにはどうすればよいですか? また、影は重要な問題であり、フラッシュを使用したくありません。ありがとう

score 10 · Accepted Answer

Fabric でこれを行う方法は次のとおりです。

fabric.loadSVGFromURL('/assets/72.svg', function(objects, options){

  var group = fabric.util.groupSVGElements(objects, options);

  group
    .set({ left: 300, top: 200 })
    .scaleToWidth(500)
    .setCoords();

  canvas.add(group);
}, reviver);

function reviver(element, object) {
  object.id = element.getAttribute('id');
}

コードは一目瞭然です。SVG を読み込みます。Fabric はそれを内部で解析し、各要素を表すオブジェクトのセットを吐き出します。次に、それらの要素をグループ化し、1 つのチャンクとしてキャンバスに追加します。Reviver は、各 SVG 要素の ID を読み取り、それを対応するファブリックインスタンスに割り当てる責任があります。

このスニペットをhttp://fabricjs.com/kitchensink/で実行すると、次のようになります。

読み込まれた svg

このグループ化されたオブジェクトを調べてみましょう:

canvas.item(0) + ''; "#<fabric.PathGroup (29303): { top: 200, left: 300 }>"

そしてその子：

canvas.item(0).getObjects(); // Array[2287]

ID で 1 つ取得しましょう。

var greenland = canvas.item(0).getObjects().filter(function(obj) {
  return obj.id === 'path4206';
})[0];

ご覧のとおり、これはすべて単純な古い Javascript です。その特定のオブジェクト/シェイプの色を変更してみましょう:

greenland.fill = 'red';

赤く染まるグリーンランド

score 1 · Accepted Answer

あなたの状況についてのランダムな考え

HTML キャンバスにはいくつかの合成モードがありますが、キャンバスには画像乗算ブレンドがありません。

しかし、Firefox はそうです。これは、合成に対する乗算ブレンド拡張です。

ctx.globalCompositeOperation = 'multiply';

SVG-->Canvas トランスレータを備えた主要なキャンバスライブラリは FabricJS と KineticJS ですが、どちらもこの乗算フィルタをまだ実装していません。2 つのうち、現時点では FabricJS の方が SVG に対応しており、Kangax (FabricJS の作成者) があなたの投稿にコメントしているようです。乗算フィルターを追加するかどうか、彼に本当にうまく尋ねるかもしれません ;)

Adobe Illustrator にアクセスできるようですので、Mike Swanson の印象的な SVG-->Canvas トランスレータを試してみてください。それが画像フィルターを処理するかどうかはわかりませんが、標準の Adobe Illustrator SVG を取得して Canvas 図面を作成するという印象的な仕事をします (私に言わせれば、非常に印象的なアプリです!): http://blog.mikeswanson.com/post /29634279264/ai2canvas

SVG の内部を考える -- SVGJS ライブラリを確認する必要があります。

SVGJS は、SVG 要素を ID で操作できる SVG ライブラリです。

https://svgdotjs.github.io/

Illustrator からインポートする拡張機能もあります。

https://svgdotjs.github.io/importing-exporting/

最後に、SVGJS には、画像フィルターを暗くする (乗算ではなく、閉じる) 拡張機能もあります。

https://svgdotjs.github.io/plugins/svg-filter-js/

もしあなたが絶望的になったら...（あなたがこれほど絶望的になる可能性は低いです！）

context.getImageData を使用してキャンバスピクセルを取得し、乗算するピクセルの r、g、b 要素のそれぞれに対してこの関数を実行することで、「独自の」乗算フィルターを使用できます。

function multiply(top, bottom){
    return(top*bottom/255;
}

幸運を！

score 0 · Accepted Answer

kinetic のようなフレームワークを使用すると、ID や名前でレイヤーやオブジェクトにアクセスして操作できます。

javascript - Canvas に SVG を描画し、ID を使用して描画要素を操作する

4 に答える 4

Related

Reference