创建js克隆一个形状与动态绘制图形

Question

我有一个舞台上的图像，我正在绘制并擦除它。使用下面的方法

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

现在我想利用用户图纸的克隆，但它不工作。我试过

var drawingAreaClone = drawingArea.clone(true); 

但它不工作。

有没有办法克隆它。请亲切地帮助

Answer 1

您发布不清除演示阶段，而是清除每帧的图形。如果你克隆形状，它将没有说明。

@克特林的答案是正确的，如果你只需要一个视觉 - 但另一种选择是使用图形存储（）方法，而不是清除图形：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不会重新创建整个图形树，只需克隆存储指令的阵列即可。事后修改个别指令会影响该Graphics对象的任何克隆。

希望有所帮助。

Answer 2

如果绘制的线形是drawingAreaClone的孩子，那么克隆应该正常工作。

但是，如果由于某种原因，你不能使其与工作，你可以把画布的快照，并将其保存为img型varaible这样的：

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

而且，如果你不想快照整个画布，你救了初始图像后，你可以在绘图区域限制与这些额外的指令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();