From 337e159b685eeab7b204b030ab7e6896c9a5375c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=A6=E5=B0=91=E5=8D=AB?= Date: Sat, 17 Aug 2024 12:17:17 +0800 Subject: [PATCH] Update README-en.md --- README-en.md | 536 +++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 459 insertions(+), 77 deletions(-) diff --git a/README-en.md b/README-en.md index 1136afb7..a56e1c2b 100644 --- a/README-en.md +++ b/README-en.md @@ -1,105 +1,487 @@ English| [中文](https://github.com/nihaojob/vue-fabric-editor/blob/main/README.md) -Documents are translated using software,You are welcome to submit for inspection. -# vue-fabric-editor +

+ + Open source image editor + +

+ -[Demo](https://nihaojob.github.io/vue-fabric-editor/) fabric.js and Vue based image editor, can customize fonts, materials, design templates. +

Plugin architecture · Drag-and-drop design · Complete functions

+

Based on fabric.js and Vue developed plug-in image editor, can customize fonts, materials, design templates, right-click menu, shortcut keys

-
- - -
+

Preview · Document · Enterprise Edition Preview · Enterprise Edition

+
-

+

+ + stars + + + + stars + + + + contributors + + + license + + + 快图设计网站 + +

-## Existing function +
+

+ + 演示 + +

-- Import JSON file -- Save it as a PNG, SVG, or JSON file -- Insert SVG, image files -- Multi-element horizontal and vertical alignment -- Combine/Split Combine -- Layer and order adjustments -- undo/redo -- Background property setting -- Appearance Properties/Font Properties/Stroke/Shadow -- custom font -- Custom template material -- i18n -- Auxiliary line +## Introduction +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. + +[GIF introduction](https://juejin.cn/post/7222141882515128375) · [Introductory video](https://www.bilibili.com/video/BV1US421A7TU/?spm_id_from=333.999.0.0) + +### Features +1. **Plug-in architecture**: can be extended and developed through plug-ins, supporting right-click menus and shortcut keys. +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. +3. **Full-featured**: PSD parsing, auxiliary lines, history, gradients, custom fonts, cropping and other functions. + +### Existing features + +- Import JSON, PSD files +- Export PNG, SVG, JSON files +- Combine/split combinations +- Layer functions +- Gradient properties +- Appearance properties/Font properties/Stroke/Shadow +- Undo/Redo +- Shortcuts +- Right-click menu +- Auxiliary lines +- Rulers +- Custom fonts +- Custom template materials +- Insert SVG, image materials +- Horizontal and vertical alignment of multiple elements +- Background property settings +- Arrows/lines +- Brush/polygon drawing +- QR code/barcode +- Image replacement/cropping/filters +- Watermark +- Internationalization ## Use -### Startup +Please install node.js v16 and pnpm first, then execute the following command: ``` -yarn install -yarn serve +pnpm i +pnpm dev ``` -### Custom font - -The font-related files are in `src/assets/fonts`, put the font files in the directory, and update the newly added font name to the `font.css` and `font.js` files. - -```js -// font.js -const cnList = [ - { - name: '汉体', - fontFamily: '汉体', - }, - { - name: '华康金刚黑', - fontFamily: '华康金刚黑', - }, -]; - -const enList = []; -export default [...cnList, ...enList]; -``` +## Enterprise Edition +Help enterprises quickly build online design tools, **reduce enterprise R&D investment, and avoid reinventing the wheel.** -```css -/* font.css */ -@font-face { - font-family: '汉体'; - src: url('./cn/汉体.ttf'); -} - -@font-face { - font-family: '华康金刚黑'; - src: url('./cn/华康金刚黑.ttf'); -} -``` +[Function Introduction](https://ws0gdejldw.feishu.cn/docx/GKmnddCgFokr4sxFeYNcoql1nAb) · [Product introduction](http://pro.kuaitu.cc/) · [Preview](https://www.kuaitu.cc/) + + +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**. + +- **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. +- **Plug-in architecture, easy to expand**: Based on plug-in API, quickly carry out secondary development of the editor. +- **Batch generation, fast output**: Support batch generation of images through HTTP interface and table files. +- **Drag-and-drop design, simple and easy to use**: Suitable for ordinary users, easy to get started without training. +- **Technical docking, document training**: Provide more support and efficiently complete technical docking. +- **Customized development, reduced investment**: Support the rapid completion of functional customized development and reduce R&D investment. +- + + Open source image editor + -### Custom template -The entry of the custom template is in the `src/components/importTmpl.vue` component, and the template image and JSON file can be placed in the `public/template` file, and the data can be displayed in the component. -## Contribution Guidelines +## Contribution guide -This is a design editor project that I am using. There are many similar paid editors on the market. As a developer, I still hope to find an editor that can be easily extended and customized. If you also have needs, welcome to join us maintain. +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. -Development introduction：[使用 fabric.js 快速开发一个图片编辑器](https://juejin.cn/post/7155040639497797645) +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. -## plan -### Possible New Features +### Related Materials +This is a technical note I published on the Nuggets community about the editor, which will have more details: -- [ ] svgIcon summary -- [ ] Heading Style List Template -- [ ] gradient configuration -- [x] copy paste shortcut -- [ ] Drag mode, zoom in and zoom out -- [ ] Canvas size saving -- [ ] Replace pictures, load url pictures -- [x] zoom -- [x] triangles, arrows, lines -- [ ] Tile background, Isometric background -- [ ] preview -- [ ] stroke strokeDashArray -- [x] draw lines +1. [Use fabric.js to quickly develop an image editor](https://juejin.cn/post/7155040639497797645), +2. [Detailed implementation of fabric.js developing an image editor](https://juejin.cn/post/7199849226745430076) +3. [What functions can fabric.js develop an image editor to achieve? Multi-image](https://juejin.cn/post/7222141882515128375) +4. [Sharing my open source projects and open source experience](https://juejin.cn/post/7224765991896121401) +5. [What functions can fabric.js achieve with the Canvas library? [Introduction to animated images](https://juejin.cn/post/7336743827827015731) +6. [Vue open source image editor](https://juejin.cn/post/7384258569590636595) +7. [Sharing of personal open source project commercialization experience](https://juejin.cn/post/7400687574967271478) +8. [Open source fabric.js image editor plug-in architecture](https://juejin.cn/post/7401071861847949339) +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). + + + + +## Acknowledgements + +- [刘明野](https://github.com/liumingye)标尺功能作者。 +- [palxiao](https://github.com/palxiao/poster-design/tree/main/packages/color-picker)设计编辑器的渐变组件。 + +## Administrator + + + + + + + + + +
+ + nihaojob +
+ nihaojob + + 		+ + Qiu-Jun +
+ Qiu-Jun(求职,求内推) + + 		+ + wuchenguang1998 +
+ wuchenguang1998 + +
+ +## Collaborators + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + nihaojob +
+ nihaojob + + 		+ + Qiu-Jun +
+ Qiu-Jun + + 		+ + wuchenguang1998 +
+ wuchenguang1998 + + 		+ + AliceLanniste +
+ AliceLanniste + + 		+ + ylx252 +
+ ylx252 + + 		+ + liumingye +
+ liumingye + +
+ + momo2019 +
+ momo2019 + + 		+ + ByeWord +
+ ByeWord + + 		+ + bigFace2019 +
+ bigFace2019 + + 		+ + wohuweixiya +
+ wohuweixiya + + 		+ + zjc2233 +
+ zjc2233 + + 		+ + ijry +
+ ijry + +
+ + makeng +
+ makeng + + 		+ + z09176141 +
+ z09176141 + + 		+ + a847244052 +
+ a847244052 + + 		+ + briver0825 +
+ briver0825 + + 		+ + skyscraperno1 +
+ skyscraperno1 + + 		+ + pengzhijian +
+ pengzhijian + +
+ + JiangShuQ +
+ JiangShuQ + + 		+ + hudenghui +
+ hudenghui + + 		+ + ddshiyu +
+ ddshiyu + + 		+ + yehan68 +
+ yehan68 + + 		+ + luke358 +
+ luke358 + + 		+ + xiaozeo +
+ xiaozeo + +
+ + x007xyz +
+ x007xyz + + 		+ + wozhi-cl +
+ wozhi-cl + + 		+ + vvbear +
+ vvbear + + 		+ + slarkerino +
+ slarkerino + + 		+ + rolitter +
+ rolitter + + 		+ + moJiXiang +
+ moJiXiang + +
+ + macheteHot +
+ macheteHot + + 		+ + liuyaojun +
+ liuyaojun + + 		+ + jooyyy +
+ jooyyy + + 		+ + guda-art +
+ guda-art + + 		+ + nanfb +
+ nanfb + + 		+ + dulltackle +
+ dulltackle + +
+ + Bamzc +
+ Bamzc + + 		+ + Yangzongtai +
+ Yangzongtai + + 		+ + Alicehhhmm +
+ Alicehhhmm + + 		+ + fuqianxi +
+ fuqianxi + + 		+ + icleitoncosta +
+ icleitoncosta + + 		+ + liucity +
+ liucity + +
+ ## License Licensed under the MIT License. +