基于 Vue 3 + Vite + LeaferJS 的仿美图在线图片编辑器项目 01
📖 项目概述
这是一个功能强大的基于 Vue 3 + Vite + LeaferJS 的在线图片编辑器，提供了丰富的图片编辑功能，包括文字添加、图形绘制、图片处理等。项目采用现代化的前端技术栈，提供流畅的用户体验和专业级的编辑功能。
🎯 项目特色
- 🎨 丰富的编辑工具: 文字、图形、线条、箭头等多种编辑元素
- 🌓 主题切换: 支持明暗主题无缝切换
- 💾 智能保存: 自动保存和手动保存，支持撤销/重做
- 📱 响应式设计: 适配不同屏幕尺寸
- ⚡ 高性能: 基于 Leafer UI 的高性能画布引擎
- 🛠️ 模块化架构: 清晰的代码结构，易于维护和扩展
🚀 技术栈
核心框架
- Vue 3: 采用 Composition API，提供更好的类型支持和逻辑复用
- Vite: 现代化构建工具，快速的热重载和构建体验
- Pinia: Vue 3 官方推荐的状态管理库
- Vue Router 4: 路由管理
UI 和样式
- UnoCSS: 原子化 CSS 引擎，提供高性能的样式解决方案
- DaisyUI: 基于 Tailwind CSS 的组件库
- FontAwesome: 丰富的图标库
画布引擎
- Leafer UI: 高性能的 2D 图形渲染引擎
- @leafer-in/editor: 可视化编辑器插件
- @leafer-in/text-editor: 文本编辑器插件
- @leafer-in/export: 导出功能插件
开发工具
- ESLint + Oxlint: 双重代码检查，确保代码质量
- Prettier: 代码格式化
- Bun: 现代化的 JavaScript 运行时和包管理器
🏗️ 项目架构
整体布局结构
src/views/photoEdit/PhotoEditMain.vue (主编辑界面)
├── PhotoEditNavbar.vue (顶部导航栏)
├── PhotoEditSidebar.vue (左侧工具栏 - 360px)
├── PhotoEditCanvas.vue (中央画布区域)
└── PhotoEditPropertyPanel.vue (右侧属性面板 - 400px)
状态管理
stores/photoEdit.js - 编辑状态管理
state: {
selectedElement: null, // 当前选中的元素
canvasCommand: null // 画布操作命令
}
stores/theme.js - 主题管理
state: {
theme: 'light' | 'dark' // 主题状态，持久化到 localStorage
}
工具模块 (utils/)
- canvasStorageUtil.js: 画布状态保存/加载/撤销/重做
- textUtil.js: 文字元素创建和更新
- lineUtil.js: 线条和箭头工具
- rectUtil.js: 矩形工具
- warpTextUtil.js: 变形文字工具
- locationTimestampUtil.js: 位置时间戳元素
- toastUtil.js: 通知系统
🎨 功能特性
📝 文字编辑功能
多样化文字类型
- 普通文字: 基础文字输入，支持字体大小、颜色、粗细调整
- 标题文字: 32px 大号文字，适合标题使用
- 副标题: 18px 中等字体，适合副标题
- 正文: 14px 常规字体，适合正文内容
- 特效文字: 支持渐变、描边、阴影等特效
- 变形文字: 弧形或 S 形路径文字，提供艺术效果
文字属性控制
- 字体大小调整 (8px - 100px)
- 字体粗细 (100-900)
- 文字颜色选择
- 描边颜色和宽度
- 阴影效果设置
- 精确位置控制 (X/Y 坐标)
🎯 图形绘制工具
基础图形
- 线条: 支持颜色和宽度自定义
- 箭头: 可调节箭头样式和方向
- 矩形: 支持圆角、填充色、描边设置
- 自由图形: 基础几何形状绘制
图形属性
- 填充颜色设置
- 描边颜色和宽度
- 圆角半径调整
- 透明度控制
- 旋转角度设置
🖼️ 图片处理功能
图片操作
- 本地上传: 支持多种图片格式导入
- 背景设置: 画布背景图片设置
- 尺寸调整: 保持宽高比的智能缩放
- 精确定位: X/Y 坐标精确控制
画布管理
- 预设尺寸: 1:1、3:4、A4、社交媒体尺寸等
- 自定义尺寸: 支持任意尺寸设置
- 背景颜色: 支持透明度的背景色设置
- 缩放控制: 10%-400% 缩放，适合屏幕功能
🛠️ 高级功能
智能编辑系统
- 多图层管理: 基于 Leafer UI 的图层系统
- 元素选择: 点击选择，实时属性面板更新
- 拖拽操作: 自由移动画布元素
- 调整句柄: 可视化的尺寸调整控件
- 浮动工具栏: 上下文菜单，支持复制/删除
文件操作系统
- 自动保存: 防抖动的自动状态保存
- 手动保存: 用户主动保存操作
- 撤销/重做: 最多 50 步的操作历史
- 状态恢复: 完整的画布状态重建
- PNG 导出: 2倍像素密度的高质量图片导出
特殊元素
- 位置时间戳: 包含位置、时间、日期、星期的 SVG 组件
- 水印元素: 品牌标识和装饰元素
- 素材库: 表情、徽章、特效等装饰素材
🎨 用户界面设计
主题系统
- 明暗主题: 完整的 UI 主题切换
- 持久化: 主题选择保存到本地存储
- 动态样式: 主题感知的组件样式
响应式布局
- 4 面板布局: 顶部导航 + 左工具栏 + 中央画布 + 右属性面板
- 固定宽度: 左侧工具栏 360px，右侧属性面板 400px
- 弹性画布: 中央画布区域自适应剩余空间
- 移动端优化: 支持不同屏幕尺寸的响应式设计
交互体验
- 实时预览: 属性修改即时反映到画布
- 智能提示: Toast 通知系统提供操作反馈
- 流畅动画: 平滑的过渡效果和交互动画
- 键盘快捷键: 支持常用操作的快捷键
🚀 开发和部署
开发环境设置
# 安装依赖
bun install
# 启动开发服务器 (端口 2550)
bun dev
# 代码检查和格式化
bun lint
bun run format
# 生产构建
bun run build
性能优化
- 节流更新: 防止过度重渲染
- 高效存储: 优化的状态序列化
- 内存管理: 适当的清理和垃圾回收
- 防抖操作: 流畅的用户交互体验
代码质量
- 双重检查: ESLint + Oxlint 确保代码质量
- 自动格式化: Prettier 统一代码风格
- 类型安全: Vue 3 Composition API 提供更好的类型推导
- 模块化: 清晰的文件组织和依赖关系
🔮 技术亮点
1. 高性能画布引擎
基于 Leafer UI 的 2D 图形渲染引擎，提供：
- GPU 加速渲染
- 大量元素的流畅操作
- 精确的事件处理
- 丰富的图形 API
2. 现代化的状态管理
使用 Pinia 实现：
- 类型安全的状态管理
- 模块化的状态组织
- 开发工具集成
- 简洁的 API 设计
3. 原子化 CSS 架构
UnoCSS + DaisyUI 组合提供：
- 极小的运行时开销
- 高度可定制的设计系统
- 现代化的组件库
- 一致的设计语言
4. 智能的数据持久化
实现了完整的状态管理：
- 自动保存机制
- 历史记录管理
- 断点续传功能
- 数据完整性保证
📈 项目价值
这个项目展示了现代前端开发的最佳实践：
- 技术选型: 选用了 Vue 3、Vite、UnoCSS 等最新的前端技术
- 架构设计: 清晰的模块化架构，易于维护和扩展
- 用户体验: 流畅的交互和丰富的功能
- 代码质量: 完善的代码检查和格式化工具
- 性能优化: 多种性能优化策略的应用
该项目可以作为学习现代 Vue 3 开发、图形编辑器开发、以及前端工程化的优秀案例。无论是对于前端开发者学习新技术，还是作为商业图片编辑器的基础，都具有很高的参考价值。
