yft-design：开源版稿定设计，基于 Vue3 + Fabric.js 的在线设计工具

yft-design 是一款基于 Vue3 + Fabric.js 开发的开源在线设计工具，被誉为开源版的「稿定设计」。它提供了强大的海报设计和图片编辑功能，支持导出图片、SVG 和 PDF 格式，适用于海报生成、电商产品图制作、文章长图设计、视频/公众号封面编辑等多种场景。

项目简介

yft-design 由 Dromara 开源社区维护，是一款功能丰富、界面美观的在线设计工具。项目采用现代化的前端技术栈，基于 Canvas 实现高性能的图形渲染，提供了类似专业设计软件的操作体验。

截至目前，该项目在 GitHub 上已获得 1.5k+ stars 和 309 forks，拥有 10 位活跃贡献者，采用 MIT 开源协议。

核心特性

设计功能

海报设计：提供丰富的模板和素材，快速创建精美海报
图片编辑：支持图片裁剪、滤镜、调色等编辑功能
多格式导出：可导出为图片（PNG/JPG）、SVG 矢量图、PDF 文档
PSD 导入：支持导入 Photoshop 文件进行编辑
PDF 还原：适配稿定设计 PDF 还原功能

元素支持

文字编辑：支持标题、正文、滚动文字、变形文字、3D 文字效果
图片处理：本地上传、手机上传、图片裁剪、滤镜效果
形状绘制：提供多种预设形状，支持自定义绘制
线条工具：支持直线、曲线等多种线条样式
高级组件：拼图、表格、二维码、图表、图例、条码

编辑功能

画板管理：多画板支持，方便管理不同页面
辅助工具：标尺、辅助线、网格对齐
尺寸调整：灵活调整画布尺寸，支持尺寸延展
批量套版：批量应用模板，提高设计效率
AI 工具：集成 AI 辅助设计功能

技术栈

前端框架：Vue 3 + TypeScript
UI 组件库：Element Plus
图形引擎：Fabric.js（Canvas 渲染）
状态管理：Pinia
构建工具：Vite
包管理器：pnpm

安装指南

环境要求

Node.js >= 16
pnpm >= 8（推荐）

安装步骤

bash

# 克隆仓库
git clone https://github.com/dromara/yft-design.git
cd yft-design

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

项目结构

text

├── app/                    # 静态资源
│   ├── fabricCanvas/       # FabricCanvas 核心
│   ├── fabricControls/     # 选择器控件
│   ├── fabricRuler/        # 标尺组件
│   ├── fabricTool/         # 拖动工具
│   ├── guideLines/         # 辅助线
│   ├── hoverBorders/       # 预选择边框
│   └── wheelScroll/        # 缩放控制
├── assets/                 # 静态资源
│   ├── fonts/              # 在线字体文件
│   └── styles/             # 样式文件
├── components/             # 通用组件
├── configs/                # 配置文件
├── hooks/                  # 组合式函数
├── extension/              # 自定义 Fabric 对象
│   ├── controls/           # 裁剪控件
│   ├── mixins/             # 裁剪混入
│   └── object/             # 自定义元素
├── mocks/                  # Mock 数据
├── plugins/                # Vue 插件
├── types/                  # 类型定义
├── store/                  # Pinia Store
├── utils/                  # 工具方法
├── views/                  # 业务组件
│   ├── Canvas/             # 编辑器画布
│   └── Editor/             # 编辑器模块
└── worker/                 # Web Worker

使用示例

在线体验

访问官方在线演示：https://yft.design

基础用法

创建新设计
- 打开编辑器，选择模板或空白画布
- 设置画布尺寸和背景
添加元素
- 从左侧工具栏选择元素类型
- 拖拽到画布上进行编辑
编辑样式
- 选中元素后，右侧面板显示属性
- 调整颜色、大小、位置等属性
导出作品
- 点击「下载」按钮
- 选择导出格式（PNG/SVG/PDF）

进阶功能

文字特效

支持文字变形和 3D 效果
可添加阴影、描边等样式

图片处理

内置切图工具
支持批量处理

团队协作

登录后可保存到「我的空间」
支持作品管理和复用

应用场景

yft-design 适用于多种设计场景：

场景	说明
海报设计	活动海报、宣传海报、招聘海报
电商设计	商品主图、详情页、促销 banner
社交媒体	公众号封面、视频封面、长图文
印刷物料	名片、宣传单、易拉宝
文档导出	支持高质量 PDF 输出

项目链接

GitHub 仓库：https://github.com/dromara/yft-design
在线演示：https://yft.design
Dromara 社区：https://dromara.org

许可证

本项目采用 MIT License 开源协议，可自由用于商业和个人项目。