Fabric.js Undo Redo Функциональность, вызывающая 2 шага одновременно - PullRequest
Новая
       39

Fabric.js Undo Redo Функциональность, вызывающая 2 шага одновременно

0 голосов
/ 14 февраля 2019

У меня небольшие проблемы с выполнением Undo / Redo, когда я использую несколько способов добавления объектов.В моем редакторе есть кнопка для добавления изображений, фона и текста.

Поэтому, я считаю (пожалуйста, исправьте меня, если я ошибаюсь), мне нужно вызывать функцию updateModification () каждый раз, когда я вызываю функцию, которая добавляет изображение, фон или текст, а также каждый раз, когда холстмодифицируется.Я совершенно уверен, что проблема в том, что updateModification вызывается слишком много раз по всему документу.

function remove(){
  console.log(canvas.getActiveObject());
  var activeObjects = canvas.getActiveObjects();
      canvas.discardActiveObject()
      if (activeObjects.length) {
        canvas.remove.apply(canvas, activeObjects);
      }
      updateModifications(true);
}
canvas.on({
  'object:modified': function () {
    updateModifications(true);
  },
  'object:added': function() {
    updateModifications(true);
  }

});
function addText() {
  prodName = localStorage.getItem('storedName');
  var textObj = new fabric.IText(prodName, {
    fontSize: 22,
    top: 362.5,
    left: 262.5,
    hasControls: true,
    fontWeight: 'bold',
    fontFamily: '"Montserrat",sans-serif',
    fontStyle: 'normal',
    centeredrotation: true,
    originX: 'center',
    originY: 'center'
  });
  canvas.insertAt(textObj,0).setActiveObject(textObj);
  textToFront();
  canvas.renderAll();
  updateModifications(true);
}

Это создает некоторые проблемы, когда код основан на SO вопросе Зайда ; 

var mods = 0;
var state = [];
function updateModifications(savehistory) {
  if (savehistory === true) {
      myjson = JSON.stringify(canvas);
      state.push(myjson);
  }
}

undo = function undo() {
  if (mods < state.length) {
      canvas.clear().renderAll();
      canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
      canvas.renderAll();
      mods += 1;
  }
}

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

1 Ответ

0 голосов
/ 18 февраля 2019

Когда вы вызываете addText (), вы вызываете updateModification (), а затем получаете прослушиватель событий «объект: добавлен», также вызывающий updateModification ().Либо удалите прослушиватель событий, либо просто не вызывайте updateModification () в addText ().

Не уверен, тогда mate, но это работает для меня в ткани 2.5: 

var CanvasState = [];
var CanvasStateIndex = -1;
saveCanvas()

function refreshCanvas(){
  canvas.renderAll.bind(canvas);
}

function saveCanvas(){
  var newState = canvas.toJSON();
  CanvasState.push(newState);
  CanvasStateIndex = CanvasStateIndex +1;
  while (CanvasStateIndex < (CanvasState.length)-1){
    CanvasState.pop();
  }
}

function undo(){
  if (CanvasStateIndex >= 0){
    CanvasStateIndex = CanvasStateIndex -1;
    var jsonCanvas = CanvasState[CanvasStateIndex];
    canvas.loadFromJSON(jsonCanvas, refreshCanvas, function(o, obj){ 
    })
  } else{
    console.log('undo error CanvasStateIndex = '+CanvasStateIndex)
  }
}

function redo(){
  if (CanvasStateIndex < CanvasState.length -1){
    CanvasStateIndex = CanvasStateIndex +1;
    var jsonCanvas = CanvasState[CanvasStateIndex];
    canvas.loadFromJSON(jsonCanvas, refreshCanvas, function(o, obj){
    })
  }else{
    console.log('redo error CanvasStateIndex = '+CanvasStateIndex)
  }
};
...