使用命令模式封装绘图操作，通过undoStack和redoStack实现多级撤销重做，结合合并操作、快照与差分存储优化性能，确保命令可逆且状态还原准确。
实现一个支持多级撤销的绘图应用，关键在于对用户操作进行有序记录，并能按顺序回退和重做。核心思路是使用命令模式结合历史栈来管理绘图动作。
1. 使用命令模式封装绘图操作
将每个可撤销的操作（如画线、填充、删除等）封装成一个命令对象。每个命令包含执行（execute）和撤销（undo）方法。
例如，绘制一条线可以定义为：
class DrawLineCommand {
constructor(start, end, canvas) {
this.start = start;
this.end = end;
this.canvas = canvas;
this.imageBefore = null; // 用于恢复背景
}
execute() {
// 保存当前画布状态（用于撤销）
this.imageBefore = this.canvas.getImage();
this.canvas.drawLine(this.start, this.end);
}
undo() {
// 恢复之前保存的图像
if (this.imageBefore) {
this.canvas.restoreImage(this.imageBefore);
}
}
}
2. 维护撤销与重做栈
创建两个数组：一个用于存储已执行的操作（undoStack），另一个存储被撤销的操作（redoStack）。
用户操作时：
- 执行新命令后，将其推入 undoStack，清空 redoStack
- 触发撤销时，从 undoStack 弹出命令并调用 undo()，同时推入 redoStack
- 触发重做时，从 redoStack 弹出命令并重新 execute()，再推回 undoStack
3. 处理连续操作与性能优化
频繁的小操作（如自由笔画）会产生大量命令，影响性能和撤销粒度。解决方案包括：
- 合并连续绘制：在一定时间间隔内的连续线条合并为一个命令
- 快照机制：定期保存画布完整状态，限制最大撤销步数
- 差分存储：只记录变化区域而非整个画布，节省内存
4. 集成到绘图流程
在用户完成一个完整操作（如鼠标抬起）后，生成对应命令并执行：
function onDrawingComplete(start, end) {
const command = new DrawLineCommand(start, end, canvas);
command.execute();
history.push(command); // 加入历史管理器
}
撤销和重做按钮调用 history.undo() 和 history.redo() 即可。
基本上就这些。只要把操作抽象成可逆的命令，再用栈管理执行顺序，多级撤销就能稳定运行。关键是保证每个命令的 undo 能准确还原状态，避免累积误差。
