图形编辑器：揭秘历史记录的运作原理

2022-12-31 09:18:36

图形编辑器的历史记录功能：撤销与重做的秘密

在图形编辑的世界中，历史记录功能至关重要，它赋予了我们犯错并无畏地探索设计的自由。想象一下，你可以毫不费力地回到过去的某个时刻，轻松恢复意外撤消的更改，或是将错误的步骤纠正过来。这正是图形编辑器中历史记录的强大之处。

如何运作？

每次我们在图形编辑器中执行操作，软件都会捕捉当前状态的快照并将其存储为一个版本。这些版本按时间顺序排列，形成一个版本链，保存在撤销栈中。当我们点击撤销按钮时，软件会从撤销栈中弹出最后一个版本，并将其恢复到当前状态。同时，当前状态会被推入另一个栈中，称为重做栈。

通过这种巧妙的设计，我们可以自由地在编辑过程中撤销和重做操作，而不会丢失任何数据。撤销栈充当时间机器，让我们回到过去，而重做栈则充当未来之门，让我们探索不同的可能性。

数据结构揭秘

为了实现这种神奇的功能，我们使用了两个栈：

撤销栈： 保存当前状态之前的历史版本。
重做栈： 保存当前状态之后的版本。

当我们撤销时，软件会从撤销栈中弹出最后一个版本并将其恢复到当前状态。同时，当前状态会被推入重做栈。当我们重做时，相反的过程也会发生，从重做栈中弹出最后一个版本，将其恢复为当前状态并推入撤销栈。

代码示例

下面是实现撤销和重做功能的代码示例：

class History {
  constructor() {
    this.undoStack = [];
    this.redoStack = [];
  }

  saveState(state) {
    this.undoStack.push(state);
  }

  undo() {
    if (this.undoStack.length > 0) {
      const state = this.undoStack.pop();
      this.redoStack.push(state);
      return state;
    }
    return null;
  }

  redo() {
    if (this.redoStack.length > 0) {
      const state = this.redoStack.pop();
      this.undoStack.push(state);
      return state;
    }
    return null;
  }
}

const history = new History();

// 保存当前状态
history.saveState(currentState);

// 撤销操作
const previousState = history.undo();

// 重做操作
const nextState = history.redo();