图形编辑器：工具管理和切换

,大家好，我是前端西瓜哥。今天我们看看对于一款图形编辑器，应该怎么去实现工具，比如绘制矩形、选中工具，以及如何去管理它们的。,一款编辑器，有两个很重要的方面，一个是性能，另一个是架构。,因为不知道用户会在画布上画上多少图形，所以需要在渲染引擎上下很大的功夫，去提高绘制的性能。性能决定了编辑器的上限，这也是为什么很多编辑器选择了 Canvas 作为绘制方案。,另一个则是架构，编辑器很复杂，即便是看上去很简单编辑器。因为里面的模块非常多，比如工具管理模块、缩放管理、历史记录、图形树维护、辅助线、标尺、设置、视口管理、热键、光标维护等等。如果模块化不够好，就会导致代码扩展性差，加功能会非常痛苦。,今天西瓜哥谈谈如何设计管理工具类，管理不同的工具。,工具的交互，通常会集中于用户的鼠标操作。,比如绘制矩形，按下鼠标，会确定矩形的 x、y 值，然后拖拽鼠标，调整矩形的宽高，最后放开鼠标，矩形的形状就确认好了，并将这个绘制矩形的操作记录到历史操作中。如下图：,,所以，工具类（Tool）的设计为：,有点像我们 Rect 和 Vue 中的组件的概念。这是因为工具类本质也是 在生命周期内触发一些钩子（hook），拿到一些信息。,type 表示工具名称，是一个标识符，切换工具时会用到。,active 方法会在切换为当前工具时调用，通常会做的事情有：,inactive 会在切换为其他工具时调用，通常就是将光标设置为默认值，取消监听器。,start 是鼠标按下事件，此时要记录一些初始状态，后面的事件需要基于这个初始状态进行计算。这里其实我没用鼠标事件，而是用了 pointer 指针事件，一种适用范围更广的事件，除了鼠标事件，还支持触控笔和触摸屏幕等场景。因为大家习惯鼠标事件，后面我都用鼠标事件来描述。,drag 就是鼠标拖拽事件。end 是鼠标释放事件。,最后是比较特殊的 moveExcludeDrag，代表除了拖拽场景的鼠标移动，比如选择工具，悬停在一个图形上，我们就可以用这个事件来判断是哪个图形被选中，对它进行高亮。,这就是最基本的工具类，在此上我们可以进行进一步地封装，比如更改光标样式，我们可以配个 normalCursor、dragCursor 属性，让调用者帮我们统一设置光标样式。,这里的调用者就是工具管理类。,工具管理类支持的能力：,ToolManager 实现如下：,工具管理类基础的设计就是这样。因为是基于生命周期去设计的，所以看起来挺像 React、Vue 的组件写法的。