如何将kineticjs舞台复制到另一个画布 [英] How to copy a kineticjs stage to another canvas
问题描述
我正在编写一个应用程序，页面上可能有数百个画布。我没有为每个画布分配单个舞台的开销，而是决定让一个编辑器占据一个舞台。编辑完成后，它应该将舞台内容复制到另一个画布。
I am writing an app where there may be hundreds of canvasses on a page. Rather than having the overhead of an individual stage for each canvas, I decided to have an editor that holds a stage. Once editing is completed it should copy the stage content to another canvas.
舞台提供toImage和toDataURL以获取内容但是根据此性能测试，这两种方法都将与context.drawImage相比非常慢。
Stage offers toImage and toDataURL to get hold of the content however according this performance test, both those methods will be very slow compared to context.drawImage.
请参阅： http://jsperf.com/copying-a-canvas-element
因为我只在一个舞台中使用一个图层而一个图层保持一个画布，我想我可以这样做：
Since I only use one layer in a stage and a layer holds a canvas, I thought I could do this:
desticationCtx.drawImage(layer.getContext().canvas, 0,0);
不幸的是，它不会产生任何结果（它确实运行）
unfortunately that doesn't produce any results (It does run though)
由于舞台有一个bufferCanvas我也尝试过：
Since a stage has a bufferCanvas I also tried:
destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);
虽然我可以在页面上的舞台画布上看到内容，但仍然没有结果。
Again no results although I can see the content on the stage canvas on the page.
但是，如果我在我的页面中挖掘以获得kineticjs创建和使用的实际画布：
However if I dig down in my page to get to the actual canvas created and used by kineticjs:
destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);
我确实得到了结果。将kineticjs舞台内容复制到另一个画布的正确方法是什么？
I do get results. What is the proper way to copy kineticjs stage content to another canvas?
推荐答案
访问图层画布元素，如下所示：
access a layer canvas element like this:
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
这篇关于如何将kineticjs舞台复制到另一个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
