Question

有什么简单的方法可以在Kineticjs中创建撤消重做功能吗？我在https://github.com/ArthurClemens/Javascript-Undo-Manager找到了HTML 5的撤销管理器，但我不知道如何放入Kineticjs，请帮助我。谢谢。

Answer 1

我能够基于post by Chtiwi Malek at CodiCode实现一个简单的解决方案。我还使用了这个problem中的一些代码作为绘制矩形的例子，所以我认为它们和Chtiwi一样。

我的解决方案的唯一区别是我使用toJSON（）将每个图层状态存储在数组中而不是画布上的toDataURL（）。我认为在toDataURL（）上需要toJSON（）才能序列化在画布上存储每个动作所需的所有数据，但我不是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();  
  } 
};

非常适合我。

如何在kineticjs中创建Undo-Redo？

4 个答案: