我在 Canvas HTML5 中的设计器绘图工具上遇到了一个特定问题。 我正在开发一个动作历史系统（撤消和重做）。 我正在构建我的系统projeqht的回答这个问题 https://stackoverflow.com/questions/16096875/how-to-create-undo-redo-in-kineticjs序列化历史数组中的层。解决方案的核心思想是有效的，但我有一个奇怪的问题。当我点击“撤消”时，它会创建新图层，但旧图层不会消失。我将附上我的源代码，我还将附上屏幕截图，以便您可以看到发生了什么：
源代码：
var history = Array(null);
var 历史步数 = 0;
var arrayNonRemovable = Array('moveLayer', 'scaleFromOuterNode', 'scaleFromInnerNode', 'rotateFromOuterSign', 'rotateFromInnerSign' );
函数removeLayerByUndoRedo(l) { 如果（l） { l.destroy(); l.draw(); 阶段.draw(); } }
函数 makeHistory(图层、之前、之后、操作) { 历史步骤++； if (历史步骤
函数撤销历史记录() { if (历史步长>0) { 版本=历史[历史步骤]; 层=版本.层; var beforeState = 历史[historyStep].before;
removeLayerByUndoRedo(layer);
var layer = Kinetic.Node.create(beforeState, 'container');
stage.add(layer);
stage.draw();
historyStep--;
}
}
Array.prototype.contains = 函数(obj) { 返回 this.indexOf(obj) > -1; };
Screenshots:
Step 1. create the object, which contains more groups with shapes inside (lines, rectangles, SVG drawing)
Steps 2, 3, 4, 5: Moving object to different positions (top left, bottom left, bottom right and top right):
Step 6: Press Undo for first time (removes the old layer well and recreates it from history well):
Step 7: Press Undo for second time (creates new layer from history, but old layer is not removed)
Step 8, 9: Press Undo for another 2 times (same happens as in Step 7: creates new layer but old ones remain):
难道我做错了什么？我认为这一定是对新图层的引用，因为在步骤 6 中，删除的图层引用是原始图层，在接下来的步骤中，这些是新图层，所以引用应该是新图层？
将图层序列化为 JSON 后，您必须执行以下操作
yourLayer.destroy()
您的代码似乎是这样做的，所以我需要更多代码来找出问题所在。
一种长远的可能性：
我看到你的 undoHistory 引用了一个全局的layer并且还创建了一个本地layer。尝试像这样重构你的代码，以确保你没有混合不同的“层”：
function undoHistory(){
if (historyStep>0){
var version = history[historyStep];
var beforeState = history[historyStep].before;
var layer1 = version.layer;
removeLayerByUndoRedo(layer1);
var layer2 = Kinetic.Node.create(beforeState, 'container');
stage.add(layer2);
stage.draw();
historyStep--;
}
}
您不需要在 l.destroy() 之后执行 l.draw() 或 stage.draw() ，因为无论如何图层都会被销毁，并且当图层被销毁时舞台会自动更新。
这是一个 layer.destroy 的工作示例，在您发布更多代码之前可能会有所帮助：
http://jsfiddle.net/m1erickson/FSBbN/ http://jsfiddle.net/m1erickson/FSBbN/