Ich schreibe eine App, in der es möglicherweise Hunderte von Leinwänden auf einer Seite gibt. Anstatt für jede Leinwand den Overhead einer einzelnen Bühne zu haben, habe ich mich für einen Editor entschieden, der eine Bühne enthält. Sobald die Bearbeitung abgeschlossen ist, sollte der Bühneninhalt auf eine andere Leinwand kopiert werden.

Stage bietet toImage und toDataURL an, um Zugriff auf den Inhalt zu erhalten. Gemäß diesem Leistungstest sind beide Methoden im Vergleich zu context.drawImage jedoch sehr langsam.

Sehen:http://jsperf.com/copying-a-canvas-element

Da ich in einer Bühne nur eine Ebene verwende und eine Ebene eine Leinwand enthält, dachte ich, ich könnte dies tun:

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

das bringt leider keine ergebnisse (läuft aber)

Da eine Bühne ein bufferCanvas hat habe ich auch versucht:

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

Wieder keine Ergebnisse, obwohl ich den Inhalt auf der Bühnenleinwand auf der Seite sehen kann.

Wenn ich jedoch auf meiner Seite nach unten grabe, um zur tatsächlichen Leinwand zu gelangen, die von kineticjs erstellt und verwendet wird:

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

Ich bekomme Ergebnisse. Was ist der richtige Weg, um kineticjs Bühneninhalte auf eine andere Leinwand zu kopieren?