撤销重做核心难点是“何时存、存什么”，Setter 属性可自动捕获变更时机，无需手动调用 saveState()；通过拦截 x、y、fill 等关键属性赋值，结合差异快照、操作聚合与生命周期管理，实现高效可控的历史记录。
在画布应用（如 Fabric.js、Konva 或自研 Canvas 编辑器）中，撤销重做功能的核心难点不是“存状态”，而是“何时存、存什么”。Setter 属性（即通过 Object.defineProperty 或 ES6 class setter 实现的属性赋值拦截）可自然捕获对象变更时机，无需手动调用 saveState()，让历史栈记录真正自动化。
用 setter 拦截关键属性变更
画布中可编辑对象（如 Shape、Text、Image）通常有 x、y、scaleX、fill、rotation 等属性。为这些属性添加 setter，即可在每次赋值时触发快照记录：
- 不修改业务代码逻辑：开发者仍写
obj.x = 100，setter 自动感知并归档 - 避免遗漏：拖拽、键盘微调、属性面板输入等所有途径均被覆盖
- 粒度可控：只对需参与撤销的属性设 setter，性能更优
设计带上下文的快照生成器
单纯深拷贝整个对象开销大且冗余。应结合 setter 参数生成最小差异快照：
- 在 setter 中记录变更字段名、旧值、新值（例如：
{ prop: 'fill', from: '#ff0000', to: '#00ff00' }） - 将多个连续 setter 调用合并为单次操作（如拖拽时高频更新
x/y，可用requestAnimationFrame聚合） - 支持批量操作标记（如“执行 Ctrl+Z 后的一组缩放+旋转”），避免原子操作过碎
与历史栈协同的生命周期管理
setter 不是孤立存在，需配合历史栈的 push/pop 行为保持一致性：
- 撤销/重做时，禁用 setter 的自动记录（否则会把还原动作又记进栈，造成死循环）
- 提供
disableAutoRecord()/enableAutoRecord()接口，在批量还原或初始化加载时使用 - 每个快照携带唯一操作 ID 和时间戳，便于调试和跨端同步（如协同编辑场景）
兼容原生与第三方库的适配技巧
若使用 Fabric.js 等成熟库，不建议直接改写其类原型。推荐组合式方案：
- 封装一层代理对象（Proxy），拦截对 fabric.Object 实例的 set 操作，再转发给原对象
- 利用 Fabric.js 的
set方法钩子（如object.on('changed', handler)），但注意它不覆盖所有 setter 场景（如直接赋值obj.left可能不触发） - 对自定义类统一继承基类（如
CanvasItem），在基类中集中定义受控 setter
不复杂但容易忽略：setter 记录的是“变更意图”，不是最终渲染结果。务必确保快照在渲染前完成，且与画布 render 周期解耦——比如在 requestIdleCallback 中批量提交快照，避免阻塞交互响应。
