✨前言
看到一个有意思的开源库就分享一下吧~这个库运行之后可以用于封面/海报/这些设计，也是非常的不错！
项目链接: 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元素。元素可以自定义大小，颜色及背景填充
- 线段支持双击端点拖拽，修改尺寸，虚线
- 二维码支持矢量格式印刷，透明底图，自定义二维码内容，边距大小及容错率
- 条行码支持矢量格式印刷，支持国际上多种码制，自定义修改码值，码宽及码高
图层编辑
- 图层可显示元素类型，可拖拽图层元素修改元素层级，可删除，锁定，隐藏图层，文字可在图层中编辑
移动端编辑
- 移动端可简单拖动元素，修改字段，页面修改，元素旋转
💫教程
安装准备：
所需软件：visual studio，node-v20.9.0-win-x64
所需环境请在网上搜索visual studio安装教程即可，这里小站就不多说了
使用npm指令
①.安装依赖代码：
npm i②.运行代码：
npm run dev使用pnpm指令
①.安装依赖代码：
pnpm install②.运行代码：
pnpm dev如何在手机上面进行编辑？
运行代码之后会输出这个代码
Local:http://localhost:5174/
Network: http://192.168.1.2:5174/如果要在手机上面进行编辑你需要访问Network开头的网址，输入到手机的浏览器里面就可以访问了
🔗下载
‼️声明
作者：morestrive
链接：https://juejin.cn/post/7238804998276087868
来源：稀土掘金
© 版权声明
THE END
喜欢就支持一下吧
相关推荐
暂无评论内容