4

SVGファイルをロードしようとしてKineticJS（KJS）を使用してキャンバスに表示したいので、KJSを使用してキャンバスにランダムな形状とパスを含むSVGファイルを表示できるかどうかを知りたいですか？

現在、異なるソフトウェアを介してエクスポートされたSVGも大きく異なります。たとえば、Adobe Illustratorを介してエクスポートされたSVGには、塗りつぶし、ストローク、ストローク幅などがあります。Inkscapeを介してエクスポートされたSVGには、これらすべてがあります。つまり、塗りつぶし、ストローク、ストローク幅など。それぞれのタグの「スタイル」属性の文字列値として。

そのため、AIによってエクスポートされたSVGの形式に固有の独自のSVGパーサーを作成し、それを使用してKJSを介してキャンバスにSVGを再描画しようとしています。しかし、それを行う前に、私はただチェックしたかっただけです：

  1. すべてのプリミティブ（線、長方形、円など）タグをパスタグとして変換できるツールはありますか？つまり、rect＆ellipseタグの代わりに、同等のパスタグに変換されます。
  2. KJS以外にSVGをキャンバスにロードする別の方法はありますか？
4

2 に答える 2

5

drawImage残念ながら、 SVG を Canvas に変換することはできません( test )。

ただし、 canvgを使用して、SVG をカスタムの KineticJS 形状 ( test )で描画できます。

var drawSvg = new Kinetic.Shape ({
  x: 10, y: 10,
  drawFunc: function (canvas) {
    canvas.getContext().drawSvg (svgSource, 0, 0, 25, 25)
  }
}); layer.add (drawSvg)
于 2013-02-21T15:19:28.333 に答える
3

実際、SVG を Canvas に drawImage() することは可能です (ArtemGr のコードは、私にとっては FF と Chrome で動作しています)。

ただし、Chrome では Origin Policy エラーが発生します ( https://bugs.webkit.org/show_bug.cgi?id=17352でバグが報告されています)。

kinetic で canvg を使用しようとしましたが、2 つの問題が見つかりました。

  1. Kinetic のリッスンが有効になっていると非常に遅くなります。
  2. 画像をスケーリングする必要がある場合、レンダリングの品質は非常に低くなります。

私が見つけた解決策は、fabricjs の SVG レンダリングを使用することです。これは非常に優れていることが証明されています。コードは次のようになります。

var fabricSvg;
// uses the fabric SVG engine
fabric.loadSVGFromUrl(svgSource, function(objects, opts) {
  if (objects.length > 1) 
    fabricSvg = new fabric.PathGroup(objects, opts);
  else
    fabricSvg = objects;

  fabricSvg.originX = 'left';
  fabricSvg.originY = 'top';

  var drawSvg = new Kinetic.Shape({
    x: 10, y: 10,
    drawFunc: function(canvas) {
      // use fabric SVG engine with Kinetic canvas context
      fabricSvg.render(canvas.getContext());
    }
  });
  layer.add(drawSvg);
});

そうすれば、ファブリックよりも優れたパフォーマンスを持つキネティック アニメーション エンジンと、ファブリックの SVG レンダリング モジュールを使用できます。

于 2013-07-09T01:41:17.447 に答える