f-star / svg-editor Goto Github PK

predictedCurve

全局快捷键的画布缩放功能，而不需要切换到 “放大镜” 工具来进行缩放。比如在绘制 path 的过程中，能够边缩放边绘制曲线，无疑用户体验更好。

暂定缩放画布快捷键：Ctrl + 滚轮 或 Command + 滚轮（MacOS）

待办清单

• 辅助线（hub）不再在实例化的时候挂载，而是提供一个 mount 进行挂载，这样方便管理
• Jest 配置优化，目前有不明原因的运行失败
• 涉及到观察者模式的，底层同意换成自己实现的 EventEmitter

问题

不考虑历史记录的影响，在钢笔工具的模式下，每次鼠标按下，需要记录

• 当前光标位置（this.x, this.y）。非拖拽移动的情况下，预测曲线要用到。
• 上一次鼠标按下时（this.prevX, this.prevY）。拖拽移动情况下，预测曲线要用到。

如果使用了 undo，会导致 path 丢掉最后的一段 curve（曲线），导致 this.x 和 this.y 以及 this.prevX, this.prevY 不再正确。

方案

1. 改为提取正在绘制的曲线（this.path）的最后一个点的位置替代。这样的话需要给 Path 类添加 tail 方法。因为移动事件触发高，我们可以给 tail 方法添加缓存。
2. 监听 undo 和 redo 事件

如题，需要设计一套方案来支持实现记录钢笔工具每一步操作，支持撤销和重做，并要考虑性能上的问题、复合贝塞尔问题等情况。

在实现绘制钢笔工具的预测曲线时，需要一个全新的非拖拽状态的移动事件，暂定为方法名为 moveNoPressed，在尝试往 toolManage.ts 文件添加这个功能代码时，发现代码的逻辑已经有些看不懂了，而且貌似也不好加这个新的方法。

于是决定梳理和重构一番。

PathDraw 负责显示绘制曲线的轮廓线，其下关联的 SegDraw 则负责控制下一个 seg 的参数设置（通过交互的方式）。PredictedCurve 则是预测下一段将要绘制的 Curve。因为是先开发 PathDraw 再开发的 PredictedCurve，所以出现了设计不合理的地方，PathDraw 也负责了预测线的部分功能：拖拽鼠标配置 seg 时，替代了 PredictedCurve 绘制出了下一段曲线（作为 PathDraw 绘制的轮廓线的一部分）

遵循单一职责原则，故重新进行代码的设计。