最近项目使用fabric.js开发移动端图片编辑器,记录一下学习过程。于是低仿了创客贴-制作-设计页
功能供大家参考。
项目基于 fabric.js 和 taro-react 开发,目前适配taro h5。全局React Hooks组件式开发,可自定义字体、图片滤镜、设计模板,导入,导出等等。
现有功能
- 保存为 PNG、JSON 文件
- 读取JSON模板
- 预览
- 插入文字/图片
- 复制
- 自定义字体,样式
- 字体模板
- 位置微调
- 图层及顺序调整
- 撤销/重做
- 背景属性设置
- 透明度
- 辅助线
- 图片替换
- 图片滤镜
- 图片翻转
TODO
- 文字排列
- 画布手势缩放
- 图片裁剪
- 字体大小优化
项目导出JSON为本地localStorage保存,有上限警告。
fabricjs的api属性非常的多,还有很多未使用到,也需要时间去探索。 目前也在继续查看fabric文档,持续完成todo内容。