Команда отмены и повтора в холсте с использованием fabric.js

Question

Я хочу использовать команду отмены и повтора на моем маленьком веб-сайте, я использую fabric.js, кто-нибудь есть идеи, как это сделать, следуя моему коду. & кнопку повтора я пытаюсь отменить & переделывать объект холста Это JS скрипка ссылка

Here is fiddle link

$(document).ready(function(){ 
var canvas = new fabric.Canvas('c'); 
    var colorSet="red"; 
    $("#svg3").click(function(){ 
    fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', function (objects, options) { 
      var shape = fabric.util.groupSVGElements(objects, options); 
    shape.set({ 
      left: canvas.width/2, 
      top: canvas.height/2, 
      scaleY: canvas.height/shape.width, 
      scaleX: canvas.width/shape.width 
     }); 
     if (shape.isSameColor && shape.isSameColor() || !shape.paths) { 
      shape.setFill(colorSet); 
     } else if (shape.paths) { 
      for (var i = 0; i < shape.paths.length; i++) { 
       shape.paths[i].setFill(colorSet); 
      } 
     } 

     canvas.add(shape); 
     canvas.renderAll(); 
     }); 
    }); 


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

yourJSONString = JSON.stringify(canvas); 
}); 
$("#redo").click(function(){ 
canvas.clear(); 
//alert(yourJSONString); 
canvas.loadFromJSON(yourJSONString); 
canvas.renderAll(); 
// alert(svgobj); 
}); 
    }); 

Answer 1

вы можете написать свои собственные отмены и повтор функции с помощью 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(); 
     } 

    } 

}); 

Этот код будет выполнять отменить и повторить для каждого изменения, сделанного на холсте. Он сохранит состояние холста при каждом изменении, а затем выполнит отмену и повтор при необходимости.