kineticjs 스테이지를 다른 캔버스에 복사하는 방법

Question

페이지에 수백 개의 캔바스가있을 수있는 앱을 작성 중입니다. 각각의 캔버스에 대해 개별 무대의 오버 헤드를 갖는 것보다는 무대를 잡는 편집자를두기로 결정했습니다. 편집이 완료되면 무대 내용을 다른 캔버스로 복사해야합니다.

Stage는이 성능 테스트에 따라 콘텐츠를 보유하기 위해 toImage 및 toDataURL을 제공하지만 두 방법 모두 context.drawImage에 비해 속도가 매우 느릴 수 있습니다.

참조 :

어떤 결과를 생성하지 않습니다 불행히도

desticationCtx.drawImage(layer.getContext().canvas, 0,0); 

(: 난 단지 무대에서 한 층을 사용하고 층은 캔버스를 보유하고 있기 때문에, 나는이 작업을 수행 할 수 있다고 생각 http://jsperf.com/copying-a-canvas-element

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0); 

:이 단계 이후

내가 또한 시도한 bufferCanvas있다)하지만 실행 않는다

페이지의 스테이지 캔버스에서 내용을 볼 수 있지만 결과가 없습니다.

그러나 나는 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의 최신 버전 및 최신 버전에서는 표시된 올바른 답변의 메소드가 더 이상 작동하지 않습니다.

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

그냥 컨테이너의 ID와

#canvasDiv 

을 대체 : JQuery와의 도움으로 - 요즘 난 그냥 kineticjs 주요 캔버스를 얻기 위해 다음과 같은 방법을 사용했다.