大家好,我是前端西瓜哥。
我在 2023 年年初开源了自己一个人开发的项目 Suika。
https://github.com/F-star/suika
这是一款 Web 端图形编辑器,可以让用户自由地创建编辑各种图形。
界面长这样。
到今天算是走过了一年零三个月的时间。
一开始功能很简陋,但我一有时间就往上面加功能,不断思考写代码要怎么写才能更优雅,更容易维护,不断地推敲一些算法和交互,一行行用代码实现和重构,最终变成了这么一个 相对来说功能较为丰富的图形编辑器 了。
对了,同时我也是一名技术写作者,所以开发期间还输出了 40 多篇图形编辑器教学文章。
star 不多,只有 249,但我很开心这个项目能走到今天。
这个项目的功能还远远算不上完善,相比我期望的功能还远远不够,还有很长的路要走。
同时我也发现有些朋友研究我的项目,配合我的文章学习图形编辑器知识,甚至有一些公司的项目已经基于我的代码进行二次开发 了。
所以,我觉得有必要告诉大家我对这个开源项目的开发规划。
所以我决定在在每个季度的小尾巴,专门写一篇文章,报告一下 上季度任务的完成情况,以及下一个季度的开发计划。
今年 1~3 月在做的事情主要有:
钢笔工具在第一季度可算把它加上去了。
做这个花了我不少的时间,里面有不少的细分的功能,目前也只实现了部分功能:
下面是效果演示:
做钢笔工具遇到了一个问题,就是它没有 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 二季度的计划是:
如果这两个任务提前完成了(不太可能),我会去开始做编组(group)功能。
以前我做过一版编组,思路不对,而且是半成品,接下来会重构。
我是前端西瓜哥,欢迎关注我,学习更多图形编辑器知识。