js는 동적으로 그려진 그래픽으로 도형을 복제합니다.

Question

저는 무대에 이미지가 있고 그 위에 그림을 그려서 지우고 있습니다. 다음과 같은 방법

http://jsfiddle.net/lannymcnie/ZNYPD/

를 사용하여 지금은 사용자 도면의 클론하지만 작동하지를 먹고 싶어. 시도 :

var drawingAreaClone = drawingArea.clone(true); 

그러나 작동하지 않습니다.

복제 할 방법이 있습니까? 친절하게 도와주세요

Answer 1

당신이 지워지지 않습니다 게시 한 데모 스테이지 대신 그래픽을 지 웁니다. 도형을 복제하면 지시 사항이 없습니다.

당신은 단지 시각적 필요한 경우 CATALIN의 대답이 옳다 @

- 그러나 또 다른 옵션은 그래픽 삭제 대신 그래픽 저장소() 메소드를 사용하는 것입니다 http://createjs.com/docs/easeljs/classes/Graphics.html#method_store

은 기본적으로이 방법은 단지에 대한 내부 포인터를 설정 그래픽이 그려집니다. 각각의 추첨 후 저장함으로써, 추첨 호출 만이 이루어진다. 이것은 게시 한 데모와 동일한 응용 프로그램을 갖게 될 것이며 unstore() 나중에 전화해서 처음부터 그릴 그래픽을 재설정 할 수 있습니다. 이 방법으로 복제하면 작동합니다.

var erase = document.getElementById("toggle").checked; 
wrapper.updateCache(erase?"destination-out":"source-over"); 
//drawing.graphics.clear(); 
drawing.graphics.store(); // Don't draw anything before this point 

// Later 
var newGraphics = drawing.graphics.clone(); 
newGraphics.unstore(); // Might be redundant 
var shape = new Shape(newGraphics); 

그래픽을 복제해도 전체 그래픽 트리가 다시 생성되지 않고 지침을 저장하는 배열이 복제됩니다. 사실 이후에 개별 명령을 수정하면 해당 Graphics 객체의 복제본에 영향을 미칩니다.

희망이 있습니다.

Answer 2

그려진 선 모양이 drawingAreaClone의 자식이면 복제가 제대로 작동해야합니다. 또한,

var snapshot = new Image(); snapshot.src = canvas.toDataURL();

: 어떤 이유로 당신이 그와 함께 작동 할 수없는 경우

그러나, 당신은 캔버스의 스냅 샷을이 같은 img 형 가변적이고로 저장할 수 있습니다 당신은 전체 캔버스를 스냅 샷을하지 않으려면 초기 이미지를 저장 한 후, 당신은 이러한 추가 지침과 rectangle에 그리기 영역을 제한 할 수 있습니다

var ctx = canvas.getContext('2d'); 
canvas.width = snapshot.width; 
canvas.height = snapshot.height; 
ctx.drawImage(snapshot, rectangle.x, rectangle.y, rectangle.width, rectangle.height, 0, 0, rectangle.width, rectangle.height); 
snapshot.src = canvas.toDataURL();