wizard-a / fast-image-editor

一款开源图片编辑器，采用React + Typescript + React-knova 框架开发.

Welcome to fast-image-editor 👋

一块开源图片编辑器，采用React+Typescript+React-Konva开发。

🏠 Homepage

✨ 演示地址

Install

yarn install

Usage

yarn run start

Run tests

yarn run test

项目目录

.
├── 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

功能特性

目前主要实现了简单的图片编辑，支持文字，图片等。

已支持的功能列表

• layout布局
• 文字编辑组件
• 图片编辑组件
• 画布放大缩小
• 画布右键菜单
• 图片下载
• 背景图支持

待实现的功能列表

• 工具类操作支持上一步下一步
• 图形组件
• 标记组件
• 画布多个元素组合
• 文字组件增加，字体丰富，透明度等。
• 画布参考线
• 画布多个尺寸，支持多平台
• 接入后台，实现登录，保存模板

系列文章

• 两个周末写了个图片编辑器
• 给图片编辑器添加了辅助线
• 给图片编辑器添加了【撤销重做】功能
• 给图片编辑器添加了【框选节点】功能

项目架构

项目用React umi开发框架，采用typescript编写，图片编辑功能用的是react-konva,考虑后期可能核心的编辑功能整体做成一个组件，所以没有umi里提供的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,我会拉你进群

Author

👤 杰出D

• Website: https://juejin.cn/user/2981531265821416/posts
• Github: @jiechud

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 杰出D.
This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator