Kinetic JSオブジェクトを SVGにエクスポートできますか?
または回避策は、Kintetic JS のキャンバスを SVG に変換することです。
編集：
fabricJSを使用するのが最善です。これは、ファブリック オブジェクトの操作中にキャンバスから SVG へのレンダリングをサポートするためです。
キャンバスに描画するために他のライブラリを使用せずにキャンバスをsvgに変換するため、Phrogzの回答を受け入れました。
編集 2: OK、めちゃくちゃです。Phrogz のライブラリはキャンバス要素のラッパーであるため、そのメソッドを使用してキャンバス上に描画します (キャンバス上で「リッスン」して SVG パスを作成するだけだと思いました)。したがって、最適なソリューションは間違いなく fabricJS です。
HTML5 キャンバス コンテキストを拡張して、すべてのベクター描画コマンドを追跡し、それらを配列 SVG 要素としてコンテキストのプロパティに格納できるようにする、ライブラリのアルファ バージョンを作成しました。ctx.svgObjects
ここでライブラリの動作を確認できます: http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
デモでは記録をオンにし、HTML5 Canvas にいくつかの図形を描画してから、「記録された」SVG オブジェクトを SVG コンテナーに追加します。隣。
一般的にライブラリ：
SVGMatrixます。(これは、HTML5 コンテキスト API を使用すると、現在の変換をマトリックスに設定できますが、現在のマトリックスを取得できないためです。) これは、 and のような呼び出しをインターセプトしtranslate()、rotate()それに応じてマトリックスを更新することによって行われます。beginPath()新しい SVG パス要素をインターセプトして作成し、同等のパス コマンドを SVG パスに追加するために、
moveTo()and などの追加のコマンドをインターセプトします。lineTo()fill()およびをインターセプトしstroke()て、現在の SVG のコピーを配列に追加し<path>、svgObjects現在の変換マトリックス、塗りつぶし、および線のスタイルを設定します。
lineCap、lineJoin、miterLimit) がサポートされているわけではありません。fill()されます。stroke()この特定のケースをストローク/フィルと区別したり、呼び出し間の変換やパスを変更したりする最適化はありません。fillRect()しstrokeRect()て SVG<rect>要素を作成します。すべてのコマンド (パス コマンドだけでなく、 などfillText()) を具体化するために、このライブラリでさらに作業を行うことができます。しかし、それは私が個人的に必要としているものではないので、ゴールまで運ぶのに何時間も費やすつもりはありません.
最善の解決策は、Fabric.jsを使用することです!
基本的に、キャンバスをbase64 pngに変換してから、svgに配置できます。
多分これはあなたを助けることができます