Javascript 使用fabric.js在画布中执行撤消和重做命令

我想在我的小网站中使用undo和redo命令，我正在使用fabric.js，任何人都知道如何做，下面是我的代码。单击undo&redo按钮，我正在尝试撤销&redo画布的对象这是js fiddle链接

---

您可以使用javascript和jquery编写自己的撤销和重做函数，如下所示：

// --------------------------------undo+redu--------------------------
var vall=20;
var l=0;
var flag=0;
var k=1;
var yourJSONString = new Array();
canvas.observe('object:selected', function(e) {
    //yourJSONString = JSON.stringify(canvas);
    if(k!=20)
    {
        yourJSONString[k] = JSON.stringify(canvas);
        k++;
        //$('#btn').show();
    }        
    j = k;
    var activeObject = canvas.getActiveObject();
});


$("#undo").click(function(){

  // counts the no of objects on canvas
  var objCount = canvas.getObjects().length;
  console.log("Undo"+objCount);

      if(k-1 >=0)
    {
        canvas.clear();
        canvas.loadFromJSON(yourJSONString[k-1]);
        k--;
        l++;
    }else

     {
         canvas.clear();

           k--;
           l++;
     }          
    canvas.renderAll();   

});

$("#redo").click(function(){
     // counts the no of objects on canvas
  var objCount = canvas.getObjects().length;
  console.log("redo"+objCount);

    if(l > 1)
    {
      if (objCount = 0) {
        canvas.clear();
        canvas.loadFromJSON(yourJSONString[k-1]);
        k++;
        l--;
        canvas.renderAll();

      }
      else{

        canvas.clear();
        canvas.loadFromJSON(yourJSONString[k+1]);
        k++;
        l--;
        canvas.renderAll();
      }

    }

});

这段代码将对画布上的每个更改执行撤消和重做。它将在每次更改时保存画布的状态，然后在需要时执行撤消和重做

var mods = 0;
//Undo Functionality
$scope.undo = function() 
{
    if (mods < $scope.state.length) {
    $rootScope.canvas.clear().renderAll();
    $rootScope.canvas.loadFromJSON($scope.state[$scope.state.length-1 - mods - 1]);         
    $rootScope.canvas.renderAll();        
    mods += 1;
    }
   }

  //Redo Functionality
    $scope.redo = function() 
    {
        if (mods > 0) {
        $rootScope.canvas.clear().renderAll();
        $rootScope.canvas.loadFromJSON($scope.state[$scope.state.length-1 - mods + 
     1]);
        $rootScope.canvas.renderAll();
        mods -= 1;
        }



}

---

这很好，试试看

使用这些，我相信它们对您很有帮助。另请参阅。有关有效但未经修饰的方法，请参阅。欢迎使用堆栈溢出！请不要只回答源代码。试着提供一个关于你的解决方案如何工作的很好的描述。请参阅：。谢谢

var mods = 0;
//Undo Functionality
$scope.undo = function() 
{
    if (mods < $scope.state.length) {
    $rootScope.canvas.clear().renderAll();
    $rootScope.canvas.loadFromJSON($scope.state[$scope.state.length-1 - mods - 1]);         
    $rootScope.canvas.renderAll();        
    mods += 1;
    }
   }

  //Redo Functionality
    $scope.redo = function() 
    {
        if (mods > 0) {
        $rootScope.canvas.clear().renderAll();
        $rootScope.canvas.loadFromJSON($scope.state[$scope.state.length-1 - mods + 
     1]);
        $rootScope.canvas.renderAll();
        mods -= 1;
        }



}