Question

当我使用多种方式添加对象时，让“撤消/重做”工作有些麻烦。我的编辑器有一个添加图像，背景和文本的按钮。

因此，我相信（如果我错了，请纠正我）每次我调用添加图像，背景或文本的函数以及每次修改画布时都需要调用updateModifications（）函数。我可以肯定地说，问题是整个文档中多次调用updateModifications。

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

这会在代码based on zaid's SO question时产生一些问题；

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

Answer 1

When you call addText(), you are calling updateModifications() and then have an event listener 'object:added' also calling updateModifications(). Either remove the event listener or simply dont call updateModifications() in addText().

Not sure then mate but this works for me in fabric 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)
  }
};

Fabric.js撤消重做功能一次导致2个步骤

1 个答案: