个人开源图形编辑器 Suika 2024 年三季度计划

大家好，我是前端西瓜哥。

我在 2023 年年初开源了自己的开源项目 Suika。

https://github.com/F-star/suika

这是一款 Web 端图形编辑器，可以让用户自由地创建编辑各种图形。

目前界面又进化了一点。star 数也多了一点，三个月来从原来的 249，涨了 160，现在是 409。

上次汇报了自己第二季度的计划，现在第三季度了，我们来看看上一季度计划的完成情况，然后再规划一下第三季度又要整什么新活。

2024 第二季度工作做了什么

计划的完成情况：

1. transform 已经重构完成；
2. 尝试改为 pixi.js 渲染器，但渲染效果不满意，没有合到主分支；
3. 实现了编组功能；

还做了的其它功能：

1. 新增铅笔、绘制正多边形、绘制星形工具；
2. 给 geo 几何算法包加了 jest 单元测试，但用例不多，合并到主分支 CI 会跑一下；

首先我用 transform 的表达 替换了原来的 x、y、rotation，改了非常多的东西，但是对矩阵有了更深的理解。

替换为 pixi.js

然后我尝试重构渲染相关逻辑，改为用 pixi.js，但发现 pixi.js 的渲染不能满足我的需求，具体表现有：

1. 圆形放很大时，不够光滑（提了 issue，维护者建议用大的半径，然后再用 transform 缩小）；
2. 文字渲染在使用 transform 放大后会模糊，需要根据 zoom 值和圆形做一张处理，且文字达到一定大小会发生溢出；
3. 即使设置了光滑化，如果曲线太大，大到一定程度，会出现错误的渲染，从曲线退化为折线。曲线较小时倒是没这个问题；
4. 自交的多边形填充渲染是有问题，pixijs 默认使用简单的填充算法提高性能，需要自己替换填充算法；
5. pixi.js 8 支持 webgpu 还是不太行，貌似 webgpu 不太稳定，现在它已经改成默认优先用 webgl了。我手动设置优先 webgpu 会报错。

因为 pixi.js 太手动挡了，需要做的工作太多，所以我就放着不做了，先做其它我更感兴趣的事情去了。

不过 pixi.js 版的分支还是保留着，目前落后主分支非常多：

https://github.com/F-star/suika/tree/feat/repalce-canvas2d-to-pixi

构建的 pixi.js 版 suika 编辑器体验地址：

https://blog.fstars.wang/app/suika-pixi/

编组

transform 改造完了，那编组功能自然就安排上了。

编组功能是最复杂的，除了加新功能，比如编组、解组、连击事件、新的 React 组件，还有大量的逻辑要被重写，花了我非常多的时间，不过现在改得差不多了。

比如点选图形，原来没有组，选到谁就是谁。加了组后，选中一个图形如果有组，要选中它所在的组。

可以双击后选中组下的直接子图形，这时候，你可以选中这个子图形的兄弟节点，以及这个子图形的父节点们的兄弟节点。

父节点和子节点是不能同时选中的，如果选中子节点，再选中父节点，子节点就要自动变成未被选中状态。

缩放一个组对象，组更新自己的 width、height 和 transform，子节点也要更新，又因为要保持组是刚好包裹子节点，所以父节点和父节点的兄弟也要更新 transform，这就叫 牵一发而动全身。

诸如此类，所有的功能都变得复杂了，都要一个个重写。

然后也有在筹备一本小册，从零到一做一个手绘风白板工具，说是想简单写，面向小白，想办法做了很多减法，但它还是很复杂啊，看来短期是不会写完了。

2024 第三季度要做什么

年前的时候我说要做 协同编辑功能 嘛，现在都半年过去了，也是要开始了。其实最近也开始研究 y.js 了。

所以第三季度的计划就是：

1. 通过插件的形式提供协同编辑能力，会先试着用 y.js 协同库来实现；
2. 简单写个后台管理系统，作为协同编辑的配套；

然后就插点小功能，修些 bug，再就是可能再学习学习 Skia。

结尾

我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。