1

您好，我有一个大画布，例如：5000px x 5000px 和许多绘画工具。我需要知道什么是解决undo功能的最佳解决方案，没有滞后或非常大的使用内存。现在我尝试使用方法创建每个mousedown保存我的画布到数组toDataUrl。

你认为这是一个好方法还是我需要寻找更好的方法来解决这个问题？

使用小画布和只有一种绘画工具 - 铅笔的示例：

http://codepen.io/anon/pen/azyPGN

html（部分）：

<canvas width="5000" height="5000" id="paint"></canvas>

保存和恢复部分代码：

var history = {
  redo_list: [],
  undo_list: [],
  saveState: function(canvas, list, keep_redo) {
    keep_redo = keep_redo || false;
    if(!keep_redo) {
      this.redo_list = [];
    }

    (list || this.undo_list).push(canvas.toDataURL());   
  },
  undo: function(canvas, ctx) {
    this.restoreState(canvas, ctx, this.undo_list, this.redo_list);
  },
  redo: function(canvas, ctx) {
    this.restoreState(canvas, ctx, this.redo_list, this.undo_list);
  },
  restoreState: function(canvas, ctx,  pop, push) {
    if(pop.length) {
      this.saveState(canvas, push, true);
      var restore_state = pop.pop();
      var img = new Element('img', {'src':restore_state});
      img.onload = function() {
        ctx.clearRect(0, 0, 600, 400);
        ctx.drawImage(img, 0, 0, 600, 400, 0, 0, 600, 400);  
      }
    }
  }
}
4

0 回答 0