太卷了，这款高颜值的创意图片编辑器，功能强大而且还开源免费

Hello，大家好，这里是茶无味的一天。

最近这段时间，又见到一些开源图片编辑器的新面孔了，可谓是勃勃生机万物竞发，让我不禁感叹这条赛道是越来越卷啦~

记得两年多前我刚开始接触编辑器开发的时候，还并未想到最终会开源。彼时翻遍开源社区也没有一个功能完善的项目，所以只好自己硬着头皮摸索、一点点开发，才有了如今的迅排设计。

在这里也重新宣传下，我的愿景是打造功丰富又强大的一套在线设计工具，虽然只是一个小前端，但是界面细节也是精益求精，在我的个人审美里，颜值也还算可以的。欢迎老朋友持续关注更新动态，新朋友给项目点点 Star 加速更新呀~

迅排设计官网 | Github 开源地址: palxiao/poster-design

回到正题，我也有段时间没更文了，期间都在完善自己的开源编辑器项目，接下来就向大家汇报下目前的开发进展，一起来看看迅排设计近期都有哪些更新吧~

feature

首先是令人一颗赛艇(exciting)的新功能展示😁

支持多画板

在开发初期并未设计该功能，所以支持多画板就必须破坏原先设计的数据结构。

此外由于需要展示画布缩略图，Widget 元组件携带了太多业务逻辑，无法直接引入，所以就先暴力拷贝了一份副本，只保留 template 部分，作为静态元组件来渲染。

此处的元组件意思是编辑器的核心单元组件，具体指代 src/components/modules/widgets 目录下的组件，这些组件代表了编辑器支持渲染的广度，目前有文本、图片、svg、二维码、组合组件等。

最后下载图片的逻辑也发生了变化，目前尚未支持多图下载。

画布尺寸修改

对尺寸修改做了一些优化，增加了常见的锁定比例按钮，增加了一些预设尺寸，可以快捷应用到画布，并支持元素自适应，不过真正智能的自适应算法比较复杂，目前只简单实现了一版，还是会有点问题。

此外四个边角也增加了小把手可以快捷拖动改变画布尺寸。

支持画布背景渐变色

除了纯色背景与图片背景，现在也支持渐变背景了。调色板还有待优化，比如输入框目前是不可用的，只能吸色。

新增漫游导航

可做新手指引，由 element-plus 提供的组件支持，似乎不太完善，比如按钮的文本还没有可以修改的 API。

画布水印

一个水印功能，适合做收费海报时使用，这里只是效果展示。

新增背景图分离

通常背景图设置后便无法进行后期处理，参考了稿定等编辑器的做法，增加了分离按钮，可将背景快速转为图层。

一些杂项更新

新增文件菜单、帮助菜单，增加创建设计功能，快捷键说明等，原标尺功能也移入了“文件”菜单中。

下载交互优化，新增后台下载功能。

支持画布拖拽，由于画布是相对定位的，所以拖拽实际上改变的是滚动条的距离，但是缩放原点的距离补偿还有点搞不明白怎么做，所以体验可能并不是很好。

还有些小 bug 的修复就不一一说明了。

refactor

历史记录重构

撤销重做功能之前是采用全量深拷贝实现的，当调用 pushHistory 这个方法时，就会将完整状态树 deepClone 一份快照注入历史栈中，在撤销与重做时操作指针取出记录覆盖当前画布数据。

这种方式虽然简单直接，但是缺点也很明显，就是哪怕很小的改动都必须全量拷贝整个状态树，数据量大时会比较消耗内存空间，此时我也正准备实现多画板功能，届时单个作品中可能不止存在一个画布数据，所以决定重构。

在进行一番调研后，我发现差分补丁是比较常见的一种历史记录处理方式，它主要采用双栈记录法，通过追踪状态变化来生成相对应的补丁集，存入两个数组中（例如 undoStack、redoStack），之后在指针改变时根据事件类型从不同的栈中取出补丁，应用到数据变更当中。

补丁集的数据量要远小于整个状态树的数据，不用担心造成内存膨胀了。甚至我们后续可以考虑利用补丁做动态保存，就不必每次保存作品时都传递完整的状态树，以期节省带宽消耗。

当然，无论哪种方案，都需要经历注册和记录阶段，而我则尝试利用鼠标与键盘事件自动注册，分别在按下和抬起记录两次数据，然后用 microdiff 这个库生成对比的差异，如果出现新的变动则会执行历史记录。

目前已知的问题是，对于预期以外的影响状态树的修改，现在都会写进历史记录。例如图层的 left 属性在修改后可能为 12.6262638 但为了输入框中显示友好，在 input 组件中将自动格式化为 12.63，这个逻辑放到以前不会有问题，因为微小的变化并不能被肉眼捕捉，但现在则是被历史记录捕捉到了，从而就产生了一段似乎毫无变化的历史栈，这个只能后面再修复。

Vue3 部分重构，Vuex 改用 Pinia

由于项目三年前是使用 Vue2 开发的，在经历了一系列 coding 后现在又是将 Vue3 版本和 Vuex 都改了，并且大部分文件都加上了 TS 类型提示，这种操作放在大部分公司都是做不了的，因为啥功能都没产出，还容易改出一些 bug 来，最后周报上就写了一句话：Vue3 升级重构。而实际背后却涉及了几万行代码变更、上百个 commit，涉及两百多个文件的修改。