大家好,我是前端西瓜哥。
我在 2023 年年初开源了自己的开源项目 Suika。
https://github.com/F-star/suika
这是一款 Web 端图形编辑器,可以让用户自由地创建编辑各种图形。
目前界面又进化了一点。star 数也多了一点,三个月来从原来的 249,涨了 160,现在是 409。
上次汇报了自己第二季度的计划,现在第三季度了,我们来看看上一季度计划的完成情况,然后再规划一下第三季度又要整什么新活。
计划的完成情况:
还做了的其它功能:
首先我用 transform 的表达 替换了原来的 x、y、rotation,改了非常多的东西,但是对矩阵有了更深的理解。
然后我尝试重构渲染相关逻辑,改为用 pixi.js,但发现 pixi.js 的渲染不能满足我的需求,具体表现有:
因为 pixi.js 太手动挡了,需要做的工作太多,所以我就放着不做了,先做其它我更感兴趣的事情去了。
不过 pixi.js 版的分支还是保留着,目前落后主分支非常多:
https://github.com/F-star/suika/tree/feat/repalce-canvas2d-to-pixi
构建的 pixi.js 版 suika 编辑器体验地址:
https://blog.fstars.wang/app/suika-pixi/
transform 改造完了,那编组功能自然就安排上了。
编组功能是最复杂的,除了加新功能,比如编组、解组、连击事件、新的 React 组件,还有大量的逻辑要被重写,花了我非常多的时间,不过现在改得差不多了。
比如点选图形,原来没有组,选到谁就是谁。加了组后,选中一个图形如果有组,要选中它所在的组。
可以双击后选中组下的直接子图形,这时候,你可以选中这个子图形的兄弟节点,以及这个子图形的父节点们的兄弟节点。
父节点和子节点是不能同时选中的,如果选中子节点,再选中父节点,子节点就要自动变成未被选中状态。
缩放一个组对象,组更新自己的 width、height 和 transform,子节点也要更新,又因为要保持组是刚好包裹子节点,所以父节点和父节点的兄弟也要更新 transform,这就叫 牵一发而动全身。
诸如此类,所有的功能都变得复杂了,都要一个个重写。
然后也有在筹备一本小册,从零到一做一个手绘风白板工具,说是想简单写,面向小白,想办法做了很多减法,但它还是很复杂啊,看来短期是不会写完了。
年前的时候我说要做 协同编辑功能 嘛,现在都半年过去了,也是要开始了。其实最近也开始研究 y.js 了。
所以第三季度的计划就是:
然后就插点小功能,修些 bug,再就是可能再学习学习 Skia。
我是前端西瓜哥,欢迎关注我,学习更多图形编辑器知识。