无法创建 Kinetic.js 阶段/层的准确副本答案

【问题标题】：Unable to create accurate copy of a Kinetic.js stage / layer无法创建 Kinetic.js 阶段/层的准确副本
【发布时间】：2012-10-22 10:23:10
【问题描述】：

我正在尝试构建更改历史记录，而不是 diff 样式历史记录，我选择保存整个对象。这会成为问题，因为对象的每个副本都会与原始对象一起更新。

Kinetic.Node.clone 方法对我来说似乎是正确的，但它似乎并没有达到我的预期。

伪代码：

var History = function(){
  var h = this;
  h.history = [];
  h.pointer = -1;
  h.save = function() {
    h.history = h.history.slice(0,h.pointer);
    h.history.push(im.Stage.createCopy());
    h.movePointer(1);
  };
  h.movePointer = function(diff) {
    h.pointer += diff;
    (h.pointer < 0 && (h.pointer = 0));
    (h.pointer >= h.history.length && (h.pointer = h.history.length-1));
    return h.pointer;
  };
  h.render = function() {
    im.Stage = h.history[h.pointer].createCopy();
    im.Stage.draw();
  };
  h.undo = function() {
    h.movePointer(-1);
    h.render();
  };
  h.redo = function() {
    h.movePointer(1);
    h.render();
  };
};

如何创建准确的舞台副本？

【问题讨论】：

IIRC，克隆不能很好地工作，因为基础参考保持不变，这对我来说也是一个问题。如果你想克隆整个舞台，为什么不能使用 toImage？
@mickylaaaad 简单输出到图像的问题在于它不存储当前状态，它只存储画布的渲染版本。克隆的问题似乎是已知的并且正在修复中，但即使使用工作版本，每次更改保存阶段也非常慢。为了加快速度，我已经开始保存图层数组，但这仍然相当低效。

标签： clone kineticjs revision-history

【解决方案1】：

准确表示的最佳方法是：

 var layers = stage.getChildren();

获取图层。然后做：

 var layerChildren = new Array();
 for(var i=0; i<layers.length; i++)
    layerChildren[i] = layers.getChildren();

每次你想保存一个状态。

这会将您的所有图层及其子图层存储在一个数组中。相当有效和准确。

现在您只需将图层列表和子列表保存在某处，然后您就可以在状态之间来回移动。

【讨论】：

【解决方案2】：

构建历史系统的最佳方法是使用layer.toJSON() 将每次操作后的层/元素作为序列化值存储到数组中。
如果您在从历史中恢复任何内容后在要显示/工作的图层和事件处理程序上使用图像，那么您将不得不将图像和事件处理程序重新附加到对象/图层/等，因为 toJSON() 不会将图像和事件处理程序存储为它会存储太大的数据。像这样建立你的历史：

首先，尝试在this question 上使用projeqht 的答案。
其次，您必须重新附加图像和事件处理程序。 markE 在this question 上提供的技巧让您轻松应对。

【讨论】：