https://github.com/qiu-jun/element-fabric-editor

vue-fabric-editor的element plus版本
https://github.com/qiu-jun/element-fabric-editor

canvas-editor design design-editor editor fabricjs image-editor poster vite vue3

Last synced: about 2 months ago
JSON representation

vue-fabric-editor的element plus版本

Host: GitHub
URL: https://github.com/qiu-jun/element-fabric-editor
Owner: Qiu-Jun
License: mit
Created: 2024-07-18T05:05:12.000Z (10 months ago)
Default Branch: main
Last Pushed: 2025-02-20T08:27:34.000Z (2 months ago)
Last Synced: 2025-03-06T04:36:05.231Z (about 2 months ago)
Topics: canvas-editor, design, design-editor, editor, fabricjs, image-editor, poster, vite, vue3
Language: TypeScript
Homepage: https://qiu-jun.github.io/element-fabric-editor/#/
Size: 37.4 MB
Stars: 18
Watchers: 1
Forks: 8
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

## Element Fabric Editor

## 简介

快图设计，`vue-fabric-editor` 是一款基于 fabric.js 和 Vue 开发的图片编辑器，可自定义字体、素材、设计模板、右键菜单、快捷键。

`Element Fabric Editor`是由于一个单子甲方需要`ElementPlus`作为组件库，因此诞生而单独维护，`Element Fabric Editor`功能是和`vue-fabric-editor`上是一致的，但在组件划分上`Element Fabric Editor`会更细致，因为`Element Fabric Editor`不考虑`SDK`的打包，所以在组件抽离会更细致

未来`Element Fabric Editor`会把`lib/core`插件化去除，使用hooks+store替换

另外此项目也是[electron-fabric-editor](https://github.com/Qiu-Jun/electron-fabric-editor)的`Render`进程

[动图介绍](https://juejin.cn/post/7222141882515128375) · [介绍视频](https://www.bilibili.com/video/BV1US421A7TU/?spm_id_from=333.999.0.0) · [预览地址](https://qiu-jun.github.io/element-fabric-editor/#/)

#### 使用

```bash
# 如果没有pnpm 项目使用pnpm，commit自动校验都是用pnpm,请使用pnpm启动项目
npm install pnpm -g

pnpm install

pnpm dev

# 提交代码
git add . # 添加需要提交的文件
pnpm commit # 使用此命令编写commit
```

### 已有功能

- 导入 JSON、PSD 文件
- 导出 PNG、SVG、JSON 文件
- 组合/拆分组合
- 图层功能
- 渐变属性
- 外观属性/字体属性/描边/阴影
- 撤销/重做
- 快捷键
- 右键菜单
- 辅助线
- 标尺
- 自定义字体
- 自定义模板素材
- 插入 SVG、图片素材
- 多元素水平、垂直对齐方式
- 背景属性设置
- 箭头/线条
- 画笔/多边形绘制
- 二维码/条形码
- 图片替换/裁剪/滤镜
- 水印
- 国际化