Skip to content

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

Notifications You must be signed in to change notification settings

wizard-a/fast-image-editor

Repository files navigation

Welcome to fast-image-editor 👋

Version Documentation Maintenance License: MIT

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

示例图

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

🤝 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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published