# wise-draw **Repository Path**: wisechar/wise-draw ## Basic Information - **Project Name**: wise-draw - **Description**: 基于vue3+leafer ui 实现的在线绘图白板 - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2025-11-28 - **Last Updated**: 2026-02-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: TypeScript, Vue, leaferjs, 在线绘图, excalidraw ## README # Wise Draw 智图在线白板 ![预览图](docs/wise-draw.png) 一个易用的在线白板，面向流程图、原型草图与轻量协作场景。基于 Vue 3 + TypeScript 构建，采用高性能 Leafer UI 引擎进行 2D 图形渲染。 ## 功能概览 ### 绘图工具 - **选择工具**: 鼠标选择元素、移动、调整大小 - **抓手工具**: 拖拽画布视野 - **橡皮擦工具**: 删除画布元素 - **基本图形**: 矩形、圆形、菱形 - **线条工具**: 直线、箭头、自由绘制 - **文本工具**: 添加和编辑文字 - **图片工具**: 插入图片元素 ### 属性面板 - **外观属性**: 填充颜色、描边样式、边框宽度、透明度 - **排列属性**: 图层位置（置于顶层/底层、上移/下移） - **文本样式**: 字体大小、字体粗细、对齐方式 - **形状属性**: 边角圆滑度（矩形）、形状类型 ### 高级功能 - **智能连线**: 自动吸附到图形、图片、文本的最近锚点 - **动态更新**: 移动目标元素时，连线端点自动跟随更新 - **历史记录**: 完整的撤销/重做功能 - **数据持久化**: 保存/恢复 JSON 格式文件 - **导出功能**: 导出为 PNG 图片格式 ## 技术栈 | 类别 | 技术选型 | |------|----------| | 核心框架 | Vue 3 + TypeScript | | Canvas 渲染 | Leafer UI (高性能 2D 图形引擎) | | 状态管理 | Pinia | | 构建工具 | Vite | | UI 图标 | Lucide Vue | | CSS 预处理 | Sass | | 样式方案 | Tailwind CSS | ## 项目结构 ``` wise-draw/ ├── .gitee/ # Gitee 平台配置 │ ├── ISSUE_TEMPLATE.zh-CN.md │ └── PULL_REQUEST_TEMPLATE.zh-CN.md ├── .vscode/ # VS Code 配置 ├── docs/ # 文档目录 │ ├── anchor_strategy.md # 连线锚点策略说明 │ ├── architecture.md # 架构设计文档 │ └── wise-draw.png # 项目预览图 ├── public/ # 静态资源 │ └── favicon.ico ├── src/ # 源代码目录 │ ├── app/ # 应用入口 │ │ └── App.vue │ ├── assets/ # 样式资源 │ │ ├── base.css │ │ ├── main.css │ │ └── logo.svg │ ├── components/ # Vue 组件 │ │ ├── canvas/ │ │ │ └── CanvasView.vue # 画布视图组件 │ │ ├── common/ │ │ │ └── IconButton.vue # 图标按钮组件 │ │ ├── menu/ │ │ │ └── AppMenu.vue # 应用菜单组件 │ │ ├── panels/ │ │ │ └── PropertiesPanel.vue # 属性面板组件 │ │ ├── status/ │ │ │ └── StatusBar.vue # 状态栏组件 │ │ └── toolbar/ │ │ └── MainToolbar.vue # 主工具栏组件 │ ├── core/ # 核心逻辑模块 │ │ ├── canvas/ │ │ │ └── LeaferCanvas.ts # Canvas 封装类 │ │ ├── elements/ │ │ │ ├── ShapeFactory.ts # 图形工厂 │ │ │ └── types.ts # 元素类型定义 │ │ ├── history/ │ │ │ ├── Command.ts # 命令基类 │ │ │ ├── History.ts # 历史记录管理 │ │ │ └── commands.ts # 具体命令实现 │ │ └── tools/ # 绘图工具实现 │ │ ├── ArrowTool.ts # 箭头工具 │ │ ├── DiamondTool.ts # 菱形工具 │ │ ├── EllipseTool.ts # 圆形工具 │ │ ├── EraserTool.ts # 橡皮擦工具 │ │ ├── FreehandTool.ts # 自由绘制工具 │ │ ├── HandTool.ts # 抓手工具 │ │ ├── ImageTool.ts # 图片工具 │ │ ├── LineTool.ts # 直线工具 │ │ ├── RectTool.ts # 矩形工具 │ │ ├── SelectTool.ts # 选择工具 │ │ ├── TextTool.ts # 文本工具 │ │ └── Tool.ts # 工具基类与注册表 │ ├── store/ # Pinia 状态管理 │ │ ├── canvasStore.ts # 画布状态 │ │ ├── elementStore.ts # 元素状态 │ │ └── uiStore.ts # UI 状态 │ ├── styles/ # 全局样式 │ │ └── theme.scss # 主题样式 │ ├── types/ # TypeScript 类型定义 │ │ └── index.ts │ ├── utils/ # 工具函数 │ │ ├── events/ │ │ │ └── bus.ts # 事件总线 │ │ ├── math/ │ │ │ └── geometry.ts # 几何计算工具 │ │ └── storage/ │ │ └── index.ts # 本地存储工具 │ ├── main.ts # 应用入口文件 │ └── env.d.ts # Vue 模块声明 ├── index.html # HTML 入口 ├── package.json # 项目依赖 ├── vite.config.ts # Vite 配置 ├── tailwind.config.js # Tailwind 配置 ├── postcss.config.js # PostCSS 配置 ├── tsconfig.json # TypeScript 配置 └── eslint.config.ts # ESLint 配置 ``` ## 核心模块说明 ### 画布引擎 (LeaferCanvas) 基于 Leafer UI 引擎封装，提供高性能的 Canvas 渲染能力。支持矩形、椭圆、多边形、线条、路径、文本等元素类型的渲染。 ### 绘图工具系统 (Tools) 采用工具注册表模式管理各类绘图工具： - `Tool.ts`: 工具基类与注册中心 - 各具体工具实现（SelectTool、RectTool、EllipseTool 等） - 支持工具切换与状态管理 ### 元素工厂 (ShapeFactory) 统一创建和管理各类图形元素的工厂类，封装了 Leafer UI 的元素创建逻辑。 ### 历史记录系统 (History) 命令模式实现的历史记录管理： - 支持撤销/重做操作 - `Command.ts`: 命令抽象接口 - `commands.ts`: 具体命令实现（克隆元素等） ### 状态管理 (Store) - **canvasStore**: 管理画布视图状态、缩放、滚动等 - **elementStore**: 管理画布元素、选中状态、元素操作 - **uiStore**: 管理 UI 状态、面板显示、工具栏状态 ### 事件系统 - **事件总线 (bus.ts)**: 组件间通信机制 - **几何工具 (geometry.ts)**: 坐标计算、碰撞检测等几何运算 ## 安装与使用 ### 环境要求 - Node.js 16+ - pnpm / npm / yarn ### 安装依赖 ```bash # 使用 pnpm（推荐） pnpm install # 或使用 npm npm install # 或使用 yarn yarn install ``` ### 开发模式 ```bash pnpm run dev ``` 启动开发服务器，访问 `http://localhost:5173` ### 构建生产版本 ```bash pnpm run build ``` 构建产物输出至 `dist` 目录 ### 预览生产构建 ```bash pnpm run preview ``` ## 锚点策略 连线与箭头元素支持自动吸附到目标元素的锚点。详细策略说明请参阅 [锚点策略文档](docs/anchor_strategy.md)。 ### 锚点生成策略 1. **初始选中**: 选中元素时，根据元素类型自动计算锚点位置 2. **动态新增**: 添加新连线时，实时计算最近的可用锚点 ### 交互行为 - 视觉上以小圆点标识锚点位置 - 连线端点自动吸附到锚点 - 移动元素时，连线端点自动跟随更新 ## 架构设计 详细架构设计请参阅 [架构文档](docs/architecture.md)，包含： - 核心模块职责划分 - 渲染与选择流程 - 样式系统设计 - 连线/箭头附着机制 - 图片渲染流程 - 导出与导入实现 - 交互流程示例 ## Roadmap | 状态 | 功能 | 描述 | |------|------|------| | ✅ | 基础绘图工具 | 矩形、圆形、菱形、直线、箭头、自由绘制 | | ✅ | 文本与图片 | 文本编辑、图片插入 | | ✅ | 连线锚点吸附 | 自动吸附到最近锚点 | | ✅ | 历史记录 | 撤销/重做功能 | | ✅ | 导出功能 | PNG 图片导出、JSON 数据保存 | | 🔲 | 框选与多选 | 选择框提示与交互强化 | | 🔲 | 对齐与分布 | 吸附与参考线功能 | | 🔲 | 元素锁定 | 锁定与只读层保护 | | 🔲 | 图片编辑 | 裁剪与滤镜、资源库管理 | | 🔲 | 箭头扩展 | 曲线/折线/多形态箭头 | | 🔲 | 锚点配置 | 锚点策略可配置 | | 🔲 | 导出扩展 | SVG/PDF 导出、云端分享 | | 🔲 | 性能优化 | 持续优化性能与稳定性 | ## 贡献指南 ### Issue 反馈 如有功能建议或问题反馈，欢迎提交 [Issue](https://gitee.com/wisechar/wise-draw/issues)。 ### Pull Request 欢迎贡献代码，请参考 [Pull Request 模板](.gitee/PULL_REQUEST_TEMPLATE.zh-CN.md) 提交请求。 ## 许可证 本项目采用 MIT 许可证开源，详见 [LICENSE](LICENSE) 文件。 ## 致谢 - [Vue 3](https://vuejs.org/) - 渐进式 JavaScript 框架 - [Leafer UI](https://www.leaferjs.com/) - 高性能 Canvas 2D 渲染引擎 - [Pinia](https://pinia.vuejs.org/) - Vue 状态管理库 - [Vite](https://vitejs.dev/) - 下一代前端构建工具 - [Lucide Vue](https://lucide.dev/) - 精美的图标库 - [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架