# 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**: 1
- **Created**: 2025-11-28
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, Vue, leaferjs, 在线绘图, excalidraw

## README

# Wise Draw 智图在线白板

![预览图](docs/wise-draw.png)

一个易用的在线白板，面向流程图、原型草图与轻量协作场景。

## 功能概览

- 工具栏
  - 🖱️ 选择 `select`、🖐️ 抓手 `hand`、🧽 橡皮擦 `eraser`
  - ◻️ 矩形 `rect`、⭕ 圆形 `ellipse`、♦️ 菱形 `diamond`
  - ➖ 直线 `line`、➡️ 箭头 `arrow-straight`、✏️ 自由绘制 `freehand`
  - T 文本 `text`、🖼️ 图片 `image`
- 属性面板
  - 颜色、描边、边角、透明度、图层、文本样式
  - 针对图片/文本提供精简可用的属性项
- 连线/箭头附着
  - 自动吸附到图形/图片/文本的最近锚点，移动目标时自动更新端点
- 历史与导出
  - 撤销/重做、导出 PNG、保存/恢复 JSON

## 技术栈

- **核心框架**: Vue 3 + TypeScript
- **Canvas 引擎**: Leafer UI (高性能 2D 图形渲染引擎)
- **状态管理**: Pinia
- **构建工具**: Vite
- **UI 图标**: Lucide Vue
- **CSS 预处理**: Sass

## 安装与使用

- 安装：`npm install`
- 开发：`npm run dev`
- 构建：`npm run build`
- 预览：`npm run preview`

## Roadmap

- 🔲 框选与多选优化（选择框提示与交互强化）
- 🔧 对齐与分布、吸附与参考线
- 🔒 元素锁定与只读层
- 🖼️ 图片裁剪与滤镜、资源库管理
- ➰ 箭头样式扩展（曲线/折线/多形态）
- 🔗 锚点策略可配置（中心/边缘/自定义）
- 📤 SVG/PDF 导出、云端分享
- ⚡ 性能与稳定性优化

更多使用与架构说明见 `docs/architecture.md`。