Anki图像遮挡工具中多边形撤销功能的技术分析

问题背景

在Anki的图像遮挡(Image Occlusion)功能中，用户反馈了一个关于多边形工具撤销行为异常的问题。当用户尝试撤销未完成的多边形绘制时，系统却意外删除了之前创建的矩形遮挡区域，而不是预期的只撤销当前正在绘制的多边形线段。

技术原理

图像遮挡工具基于fabric.js库实现，该库提供了强大的画布交互功能。在实现撤销/重做功能时，系统需要跟踪画布上所有可撤销的操作状态。当前实现中，工具只将矩形(rect)、椭圆(ellipse)、文本(i-text)和组合(group)等形状类型识别为可撤销对象。

问题根源

通过分析代码发现，问题出在工具对可撤销形状类型的判断逻辑上。在tool-undo-redo.ts文件中，shapeType数组定义了系统识别的可撤销形状类型，但最初版本未包含"line"(线段)和"polygon"(多边形)类型。这导致系统无法正确跟踪多边形绘制过程中的中间状态。

解决方案

开发人员提出了一个简单的修复方案：将"line"和"polygon"类型添加到可撤销形状列表中。这个修改使得撤销系统能够识别多边形绘制过程中的每条线段作为独立的可撤销操作。

const shapeType = ["rect", "ellipse", "i-text", "group", "line", "polygon"];

深入思考

虽然这个修改解决了基本问题，但多边形工具的撤销行为可能需要更精细的处理：

1. 绘制过程中的撤销：理想情况下，撤销应该逐步移除最后绘制的线段，而不是一次性移除整个未完成的多边形
2. 完成后的撤销：对于已闭合的多边形，撤销应该移除整个形状
3. 性能考量：频繁记录绘制过程中的中间状态可能影响性能，需要权衡实时性和资源消耗

最佳实践建议

对于类似绘图工具的开发，建议：

1. 明确定义每种工具的撤销粒度
2. 为不同绘制阶段(开始、进行中、完成)实现差异化的撤销逻辑
3. 考虑使用命令模式来管理复杂的撤销/重做操作
4. 对频繁的中间状态进行优化，避免不必要的内存消耗

总结

这个案例展示了在复杂交互工具开发中，撤销/重做功能实现需要考虑特定工具的行为特性。简单的类型扩展虽然能解决表面问题，但更完善的解决方案可能需要针对不同工具设计专门的撤销策略。这也提醒开发者在设计撤销系统时，应该全面考虑所有工具类型的使用场景。