# react-canvas-editor

**Repository Path**: wangjian0423/react-canvas-editor

## Basic Information

- **Project Name**: react-canvas-editor
- **Description**: 基于react技术+canvas实现的类presson平台的在线流程图编辑器。
- **Primary Language**: HTML/CSS
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-13
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flowchart Editor - 流程图编辑器

一个基于 React 和 Canvas 的在线流程图编辑器。

## 功能特性

- ✅ 拖拽添加图形元素（矩形、圆形、菱形等）
- ✅ Canvas 画布操作（缩放、平移）
- ✅ 图形选择、移动、编辑
- ✅ 连线功能
- ✅ 属性面板（颜色、文本编辑）
- ✅ 保存和导出功能
- ✅ 丰富的色彩主题

## 技术栈

- React 18
- TypeScript
- Canvas API
- Zustand 状态管理
- Vite 构建工具

## 项目结构

```
src/
├── components/           # UI组件
│   ├── Canvas/          # 画布组件
│   ├── Sidebar/         # 侧边栏
│   ├── Toolbar/         # 工具栏
│   └── PropertyPanel/   # 属性面板
├── core/                # 核心引擎
│   └── engine/          # Canvas渲染引擎
├── store/               # 状态管理
├── types/               # TypeScript类型定义
└── styles/              # 全局样式
```

## 运行项目

### 方法一：使用启动脚本（推荐）

**Windows 用户**:
1. 双击项目根目录下的 `start.bat` 文件
2. 或者右键点击 `start.ps1` 并选择"使用 PowerShell 运行"

### 方法二：使用 Node.js 脚本
```bash
node start.js
```

### 方法三：手动运行
1. 安装依赖：
   ```bash
   npm install
   ```

2. 启动开发服务器：
   ```bash
   npm run dev
   ```

3. 构建生产版本：
   ```bash
   npm run build
   ```

## 使用说明

1. 从左侧边栏拖拽图形到画布
2. 点击图形进行选择和编辑
3. 使用工具栏切换不同操作模式
4. 在右侧属性面板中调整图形属性
5. 使用鼠标滚轮缩放画布
6. 按住空格键拖拽平移画布

## 待完成功能

- [ ] 撤销/重做功能
- [ ] 更多图形类型
- [ ] 连线文本编辑
- [ ] 导入/导出PNG/SVG
- [ ] 快捷键支持
- [ ] 主题切换
- [ ] 协作功能

## 故障排除

如果遇到 "vite 不是内部或外部命令" 错误：
1. 确保已安装 Node.js (版本 >= 16)
2. 尝试使用 `start.bat` 或 `start.js` 脚本
3. 或者全局安装 Vite: `npm install -g vite`

## 许可证

MIT License