Question

我在舞台上有一个图像，我正在画它并删除它。使用以下方法

现在我想要删除用户绘图，但它不起作用。我试过了

 var drawingAreaClone = drawingArea.clone(true);

但它不起作用。

有没有办法克隆它。请帮助

Answer 1

如果绘制的线条形状是drawingAreaClone的子元素，那么克隆应该可以正常工作。

但是，如果由于某种原因你无法使用它，你可以拍摄画布的快照并将其保存为img类型，如下所示：

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();

Answer 2

您发布的演示不会清除舞台，而是每帧清除图形。如果克隆形状，则没有说明。

@ Catalin的答案是正确的，如果你只需要一个视觉 - 但另一种选择是使用Graphics store（）方法而不是清除图形：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对象的任何克隆。

希望有所帮助。

使用动态绘制的图形创建js clone一个Shape

2 个答案: