如何将 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。