javascript - Kineticjsステージを別のキャンバスにコピーする方法

Question

1ページに数百のキャンバスが表示される可能性のあるアプリを作成しています。キャンバスごとに個別のステージのオーバーヘッドを設定するのではなく、ステージを保持するエディターを作成することにしました。編集が完了すると、ステージのコンテンツを別のキャンバスにコピーする必要があります。

Stageはコンテンツを取得するためにtoImageとtoDataURLを提供しますが、このパフォーマンステストによると、これらのメソッドはどちらもcontext.drawImageと比較して非常に低速です。

ステージで1つのレイヤーのみを使用し、レイヤーがキャンバスを保持しているため、これを実行できると思いました。

desticationCtx.drawImage(layer.getContext().canvas, 0,0);

残念ながら、それは何の結果も生み出しません（しかしそれは実行されます）

ステージにはbufferCanvasがあるので、私も試しました。

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);

ページのステージキャンバスにコンテンツが表示されていますが、結果はありません。

ただし、ページを掘り下げて、kineticjsによって作成および使用される実際のキャンバスにたどり着くと、次のようになります。

destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);

結果は出ます。Kineticjsステージのコンテンツを別のキャンバスにコピーする適切な方法は何ですか？

score 3 · Accepted Answer

次のようなレイヤーキャンバス要素にアクセスします。

var canvasElement = layer.getCanvas().getElement();

そしてこのような文脈：

var context = layer.getCanvas().getContext();

関心のあるドキュメントは次のとおりです。

score 0 · Accepted Answer

Kineticjsの最後の新しいバージョンでは、正しいマークの付いた回答のメソッドは機能しなくなりました。最近では、jqueryを使用して、kineticjsメインキャンバスを取得するために次のアプローチを使用しました。

var canvas = $('#canvasDiv').find('canvas');
console.log("Canvas: %O", layerCanvas);

交換するだけ

 #canvasDiv

コンテナのIDを使用します。

2 に答える 2