Skip to content

Commit 7f14686

Browse files
committed
docs(文档): 更新 readme
1 parent 0cff5b1 commit 7f14686

File tree

2 files changed

+191
-197
lines changed

2 files changed

+191
-197
lines changed

README-zh.md renamed to README-en.md

Lines changed: 95 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
1-
<!--
2-
* @Author: 秦少卫
3-
* @Date: 2024-09-11 17:07:42
4-
* @LastEditors: 秦少卫
5-
* @LastEditTime: 2024-09-11 17:07:43
6-
* @Description: file content
7-
-->
8-
9-
[English](https://github.com/ikuaitu/vue-fabric-editor/blob/main/README.md)| 中文
1+
English| [中文](https://github.com/ikuaitu/vue-fabric-editor/blob/main/README.md)
102

113
<p align="center">
12-
<a href="https://pro.kuaitu.cc" target="_blank">
13-
<img src="https://github.com/user-attachments/assets/4e519179-8d19-41cc-ad2b-a1d7ebc63836" width="318px" alt="开源图片编辑器" />
4+
<a href="https://pro.kuaitu.cc/index-en.html" target="_blank">
5+
<img src="https://github.com/user-attachments/assets/a0f4b8b8-a8d2-480b-b43e-49c0faaff917" width="418px" alt="Open source image editor" />
6+
<!-- <img src="https://github.com/user-attachments/assets/aff17bdf-cea6-4b7e-8091-6661ea8c4f69" width="418px" alt="Open source image editor" /> -->
147
</a>
158
</p>
169

10+
<h3 align="center"> Plugin architecture · Drag-and-drop design · Complete functions </h3>
11+
<p align="center">Based on fabric.js and Vue developed plug-in image editor, can customize fonts, materials, design templates, right-click menu, shortcut keys</p>
1712

18-
<h3 align="center">开源图片编辑器 · 插件化架构 · 拖拽式设计 · 功能完善 </h3>
19-
<p align="center">基于 fabric.js 和 Vue 开发的插件化图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键</p>
20-
21-
<p align="center"><a href="https://ikuaitu.github.io/vue-fabric-editor/" target="_blank">演示</a> · <a href="https://ikuaitu.github.io/doc/#/" target="_blank">文档</a> · <a href="https://www.kuaitu.cc/" target="_blank">付费版演示</a> · <a href="https://pro.kuaitu.cc/" target="_blank">付费版介绍</a></p>
13+
<p align="center"><a href="https://ikuaitu.github.io/vue-fabric-editor/" target="_blank">Preview</a> · <a href="https://ikuaitu.github.io/doc/#/" target="_blank">Document</a> · <a href="https://www.kuaitu.cc/" target="_blank">Enterprise Edition Preview</a> · <a href="https://pro.kuaitu.cc/index-en.html" target="_blank">Enterprise Edition</a></p>
2214
<br />
2315

2416
<p align="center">
@@ -48,121 +40,125 @@
4840
</a>
4941
</p>
5042

51-
## 简介
43+
## Introduction
5244

53-
快图设计,vue-fabric-editor 是一款基于 fabric.js Vue 开发的图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键。
45+
Vue-Fabric-Editor is an image editor based on fabric.js and Vue, which can customize fonts, materials, design templates, right-click menus, and shortcut keys.
5446

55-
[动图介绍](https://juejin.cn/post/7222141882515128375) · [介绍视频](https://www.bilibili.com/video/BV1US421A7TU/?spm_id_from=333.999.0.0)
47+
[GIF introduction](https://juejin.cn/post/7222141882515128375) · [Introductory video](https://www.bilibili.com/video/BV1US421A7TU/?spm_id_from=333.999.0.0)
5648

57-
### 特点
49+
### Features
5850

59-
1. **插件化架构**:可通过插件的进行扩展开发,支持右键菜单和快捷键。
60-
2. **拖拽式设计**:以轻量、简洁为主的图形编辑器,而非大而全的在线 PS 类的重行设计工具。
61-
3. **功能完善**PSD 解析、辅助线、历史记录、渐变、自定义字体、裁剪等功能。
51+
1. **Plug-in architecture**: can be extended and developed through plug-ins, supporting right-click menus and shortcut keys.
52+
2. **Drag-and-drop design**: a graphic editor that is mainly lightweight and simple, rather than a large and comprehensive online PS-like heavy-line design tool.
53+
3. **Full-featured**: PSD parsing, auxiliary lines, history, gradients, custom fonts, cropping and other functions.
6254

63-
### 已有功能
55+
### Existing features
6456

65-
- 导入 JSONPSD 文件
66-
- 导出 PNGSVGJSON 文件
67-
- 组合/拆分组合
68-
- 图层功能
69-
- 渐变属性
70-
- 外观属性/字体属性/描边/阴影
71-
- 撤销/重做
72-
- 快捷键
73-
- 右键菜单
74-
- 辅助线
75-
- 标尺
76-
- 自定义字体
77-
- 自定义模板素材
78-
- 插入 SVG、图片素材
79-
- 多元素水平、垂直对齐方式
80-
- 背景属性设置
81-
- 箭头/线条
82-
- 画笔/多边形绘制
83-
- 二维码/条形码
84-
- 图片替换/裁剪/滤镜
85-
- 水印
86-
- 国际化
57+
- Import JSON, PSD files
58+
- Export PNG, SVG, JSON files
59+
- Combine/split combinations
60+
- Layer functions
61+
- Gradient properties
62+
- Appearance properties/Font properties/Stroke/Shadow
63+
- Undo/Redo
64+
- Shortcuts
65+
- Right-click menu
66+
- Auxiliary lines
67+
- Rulers
68+
- Custom fonts
69+
- Custom template materials
70+
- Insert SVG, image materials
71+
- Horizontal and vertical alignment of multiple elements
72+
- Background property settings
73+
- Arrows/lines
74+
- Brush/polygon drawing
75+
- QR code/barcode
76+
- Image replacement/cropping/filters
77+
- Watermark
78+
- Internationalization
8779

88-
## 使用
80+
## Use
8981

90-
请先安装 node.js v16,及 pnpm, 然后执行以下命令:
82+
Please install node.js v16 and pnpm first, then execute the following command:
9183

9284
```
9385
pnpm i
9486
pnpm dev
9587
```
9688

97-
## 开发者服务
98-
99-
- **微信交流群**:我们组建了多个微信项目交流群,作者和项目维护者活跃在群内,定期解答问题。
100-
- **fabric.js 中文教程**[https://blog.kuaitu.cc](https://blog.kuaitu.cc/)
101-
- **知识星球**:长期更新开源编辑器与 fabric.js 的相关资料,沉淀最佳实践、开发经验分享、代码示例等。
102-
<img src="https://github.com/nihaojob/vue-fabric-editor/assets/13534626/25e9075e-f751-4110-aadd-30fe453e02d9" width="500px" alt="二维码" />
89+
## Enterprise Edition
10390

104-
## 付费版本
91+
Help enterprises quickly build online design tools, **reduce enterprise R&D investment, and avoid reinventing the wheel.**
10592

106-
帮助企业快速搭建在线设计工具,**减少企业研发投入,避免重复造轮子。**
93+
[Function Introduction](https://ws0gdejldw.feishu.cn/docx/GKmnddCgFokr4sxFeYNcoql1nAb) · [Product introduction](https://pro.kuaitu.cc/index-en.html) · [Preview](https://www.kuaitu.cc/)
10794

108-
[功能介绍](https://ws0gdejldw.feishu.cn/docx/GKmnddCgFokr4sxFeYNcoql1nAb) · [产品介绍](http://pro.kuaitu.cc/) · [演示](https://www.kuaitu.cc/)
95+
The open source version only contains the front-end code, while the paid version **provides complete front-end, back-end and management background, with full functionality out of the box, and provides source code authorization and supports secondary development**.
10996

110-
开源版本仅前端代码,付费版本**提供完整的前后端、管理后台,功能完整开箱即用,提供源码授权、支持二次开发**
97+
- **Ready to use out of the box, full functionality**: Rich design capabilities, providing complete front-end and back-end functions, ready to use after deployment.
98+
- **Plug-in architecture, easy to expand**: Based on plug-in API, quickly carry out secondary development of the editor.
99+
- **Batch generation, fast output**: Support batch generation of images through HTTP interface and table files.
100+
- **Drag-and-drop design, simple and easy to use**: Suitable for ordinary users, easy to get started without training.
101+
- **Technical docking, document training**: Provide more support and efficiently complete technical docking.
102+
- **Customized development, reduced investment**: Support the rapid completion of functional customized development and reduce R&D investment.
111103

112-
- **开箱即用,功能完整**:设计能力丰富,提供完整前台、后台功能,部署即可使用。
113-
- **插件架构,扩展方便**:基于插件化 API,快速对编辑器进行二次开发。
114-
- **批量生成,快速出图**:支持通过 HTTP 接口、表格文件批量生成图片。
115-
- **拖拽式设计,简单易用**:适合普通用户操作,无需培训轻松上手。
116-
- **全平台适配**:PC 版本、H5 版本支持各种应用场景。
117-
- **技术对接,文档培训**:提供更多的支持,高效完成技术对接。
118-
- **定制开发,减少投入**:支持快速完成功能定制开发,减少研发投入。
119-
<a href="https://pro.kuaitu.cc" target="_blank">
120-
<img src="https://github.com/user-attachments/assets/5303395b-247d-45be-a411-ef27a389156c" alt="开源图片编辑器" />
121-
</a>
122-
123-
## 贡献指南
104+
<a href="https://pro.kuaitu.cc/index-en.html" target="_blank">
105+
<img src="https://github.com/user-attachments/assets/514479be-b73e-4170-800d-f8fae4adcd5e" alt="Open source image editor" />
106+
</a>
124107

125-
项目致力于打造一个开箱即用的 web 图片编辑器应用,同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层,期望封装层面向开发者设计,提供更简单的接口,让开发者可以轻松的实现图片应用开发。
108+
## Contribution guide
126109

127-
如果你对这件事情感兴趣,真诚的邀请你加入,我们一起成长,你只要会简单的 Git 和 Javascript 语法就可以。
110+
The project is committed to creating an out-of-the-box web image editor application, and at the same time, it will precipitate an encapsulation layer between the web image editor application and fabric.js. It is expected that the encapsulation layer will be designed for developers and provide a simpler interface so that developers can easily develop image applications.
128111

129-
[【提交代码送赢雷蛇游戏鼠标】](https://github.com/ikuaitu/vue-fabric-editor/issues/526)
112+
If you are interested in this matter, we sincerely invite you to join us and grow together. You only need to know simple Git and Javascript syntax.
130113

131-
### 相关资料
114+
### Related Materials
132115

133-
这是我发表在掘金社区关于编辑器的技术笔记,会有更多的细节:
116+
This is a technical note I published on the Nuggets community about the editor, which will have more details:
134117

135-
1. [使用 fabric.js 快速开发一个图片编辑器](https://juejin.cn/post/7155040639497797645)
136-
2. [fabric.js 开发图片编辑器的细节实现](https://juejin.cn/post/7199849226745430076)
137-
3. [fabric.js 开发图片编辑器可以实现哪些功能?多图](https://juejin.cn/post/7222141882515128375)
138-
4. [我的开源项目与开源经历分享](https://juejin.cn/post/7224765991896121401)
139-
5. [Canvas 库 fabric.js 可以实现哪些功能? 动图介绍](https://juejin.cn/post/7336743827827015731)
140-
6. [Vue 开源图片编辑器](https://juejin.cn/post/7384258569590636595)
141-
7. [个人开源项目商业化经验分享](https://juejin.cn/post/7400687574967271478)
142-
8. [开源 fabric.js 图片编辑器的插件化架构](https://juejin.cn/post/7401071861847949339)
118+
1. [Use fabric.js to quickly develop an image editor](https://juejin.cn/post/7155040639497797645),
119+
2. [Detailed implementation of fabric.js developing an image editor](https://juejin.cn/post/7199849226745430076)
120+
3. [What functions can fabric.js develop an image editor to achieve? ](https://juejin.cn/post/7222141882515128375)
121+
4. [Sharing my open source projects and open source experience](https://juejin.cn/post/7224765991896121401)
122+
5. [What functions can fabric.js achieve with the Canvas library?](https://juejin.cn/post/7336743827827015731)
123+
6. [Vue open source image editor](https://juejin.cn/post/7384258569590636595)
124+
7. [Sharing of personal open source project commercialization experience](https://juejin.cn/post/7400687574967271478)
125+
8. [Open source fabric.js image editor plug-in architecture](https://juejin.cn/post/7401071861847949339)
143126

144-
注:如果遇到技术问题,期望使用 issue 讨论,它更加开放与透明,足够多的信息会让解决问题变得更高效,参考[提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7)
127+
Note: If you encounter technical problems, you are expected to use issue Discussion, it is more open and transparent, enough information will make problem solving more efficient, refer to [The wisdom of asking questions](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7).
145128

146129
<!-- <img src="https://user-images.githubusercontent.com/13534626/231202488-f35be6bc-617a-412e-831e-b3764466d833.jpeg" width="20%"> -->
147130

148-
## 致谢
149-
150-
- [刘明野](https://github.com/liumingye)标尺功能作者。
151-
- [palxiao](https://github.com/palxiao/poster-design/tree/main/packages/color-picker)设计编辑器的渐变组件。
152-
153-
## 友情赞助
154-
155-
<a href="https://github.com/wangyuan389/mall-cook" target="_blank">
156-
<img src="https://www.sunmao-design.top/sunmao/admin/assets/logo.896aa176.png" width="50px" alt="开源图片编辑器" />
157-
</a>
158-
131+
## Administrator
159132

160-
## 管理员
161-
162-
<!-- readme: collaborators -start -->
163-
<!-- readme: collaborators -end -->
133+
<table>
134+
<tbody>
135+
<tr>
136+
<td align="center">
137+
<a href="https://github.com/nihaojob">
138+
<img src="https://avatars.githubusercontent.com/u/13534626?v=4" width="80;" alt="nihaojob"/>
139+
<br />
140+
<sub><b>nihaojob</b></sub>
141+
</a>
142+
</td>
143+
<td align="center">
144+
<a href="https://github.com/Qiu-Jun">
145+
<img src="https://avatars.githubusercontent.com/u/24954362?v=4" width="80;" alt="Qiu-Jun"/>
146+
<br />
147+
<sub><b>Qiu-Jun</b></sub>
148+
</a>
149+
</td>
150+
<td align="center">
151+
<a href="https://github.com/wuchenguang1998">
152+
<img src="https://avatars.githubusercontent.com/u/63847336?v=4" width="80;" alt="wuchenguang1998"/>
153+
<br />
154+
<sub><b>wuchenguang1998</b></sub>
155+
</a>
156+
</td>
157+
</tr>
158+
<tbody>
159+
</table>
164160

165-
## 贡献者
161+
## Collaborators
166162

167163
<!-- readme: collaborators -start -->
168164
<table>
@@ -479,9 +475,6 @@ pnpm dev
479475
</table>
480476
<!-- readme: collaborators,contributors -end -->
481477

482-
483-
484-
485478
## License
486479

487480
Licensed under the [MIT](./LICENSE) License.

0 commit comments

Comments
 (0)