在canvas中使用fabric.js撤消和重做命令

我想在我的小网站中使用undo和redo命令，我使用fabric.js，任何人都有任何想法如何做到这一点，以下是我的code.on点击撤消&重做按钮我试图撤消&重做画布的对象这是爵士小提琴链接在canvas中使用fabric.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); 
}); 
    });

来源

2013-09-25 Sanjay Nakate

使用这些[链接]（http://stackoverflow.com/questions/15516218/how-to-handle-undo-redo-event-in-javascript），[链接]（http://jsfiddle.net/ jfriend00/6qyS6 /）我相信这些对你有帮助。 – John

参见http://stackoverflow.com/questions/6386743/implementing-undo-in-a-web-app。 –

查看[这个问题]（http://stackoverflow.com/questions/25357895/using-stateproperties-and-hasstatechanged-to-implement-undo-red-in-fabric-js）一个工作，但未完成的方法。 – fzzylogic

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

    } 

});

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

来源

2015-10-31 11:07:39

在canvas中使用fabric.js撤消和重做命令

回答

相关问题