最近項目使用fabric.js開發(fā)移動端圖片編輯器蝶糯，記錄一下學習過程。于是低仿了創(chuàng)客貼-制作-設計頁功能供大家參考志群。
項目基于 fabric.js 和 taro-react 開發(fā)，目前適配taro h5。全局React Hooks組件式開發(fā)爷狈，可自定義字體、圖片濾鏡裳擎、設計模板涎永，導入，導出等等。
WX20230827-200923@2x.png
159_1693135714.gif
n2.gif
現(xiàn)有功能
- 保存為 PNG羡微、JSON 文件
- 讀取JSON模板
- 預覽
- 插入文字/圖片
- 復制
- 自定義字體谷饿，樣式
- 字體模板
- 位置微調(diào)
- 圖層及順序調(diào)整
- 撤銷/重做
- 背景屬性設置
- 透明度
- 輔助線
- 圖片替換
- 圖片濾鏡
- 圖片翻轉
TODO
- 文字排列
- 畫布手勢縮放
- 圖片裁剪
- 字體大小優(yōu)化
項目導出JSON為本地localStorage保存，有上限警告妈倔。
fabricjs的api屬性非常的多博投，還有很多未使用到，也需要時間去探索启涯。 目前也在繼續(xù)查看fabric文檔贬堵，持續(xù)完成todo內(nèi)容。
