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
,涉及两百多个文件的修改。
最后
在线体验 | Github 开源地址: palxiao/poster-design
如果觉得这个项目做的还不错的话,别忘了前往 Github 仓库点个小小的 Star 加速作者更新喲~