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