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

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

我在 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)功能。

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

结尾

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


相关阅读,

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

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek