2024年第一天的图片编辑器 fabritor

项目地址:sleepy-zone/fabritor-web: A creative editor based on fabricjs. (github.com)

在线体验:fabritor-web.vercel.app/


在圣诞节发布 2.0 版本之后,fabritor 就进入了下一个迭代,终于在 2024 年元旦,next 分支合并进主干,发布 2.1 版本,也算是和我的项目一起跨年了。

2.1 版本主要在文本和图片带来一些增强,一些创意的增强。(都在下面的主图里了!

颜色渐变

首要支持的便是颜色渐变。fabricjs 虽然支持渐变,但怎么配置确实一个难题,属实难找到一个好用的支持渐变的颜色选择器。

所以自己动手开发了 react-colors-beauty,UI 上参考了 sketch 填充选择器,同时支持纯色和渐变色的选择器,文档地址:sleepy-zone.github.io/react-color...

在文字颜色、文字边框、形状背景、画板背景都支持了渐变配置。

(同时,支持渐变的图标,也以渐变展示。

文字图片填充

fabricjs 对象的 fill 属性是支持 pattern 的,也就是图片填充,这也算是对渐变的一种补充。这样可以实现渐变难以实现的效果。

主图里 Happy New Year 的英文就是使用一张烟花图片填充产生的。

填充图片:

图片裁剪

图片新增裁剪功能,在图片工具栏点击裁剪后,就会将当前图片选中,进行自由裁剪。

图片滤镜

在 2.0 版本中,我提到重写了图片对象,就是为了便利的享受 fabricjs 内置的滤镜。

这里内置了几个滤镜。(不知道翻译的好不好!

后续计划

至此,fabritor 作为一个图片编辑器,功能基本完善了。

后续的方向一个是更像一个产品去维护它,提供更好的操作体验,提供更多功能提高作图效率; 另外抽出一个快速安装包,以便开发者能更简单的部署一个自己的版本。

2024,一起加油吧!

相关推荐
kyriewen几秒前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript
Csvn38 分钟前
🕰️ 闭包 + setTimeout 的 5 个经典陷阱:为什么定时器看到的永远不是最新的值?
前端
lilian2331 小时前
Harmony os 技术实战|拼豆制图27:用单字符编码承载 50 张 70×70 图纸
前端·数据库·华为·harmonyos
CarIise1 小时前
CSS选择器与样式关联
前端·css·tensorflow
里欧跑得慢3 小时前
CSS 模块化架构的演进:BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
IT_陈寒3 小时前
Vue的computed属性把我坑惨了,原来我一直用错姿势
前端·人工智能·后端
小灰灰搞电子3 小时前
Rust+Slint 实现温度计源码分享
前端·rust·slint
计算机魔术师4 小时前
面壁智能 OpenBMB 推出 MathForm,面向 Lean 4 数学自动形式化的开源框架、数据集与模型
前端
NeilCarmack4 小时前
Deepseek-harness增加桌面版端序列:第 2 讲 · spawn Electron:当前进程如何“交棒“
前端·javascript·electron
上海魁鲸科技有限公司5 小时前
APS高级排产系统到底有什么用?一文讲清功能、选型与落地建议
前端·microsoft·excel