(開源)兩個週末寫了個圖片編輯器
阿新 • • 發佈:2021-08-19
一款開源圖片編輯器,採用React + Typescript + React-knova 框架開發.
,考慮後期可能核心的編輯功能整體做成一個元件,所以沒有umi裡提供的
前言
今年計劃開始寫文章,各大平臺釋出的時候需要上傳一個封面圖,市面上有好多比較成熟的圖片編輯器。之前也做過一些偏工具類的應用,於是萌生想法,自己能不能搞一個編輯器,供掘友們使用,大概花了四五天的時間,第一版內容已經有了。
案例演示
演示地址
快速啟動
git clone [email protected]:jiechud/fast-image-editor.git
yarn install || npm install
yarn dev
啟動服務- 開啟瀏覽器
專案目錄
. ├── canvas-components │ ├── canvas //畫布元件 │ ├── layout //頁面佈局 │ ├── shape-panel // 右側面板 │ └── transformer-wrapper // 支援transformer高階元件 ├── components │ ├── color-select // 顏色選擇器 │ ├── context-menu // 右鍵選單 │ ├── image // 圖片 │ ├── text // 文字 │ ├── text-input // 文字輸入 │ └── toolbar // 導航 ├── enum.ts ├── global.css ├── hooks │ └── useImage.tsx // 圖片kooks ├── models1 // 狀態管理 │ ├── canvasDataModel.ts │ └── canvasModel.ts ├── pages │ ├── index.less │ └── index.tsx ├── styles │ ├── index.less │ └── theme ├── typing.ts └── utils └── util.ts
功能特性
目前主要實現了簡單的圖片編輯,支援文字,圖片等。
已支援的功能列表
- [x] layout佈局
- [x] 文字編輯元件
- [x] 圖片編輯元件
- [x] 畫布放大縮小
- [x] 畫布右鍵選單
- [x] 圖片下載
- [x] 背景圖支援
待實現的功能列表
- [ ] 工具類操作支援上一步下一步
- [ ] 圖形元件
- [ ] 標記元件
- [ ] 畫布多個元素組合
- [ ] 文字元件增加,字型豐富,透明度等。
- [ ] 畫布參考線
- [ ] 畫布多個尺寸,支援多平臺
- [ ] 接入後臺,實現登入,儲存模板
專案架構
專案用React umi開發框架,採用typescript編寫,圖片編輯功能用的是react-konva
useModel
去做狀態處理,採用的是flooks
。
技術棧
技術 | 說明 | 官網 |
---|---|---|
typescript | JavaScript 的一個超集,支援 ECMAScript 6 | https://www.tslang.cn/ |
umi | 外掛化的企業級前端應用框架。 | https://umijs.org/zh-CN |
react-konva | 用於使用React繪製複雜的畫布圖形。 | https://github.com/konvajs/react-konva |
immer | 建立不可變資料 | https://immerjs.github.io/immer/docs/introduction |
flooks | 一個 React Hooks 狀態管理器,支援驚人的 re-render 自動優化 | https://github.com/nanxiaobei/flooks |
ahooks | 提供了大量自應用的高階 Hooks | https://github.com/alibaba/hooks |
react-color | 一個React顏色選擇器 | https://github.com/casesandberg/react-color |
聯絡我
建立了一個微信交流群,如需溝通討論,請加入。
二維碼過期,請新增微訊號q1454763497
,備註image editor
,我會拉你進群
地址
總結
大家可以嘗試一下,有bug可以提issues,我會第一時間修復.
大家覺得有幫助,請在github幫忙star一下。