javascript - 如何将 kineticjs 阶段复制到另一个画布

Question

我正在编写一个应用程序，其中一个页面上可能有数百个画布。我没有为每个画布单独设置一个舞台的开销，而是决定让一个编辑器拥有一个舞台。编辑完成后，它应该将舞台内容复制到另一个画布。

Stage 提供 toImage 和 toDataURL 来获取内容，但是根据此性能测试，与 context.drawImage 相比，这两种方法都非常慢。

由于我只在舞台中使用一个图层，而一个图层包含一个画布，我想我可以这样做：

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，来自正确标记答案的方法不再起作用。现在我只是使用以下方法来获取 kineticjs 主画布 - 在 jquery 的帮助下：

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

只需更换

 #canvasDiv

使用您的容器的 ID。

2 回答 2