低仿[创客贴-制作-设计页]功能的fabric.js移动端图片编

最近项目使用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内容。

• 项目地址