大家好，我是前端西瓜哥。
我在 2023 年年初开源了自己一个人开发的项目 Suika。
这是一款 Web 端图形编辑器，可以让用户自由地创建编辑各种图形。
界面长这样。
到今天算是走过了一年零三个月的时间。
一开始功能很简陋，但我一有时间就往上面加功能，不断思考写代码要怎么写才能更优雅，更容易维护，不断地推敲一些算法和交互，一行行用代码实现和重构，最终变成了这么一个 相对来说功能较为丰富的图形编辑器 了。
对了，同时我也是一名技术写作者，所以开发期间还输出了 40 多篇图形编辑器教学文章。
star 不多，只有 249，但我很开心这个项目能走到今天。
这个项目的功能还远远算不上完善，相比我期望的功能还远远不够，还有很长的路要走。
同时我也发现有些朋友研究我的项目，配合我的文章学习图形编辑器知识，甚至有一些公司的项目已经基于我的代码进行二次开发 了。
所以，我觉得有必要告诉大家我对这个开源项目的开发规划。
所以我决定在在每个季度的小尾巴，专门写一篇文章，报告一下 上季度任务的完成情况，以及下一个季度的开发计划。
2024 一季度做了什么？
今年 1～3 月在做的事情主要有：
-
用 vite 替换 create-react-app；
-
提高 monorepo 分包粒度，将原来的 @suika/suika，拆分为 @suika/suika（UI 层，React 写的）、@suika/core（编辑器内核）、@suika/geo（几何算法包）、@suika/comon（多个包都会用到的通用方法）；
-
修复各种小 bug 自不多提；
-
最后但最重要的功能：钢笔工具。
钢笔工具在第一季度可算把它加上去了。
做这个花了我不少的时间，里面有不少的细分的功能，目前也只实现了部分功能：
-
实现钢笔工具，能够通过鼠标绘制 Path；
-
Path 编辑工具，可以拖拽锚点；
-
双击 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 二季度的计划是：
-
使用 transform 方案重构项目；
-
使用 pixi.js v8 渲染引擎替换原来羸弱的 Canvas 2D 原生渲染。
如果这两个任务提前完成了（不太可能），我会去开始做编组（group）功能。
以前我做过一版编组，思路不对，而且是半成品，接下来会重构。
结尾
我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
相关阅读，