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

2,268 阅读4分钟

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

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

github.com/F-star/suik…

这是一款 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)功能。

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

结尾

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


相关阅读,

简单介绍一下我在做的图形编辑器