如何将KineticJS舞台复制到另一个画布中

Question

我正在编写一个应用程序，页面上可能会有数百个画布。为了避免每个画布都有一个单独的舞台，我决定使用一个编辑器来持有一个舞台。编辑完成后，它应该将舞台内容复制到另一个画布。

舞台提供了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舞台内容复制到另一个画布的正确方法是什么？

- Paul van Dinther

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

- Eric Rowell

---

我发誓之前尝试过那个方法，但它确实有效，而且肯定比我之前做的可怕的假设要好：document.getElementById('mydiv').children[0].children[0]。 - Paul van Dinther

Answer 2

使用最新版本的kineticjs，标记为正确答案的方法不再起作用。 现在我只使用以下方法来获取kineticjs主画布 - 借助jquery的帮助：

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

只需替换

 #canvasDiv

使用您的容器ID。

- Torsten Barthel