Question

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

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

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

Answer 1

准确表达的最好方法是：

 var layers = stage.getChildren();

获取图层。然后做：

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

每次要保存状态时。

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

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

Answer 2

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

首先，尝试在this question上使用projeqht的答案。
第二，你将不得不重新附加图像和事件处理程序。通过this question上的 markE 提供的技巧，您可以轻松处理它。

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

2 个答案: