用3个依赖项打造白板软件系统的实操经验

在寻找白板软件系统的过程中，我发现了一个令人头疼的问题：试用过的每一款白板应用，要么要求注册，要么得同步到云端，甚至还得加载高达2MB的JavaScript，可我仅仅只是想要一个简单的空白画布而已。直到我接触到MindNotes Pro这个绘图应用，它只依赖3个生产依赖：react、react-dom和zustand，没有Redux、styled-components、axios和lodash这些繁杂的东西，这就极大地满足了我的需求，我也由此深入研究了如何借助这3个依赖构建白板软件系统。

架构搭建

这款应用的绘图引擎集中在一个Canvas.tsx文件里，大概600行代码。它直接运用Canvas API来绘制，没有借助其他绘图库。状态管理则由3个小巧的Zustand商店负责：

- useDrawingStore：主要管理笔画、形状、工具，还有撤销/重做功能，并且能实现数据在localStorage中的持久化保存。

- useViewStore：承担着放大和平移视图的任务。

- useThemeStore：负责自动或者手动的主题切换，还能检测系统主题。

关键技术决策解析

1. Canvas API与SVG的抉择：Canvas提供了硬件加速的2D绘图能力，能实现像素级别的精准控制。虽说SVG在点击检测方面相对简单，但Canvas在处理成千上万的笔触时，不会带来DOM方面的额外开销，所以最终选择了Canvas。

2. Redux状态管理考量：由于整个应用状态小于1KB，没必要使用Redux那种需要大量样板代码的方式。一个useDrawingStore就能持有所有绘图状态，一旦状态变化，订阅机制会触发Canvas重绘。

3. 不依赖外部CDN：所有内容，像字体、图标，甚至用于纸张背景的SVG噪声纹理，都打包进了应用。这样做的好处是，在中国地区使用时，无需VPN就能正常访问。

4. 温暖羊皮纸设计风格：摒弃了常见的冷蓝色或灰色用户界面，采用温暖的地球色调色板，比如#f5f0e8作为背景色，#c47a5a作为突出色，还利用SVG分形噪声模拟纸张纹理。

丰富的功能特点

1. 画笔类型多样：拥有笔、荧光笔、铅笔、书法笔、虚线笔、发光笔这6种画笔类型。

2. 绘图工具齐全：包含选择、画笔、橡皮擦、平移、矩形、圆形、文本、线条、箭头这9种绘图工具。

3. 导出格式丰富：支持PNG、JPG、PDF、SVG、Word、JSON这6种导出格式。

4. 便捷的数据保存：具备自动保存到localStorage的功能。

5. 撤销重做：可实现50步的撤销/重做操作。

6. 导航辅助：提供缩放和小地图导航功能。

7. 主题切换：深色模式支持系统检测自动切换。

8. 设备兼容：支持触摸操作，适用于平板电脑和手机。

应用成果展示

1. 包尺寸：压缩后约160KB。

2. 依赖数量：仅3个。

3. 外部CDN调用次数：0次。

4. 构建时间：约2秒。

通过MindNotes Pro这款应用，我们可以清晰地看到借助react、react-dom和zustand这3个依赖构建白板软件系统的可行性与优势，无论是简洁的架构、高效的性能，还是丰富的功能，都为我们在相关开发领域提供了很好的参考。希望这些经验能给同样在探索相关技术的朋友一些启发，也期待心玥科技在类似的软件研发中能借鉴这些思路，为用户带来更优质的产品。