# 使用Konva实现Canvas编辑器方案

## 1. 方案概述

使用Konva.js库重新实现Canvas编辑器组件，实现所有要求的功能：
- Ctrl+滚轮缩放画布
- 支持图片拖拽到画布
- 画笔功能，支持不同颜色
- 橡皮擦功能
- 提示词输入框和重绘按钮

## 2. 技术栈

- Vue 3
- Konva.js (Canvas库)
- Element Plus (UI组件库)

## 3. 实现步骤

### 3.1 安装依赖
- 安装Konva和vue-konva
- 确保与现有项目兼容

### 3.2 创建KonvaCanvas组件
- 创建`KonvaCanvas.vue`组件
- 配置Konva舞台和图层
- 实现基本画布功能

### 3.3 实现核心功能

#### 3.3.1 缩放功能
- 监听鼠标滚轮事件
- 实现Ctrl+滚轮缩放逻辑
- 调整Konva舞台缩放比例

#### 3.3.2 拖拽功能
- 为现有图片添加拖拽支持
- 实现Konva的拖拽事件处理
- 将拖拽的图片添加到Konva舞台

#### 3.3.3 画笔功能
- 实现Konva的绘制功能
- 支持不同颜色选择
- 支持画笔粗细调整

#### 3.3.4 橡皮擦功能
- 实现橡皮擦模式
- 支持橡皮擦粗细调整

#### 3.3.5 重绘功能
- 将Konva画布转换为base64
- 获取提示词输入
- 打印到控制台

### 3.4 集成到现有项目
- 替换现有的`CanvasEditor.vue`组件
- 确保与`AdminDisassemblyDetail.vue`页面兼容

## 4. 文件结构

### 4.1 修改现有文件
- `apps/FrontendDesigner/package.json` - 添加Konva依赖

### 4.2 创建新文件
- `apps/FrontendDesigner/src/components/KonvaCanvas.vue` - Konva Canvas编辑器组件

### 4.3 更新现有文件
- `apps/FrontendDesigner/src/views/admin/AdminDisassemblyDetail/AdminDisassemblyDetail.vue` - 集成新组件

## 5. 预期效果

- 功能与原组件一致，但使用Konva库实现
- 性能优化，特别是在缩放和绘制时
- 代码结构更清晰，维护性更好
- 支持更多高级功能扩展

## 6. 风险评估

- Konva库的学习曲线
- 与现有项目的兼容性
- 功能实现的准确性
- 性能影响

## 7. 实施时间

预计实施时间：1-2小时
- 安装依赖：10分钟
- 创建组件：30分钟
- 实现功能：40分钟
- 集成测试：20分钟