Отменить и повторить команду на холсте с помощью fabric.js

Я хочу использовать команду отмены и повтора на своем небольшом веб-сайте, я использую Fabric.js, у кого-нибудь есть идеи, как это сделать, ниже приведен мой код. Нажмите кнопку отмены и повтора, я пытаюсь отменить и повторить объект холст Это ссылка js fiddle

Вот ссылка на скрипку

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

javascript canvas jquery fabricjs
person Sanjay Nakate    schedule 25.09.2013    source источник
comment
используйте эти ссылки,ссылка Я уверен, что они будут вам полезны.   -  person John    schedule 25.09.2013
comment
См. также stackoverflow.com/questions/6386743/ .   -  person Arthur Clemens    schedule 26.09.2013
comment
См. этот вопрос для рабочего но неотшлифованный подход.   -  person fzzylogic    schedule 28.08.2014

Ответы (2)


arrow_upward
0
arrow_downward 

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



}

Это прекрасно работает, попробуйте!!

person Shaik Taher    schedule 16.09.2018
comment
Добро пожаловать в Stack Overflow! Пожалуйста, не отвечайте только исходным кодом. Постарайтесь дать хорошее описание того, как работает ваше решение. См.: Как написать хороший ответ?. Спасибо - person sɐunıɔןɐqɐp; 16.09.2018

arrow_upward
-1
arrow_downward

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

    }

});

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

person Vipin Sharma    schedule 31.10.2015