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,一起加油吧!

相关推荐
进击的尘埃10 分钟前
Service Worker + stale-while-revalidate:让页面"假装"秒开的那些事
javascript
阿慧勇闯大前端13 分钟前
在AI时代,再去了解react19新特性还有用吗? 最近总有朋友问我:“现在AI写代码这么厉害了,我写个需求丢给ChatGPT,几秒钟就生成一堆组件,还学新特
前端·react.js
秋水无痕22 分钟前
从零搭建个人博客系统:Spring Boot 多模块实践详解
前端·javascript·后端
陆枫Larry29 分钟前
图片预览前先 filter 掉空地址:一个容易忽略的细节
前端
进击的尘埃30 分钟前
基于 Claude Streaming API 的多轮对话组件设计:状态机与流式渲染那些事
javascript
我叫蒙奇37 分钟前
rem 适配全过程
前端
陆枫Larry38 分钟前
小程序中按固定宽高比展示图片并去除黑边的实现思路
前端
HelloReader42 分钟前
Tauri 2.1 新特性自定义 HTTP Headers 配置详解
前端
一点一一1 小时前
从输入URL到页面加载:浏览器多进程/线程协同的完整逻辑
前端·面试
juejin_cn1 小时前
[转][译] 从零开始构建 OpenClaw — 第六部分(持久化记忆)
javascript