KineticJS 撤消图层:撤消时图层不会消失?

2022-01-17 00:00:00 javascript html html5-canvas kineticjs

我在 Canvas HTML5 中的设计器绘图工具上有一个特定问题.我正在开发一个动作历史系统(撤消和重做).我正在根据 projeqht 对 的回答构建我的系统这个问题 序列化历史数组中的层.核心，解决方案的想法是有效的，但我有一个奇怪的问题.当我点击撤消时，它会创建新图层，但旧图层并没有消失.我会附上我的源代码，我也会附上屏幕截图，这样你就可以看到发生了什么:

I have a specific problem on my designer drawing tool in Canvas HTML5. I am developing an action history system (Undo & Redo). I am building my system on projeqht's answer on this question with serializing the layers in history array. The core, the idea of the solution is working but I have a strange problem. When I hit Undo it creates the new layers, but the old ones are not disappearing. I will attach my sourcecode and I will attach screenshots as well so you can see what is happening:

源码:

var history = Array(null);

var historyStep = 0;

var historyStep = 0;

var arrayNonRemovable = Array('moveLayer', 'scaleFromOuterNode', 'scaleFromInnerNode', 'rotateFromOuterSign', 'rotateFromInnerSign' );

var arrayNonRemovable = Array('moveLayer', 'scaleFromOuterNode', 'scaleFromInnerNode', 'rotateFromOuterSign', 'rotateFromInnerSign' );

函数 removeLayerByUndoRedo(l){如果 (l){l.destroy();l.draw();阶段.draw();}}

function removeLayerByUndoRedo(l) { if (l) { l.destroy(); l.draw(); stage.draw(); } }

function makeHistory(layer, before, after, operation){历史步骤++；如果(历史步骤

函数 undoHistory(){如果(历史步骤> 0){版本=历史[历史步骤]；层=版本.层；var beforeState = history[historyStep].before;

function makeHistory(layer, before, after, operation) { historyStep++; if (historyStep

function undoHistory() { if (historyStep>0) { version = history[historyStep]; layer = version.layer; var beforeState = history[historyStep].before;

    removeLayerByUndoRedo(layer);
    var layer = Kinetic.Node.create(beforeState, 'container');
    stage.add(layer);

    stage.draw();
    historyStep--;
}

}

Array.prototype.contains = function(obj) {返回 this.indexOf(obj) > -1;};

Array.prototype.contains = function(obj) { return this.indexOf(obj) > -1; };

截图:步骤 1. 创建对象，其中包含更多组，内部有形状(线条、矩形、SVG 绘图)步骤 2、3、4、5:将对象移动到不同的位置(左上、左下、右下和右上):第 6 步:第一次按 Undo(很好地删除旧层并从历史中很好地重新创建它):第 7 步:第二次按 Undo(从历史创建新图层，但不删除旧图层)第 8、9 步:再按 Undo 2 次(与第 7 步相同:创建新图层但保留旧图层):

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 步中删除的图层引用是原始图层，在以下步骤中这些是新图层，所以引用应该是新的?

Am I doing something wrong? I think it must be something with the reference to the new layers as in Step 6 the removed layers reference is the original layer, in the following steps those are new layers, so reference should be a new one?

推荐答案

问题如下:我将图层引用存储在历史数组中.因此，当我创建一个对象时，图层引用存储在历史 [1] 中.我将它移动到 3 次，我将在历史记录中为所有步骤提供相同的参考.当我按下撤消时，我正在销毁从存储的引用中调用它的层，并创建一个新的引用是新的.在历史上我仍然有旧的参考，它指向 NULL.这就是问题所在.

Here's what the probloem was: I store the layer reference in the history array. So when I create an object the layer reference is stored in history[1]. I move it to 3 times, I will have the same reference in the history for all the steps. When I press undo, I am destroying the layer calling it from the stored reference and I create a new one which reference is a new one. In the history I still have the old reference, which points to NULL. This was the problem.

我已经修复了它破坏了按名称调用它的旧层.(这仅在您为图层提供唯一名称时才有效):stage.find('.'+layer.getName())[0].destroy()

I have fixed it destroying the old layer calling it by name. (This only works if you give unique names to layers): stage.find('.'+layer.getName())[0].destroy()

相关文章