项目链接: yft-design
体验Demo: pro.yft.design/editor
项目架构
Vue3.x + TypeScript + fabric.js + pinia + element-plus
目录结构
├── assets // 静态资源
│ ├── fonts // 在线字体文件
│ └── styles // 样式
├── components // 与业务逻辑无关的通用组件
├── configs // 配置文件
├── extension // 扩展元素
├── hooks // 供多个组件（模块）使用的 hooks 方法
├── mocks // mocks 数据
├── plugins // 自定义的 Vue 插件
├── types // 类型定义文件
├── store // Pinia store，参考：https://pinia.vuejs.org/
├── utils // 通用的工具方法
└── views // 业务组件目录
├── Canvas // 编辑器模块
├── Editor // 页面模块
└── Event // 事件模块
页面编辑
- 支持缩略图（右键操作）复制，粘贴，新增，删除，选择，拖动页面顺序
画布编辑
- 支持自定义选择画布尺寸（名片，单页，海报），印刷出血及安全线，印刷拼版，尺寸单位（mm）与（px）自由切换，快捷键滚轮缩放画布
- 支持渐变背景多种样式填充，支持线性渐变及经向渐变，可自定义修改角度，位置
- 支持网格背景多种样式填充，支持修改参数生成及随机生成和自定义生成模式
- 支持条纹背景多种样式填充，支持修改条纹颜色及随机条纹样式
- 支持背景颜色修改及背景图片填充画布
文字编辑
- 支持文字添加横向和纵向，编辑，左对齐，右对齐，居中，字体大小，font-family，字体颜色，背景颜色，粗体，倾斜，下划线，删除线，行距，字距，描边，底纹，图片填充
图片编辑
- 支持上传，图片裁切，水平和垂直翻转，支持多种颜色的蒙版和自定义样式的滤镜
元素编辑
- 支持上传svg元素及模板中多种格式的svg元素。元素可以自定义大小，颜色及背景填充
- 线段支持双击端点拖拽，修改尺寸，虚线
- 二维码支持矢量格式印刷，透明底图，自定义二维码内容，边距大小及容错率
- 条行码支持矢量格式印刷，支持国际上多种码制，自定义修改码值，码宽及码高
图层编辑
- 图层可显示元素类型，可拖拽图层元素修改元素层级，可删除，锁定，隐藏图层，文字可在图层中编辑
移动端编辑
- 移动端可简单拖动元素，修改字段，页面修改，元素旋转
