创建js克隆一个带有动态绘制图形的Shape

Question

我在舞台上有一张图片，我正在绘制并擦除它。使用以下方法

现在我想克隆用户绘图，但它不起作用。我试过了

 var drawingAreaClone = drawingArea.clone(true);

但它不起作用。

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

Answer 1

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

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

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

此外，如果您不想拍摄整个 canvas，在保存初始图像后，您可以使用以下额外说明将绘图区域限制为 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 不会重新创建整个图形树，而只是克隆存储指令的数组。事后修改单个指令会影响该 Graphics 对象的任何克隆。

希望对您有所帮助。

创建js克隆一个带有动态绘制图形的Shape

Create js clone a Shape with dynamically drawn graphics

createjs

easeljs