如何將 kineticjs 舞台復制到另一個畫布

Question

我正在編寫一個應用程序，頁面上可能有數百個畫布。 與其為每個畫布分配一個單獨的舞台，我決定使用一個編輯器來控制一個舞台。 編輯完成后，它應該將舞台內容復制到另一個畫布。

Stage 提供 toImage 和 toDataURL 來獲取內容，但是根據此性能測試，與 context.drawImage 相比，這兩種方法都非常慢。

請參閱： http : //jsperf.com/copying-a-canvas-element

由於我在舞台上只使用一個圖層並且一個圖層包含一個畫布，我想我可以這樣做：

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 舞台內容復制到另一個畫布的正確方法是什么？

Answer 1

像這樣訪問圖層畫布元素：

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

和這樣的上下文：

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

這是感興趣的文檔：

http://kineticjs.com/docs/Kinetic.Layer.html#getCanvas

http://kineticjs.com/docs/Kinetic.Canvas.html

Answer 2

在最新版本的 kineticjs 中，正確標記答案中的方法不再有效。 現在我只是使用以下方法來獲取 kineticjs 主畫布 - 在 jquery 的幫助下：

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

只需更換

 #canvasDiv

使用您的容器的 ID。