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

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

我在 2023 年年初开源了自己一个人开发的项目 Suika。

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

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

界面长这样。

到今天算是走过了一年零三个月的时间。

一开始功能很简陋，但我一有时间就往上面加功能，不断思考写代码要怎么写才能更优雅，更容易维护，不断地推敲一些算法和交互，一行行用代码实现和重构，最终变成了这么一个 相对来说功能较为丰富的图形编辑器 了。

对了，同时我也是一名技术写作者，所以开发期间还输出了 40 多篇图形编辑器教学文章。

《图形编辑器文章汇总》

star 不多，只有 249，但我很开心这个项目能走到今天。

这个项目的功能还远远算不上完善，相比我期望的功能还远远不够，还有很长的路要走。

同时我也发现有些朋友研究我的项目，配合我的文章学习图形编辑器知识，甚至有一些公司的项目已经基于我的代码进行二次开发 了。

所以，我觉得有必要告诉大家我对这个开源项目的开发规划。

所以我决定在在每个季度的小尾巴，专门写一篇文章，报告一下 上季度任务的完成情况，以及下一个季度的开发计划。

2024 一季度做了什么？

今年 1～3 月在做的事情主要有：

1. 用 vite 替换 create-react-app；
2. 提高 monorepo 分包粒度，将原来的 @suika/suika，拆分为 @suika/suika（UI 层，React 写的）、@suika/core（编辑器内核）、@suika/geo（几何算法包）、@suika/comon（多个包都会用到的通用方法）；
3. 修复各种小 bug 自不多提；
4. 最后但最重要的功能：钢笔工具。

钢笔工具在第一季度可算把它加上去了。

做这个花了我不少的时间，里面有不少的细分的功能，目前也只实现了部分功能：

1. 实现钢笔工具，能够通过鼠标绘制 Path；
2. Path 编辑工具，可以拖拽锚点；
3. 双击 Path 图形，进入编辑状态。

下面是效果演示：

2024 二季度要做什么？

做钢笔工具遇到了一个问题，就是它没有 x、y、width、height，都是基于 Path（三阶贝塞尔曲线）计算出来的。

移动 Path 的时候，要怎么做？只能遍历所有的点给它们一个个加上偏移量，很不优雅。

更好的做法是用 transform 去调整位移矩阵。另外 transform 还有其他好处，比如支持图片的反转、可以兼容 SVG、更好去实现编组功能。

目前项目用的是 x、y、width、height、rotation 的组合，所以我将用 width、height 和 transform 的组合重构项目，涉及到图形的数据结构、缩放算法、控制点计算、渲染逻辑的重构等等。

我写了个 demo，验证了 “通过控制点缩放图形” 的算法，挺有趣的。

当用 transform 改造完项目后，我会用 pixi.js v8 替换掉原来的原生 Canva 2D 写的渲染方式，也是不小的工作量。

pixi.js v8 是最近才发布的版本，底层渲染器新增了 WebGPU，据说性能有不小提升，我来尝尝鲜探探路。

所以，2024 二季度的计划是：

1. 使用 transform 方案重构项目；
2. 使用 pixi.js v8 渲染引擎替换原来羸弱的 Canvas 2D 原生渲染。

如果这两个任务提前完成了（不太可能），我会去开始做编组（group）功能。

以前我做过一版编组，思路不对，而且是半成品，接下来会重构。

结尾

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