最近項目使用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內容。
