深度克隆是实现canvas撤销/重做最直接可控的方式，通过每次绘制完成时对整个状态树做不可变深拷贝并压入undo栈；必须深克隆以防历史快照被后续修改污染，推荐用structuredclone()或json.parse(json.stringify())配合toraw()剥离proxy。
深度克隆是实现 Canvas 撤销/重做功能最直接、可控的方式之一，尤其适用于状态结构较深、对象嵌套多、且不依赖第三方绘图库（如 fabric.js）的自研渲染系统。它的核心不是记录“操作”，而是保存“完整快照”——每次用户完成一次有意义的绘制动作（比如一笔落定、一个图形添加、背景色变更），就对当前整个可渲染状态树做一次不可变深拷贝，并压入 undo 栈。
为什么必须用深度克隆？
Canvas 本身不维护状态树，2D 上下文（ctx）是命令式、一次性执行的。要支持回退，你得自己建模“当前画了什么”。如果只做浅拷贝或引用传递：
- 后续修改会污染历史快照，撤销后画面错乱；
- 嵌套对象（如路径点数组、图层配置、变换矩阵）仍共享内存地址；
- Vue/React 响应式代理对象（Proxy）若未剥离，克隆后仍带副作用，无法真正隔离。
如何正确克隆 Canvas 状态树？
状态树通常包含三类关键数据：
-
图元数据：如
paths: [{ points: [{x,y}], color, lineWidth }]、images: [{ src, x, y, scale }]； - 画布元信息：背景色、缩放比例、平移偏移、全局 alpha、混合模式等；
- 逻辑配置：当前选中对象 ID、活动工具类型、是否启用网格等非渲染但影响行为的状态。
推荐使用 structuredClone()（现代浏览器支持）或降级方案：
const snapshot = typeof structuredClone === 'function' ? structuredClone(toRaw(state)) : JSON.parse(JSON.stringify(toRaw(state)));
注意：toRaw() 是 Vue3 中剥离 Proxy 的必要步骤；若用纯 JS 对象，直接克隆即可。
栈管理与状态跳转逻辑
维护两个栈和一个当前索引指针：
-
undoStack: Array<statesnapshot></statesnapshot>—— 已执行操作的历史快照（从旧到新）； -
redoStack: Array<statesnapshot></statesnapshot>—— 被撤销操作暂存区； - 每次
undo()：弹出undoStack最后一项 → 设为当前状态 → 推入redoStack； - 每次
redo()：弹出redoStack最后一项 → 设为当前状态 → 推入undoStack； - 任何新操作发生时，清空
redoStack，并将新快照推入undoStack。
性能与边界优化建议
全量克隆虽简单，但需防范滥用：
-
触发时机要克制：不在
mousemove或input中频繁快照，而是在笔迹结束（mouseup/touchend）、图元确认（Enter/点击完成）、配置提交后调用saveSnapshot()； -
限制栈长度：例如最多保留 50 步，超出则
shift()最老快照； - 排除非必要字段：如临时高亮标记、动画过渡值、DOM 引用等，应在克隆前从状态树中剔除；
- 大图层可选差量：若状态含 Base64 图片或大型 canvas 导出数据，可单独存储其 hash + blob URL，快照中只记引用，避免重复拷贝二进制。
