Javascript 如何在kineticjs中创建撤消重做？

有没有简单的方法可以在Kineticjs中创建undo-redo函数？ 我在中找到了HTML5的撤销管理器，但我不知道如何放入Kineticjs，请帮助我。

---

谢谢。

我不熟悉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'
    );
}

将删除所有注释，并在撤消管理器中注册两种方法：

撤消功能（将创建删除的撤消）

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

这两种功能都很简单：

_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
    // ...
}

---

如您所见，数据对象（注释数组）被传递用于创建和删除。您也可以对单个对象执行相同的操作。

我能够实现一个基于。我还使用了其中的一些代码作为示例来绘制矩形，因此将它们和Chtiwi作为积分

我的解决方案中唯一的区别是我使用toJSON（）将每个层状态存储在一个数组中，而不是将toDataURL（）存储在画布上。我认为toJSON（）比toDataURL（）更需要，以便能够序列化在画布上存储每个操作所需的所有数据，但我不是100%同意，因此如果其他人知道，请留下评论

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

函数makeHistory（）{
historyStep++；
if（历史步长<历史长度）{
history.length=历史步长；
}
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);
    }
}

函数撤消历史记录（）{
如果（历史步骤>0）{
历史步骤--；
破坏层（）；
layer=Kinetic.Node.create（历史记录[historyStep]，“容器”）
阶段。添加（层）；
}
}
函数redoshistory（）{
if（历史步长<历史长度-1）{
historyStep++；
破坏层（）；
layer=Kinetic.Node.create（历史记录[historyStep]，“容器”）
阶段。添加（层）；
}
}

---

这是我的建议。别忘了初始化数组，并将计数器向上移动。祝你好运

我已经为该功能编写了一个类：

---

要解决事件侦听器问题，请制作克隆

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

$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=函数（）{
如果（$scope.historyStep>0）{
$scope.historyStep--；
$scope.topLayer.destroy（）；
如果（$scope.historyStep==0）{
$scope.topLayerAdd（2）；//将放置空层
}
否则{
var layer=$scope.history[$scope.historyStep-1].clone（）；
$scope.topLayerAdd（1层）；
} 
$scope.topLayer.draw（）；
} 
};
$scope.redoObject=函数（）{
如果（$Sope.EngEngess）没有问题，请考虑接受我的答案，如果它对你有用。但是它没有保存事件，因为这个例子是层。在（“点击”，“函数”（{}）”上，是否有任何方法来保存事件？我更新了jsFaldL。每次撤消/重做函数后。^注意，这是必要的，因为每次撤消/重做都要销毁/删除绑定了drawRect（）函数的层。使用JSON创建新层时，必须再次调用drawRect（）将单击事件重新绑定到新层。