如何创建kineticjs撤消，重做？(How to create Undo-Redo in kin

有没有简单的方法如何在Kineticjs创建撤销重做功能？我已经找到了撤消经理在HTML 5 https://github.com/ArthurClemens/Javascript-Undo-Manager ，但我不知道如何把在Kineticjs，请帮助我。谢谢。

Answer 1:

我能基于一个实现一个简单的解决方案在CodiCode后由Chtiwi马利克。我还使用一些代码从这个问题作为一个例子来绘制矩形，所以学分去给他们和Chtiwi。

在我的解决方案，唯一的区别是使用的我的toJSON（）到每一层的状态存储在数组中，而不是toDataURL（）在画布上。我认为的toJSON（）需要在toDataURL（）能够序列化所有需要存储在画布上的每个动作的数据，但我不是这个100％，因此，如果有人知道请发表评论。

function makeHistory() {
    historyStep++;
    if (historyStep < history.length) {
        history.length = historyStep;
    }
    json = layer.toJSON();
    history.push(json);
}

叫你要保存的一个步骤撤消或重做此功能每次。就我而言，我呼吁每一个mouseUp事件此功能。

绑定这两个函数的撤销/重做事件。

function undoHistory() {
    if (historyStep > 0) {
        historyStep--;
        layer.destroy();
        layer = Kinetic.Node.create(history[historyStep], 'container')
        stage.add(layer);
    }
}

function redoHistory() {
    if (historyStep < history.length-1) {
        historyStep++;
        layer.destroy();
        layer = Kinetic.Node.create(history[historyStep], 'container')
        stage.add(layer);
    }
}

这里的的jsfiddle 。不要忘了初始化数组和反加紧顶部。祝好运！

Answer 2:

我不熟悉KineticJS，但做法应该是类似于提供的演示（也使用画布）。

也许是另一个例子帮助。比方说，我有一个应用程序来创建/移动/删除颜色的形状，代表音符。我有办法单击并拖动，突出一个选择的笔记。按下键盘上的Delete调用函数onDeleteGroup：

onDeleteGroup: function(gridModel) {
    // collect all notes in an array
    // ...
    this._deleteGroup(notes);
    this.undoManager.register(
        this, this._createGroup, [notes], 'Undo delete',
        this, this._deleteGroup, [notes], 'Redo delete'
    );
}

所有的笔记都将被删除，并且2种方法与撤消管理器注册：

撤消功能（撤消删除将是创建）
重做功能（撤消后/创建将再次被删除）

这两个函数是简单的：

_deleteGroup:function(notes) {
    // removes each note from the model
    // thereby removing them from the canvas
    // ...
}

_createGroup:function(notes) {
    // add each note to the model
    // thereby adding them to the canvas
    // ...
}

正如你所看到的，数据对象（笔记阵列）传来传去创造和删除。你可以操纵奇异的对象相同。

Answer 3:

我写了一个类的功能： http://www.sebastianviereck.de/en/redo-undo-class-kinetic-js/

Answer 4:

为了解决事件侦听器的问题，通过使克隆上工作

$scope.makeHistory=function() { 
  $scope.historyStep++;
  if ($scope.historyStep < $scope.history.length) {
      $scope.history.length = $scope.historyStep;
  } 
  var layerC = $scope.topLayer.clone(); 
  $scope.history.push(layerC);   
};

 $scope.undoObject = function(){  
  if($scope.historyStep > 0) {
    $scope.historyStep--;
    $scope.topLayer.destroy(); 
    if($scope.historyStep==0){
      $scope.topLayerAdd(2); // will put empty layer
    }
    else{
      var layer = $scope.history[$scope.historyStep-1].clone();
      $scope.topLayerAdd(1,layer);
    } 
    $scope.topLayer.draw();
  } 
};

$scope.redoObject = function(){  
  if($scope.historyStep <= $scope.history.length-1) {  
    $scope.historyStep++;
    $scope.topLayer.destroy();  
    var layer = $scope.history[$scope.historyStep-1].clone(); 
    if($scope.historyStep==0){
      $scope.topLayerAdd(2);   // will put empty layer
    }
    else{
      $scope.topLayerAdd(1,layer); 
    } 
    $scope.topLayer.draw();  
  } 
};

完美的作品对我来说。

文章来源: How to create Undo-Redo in kineticjs?