# 实现Canvas画布组件（含橡皮擦功能）

## 1. 功能需求
- 支持Ctrl+滚轮缩放画布内容
- 支持将现有div中的图片拖入画布
- 支持画笔功能，可使用不同颜色标注或绘画
- 支持橡皮擦功能，可擦除画布上的内容
- 添加textarea提示词输入框和重绘按钮
- 点击重绘按钮将canvas内容转为base64并与提示词一起打印到控制台

## 2. 实现方案

### 2.1 创建Canvas组件
创建一个新的Vue 3组件`CanvasEditor.vue`，包含以下核心功能：

#### 2.1.1 画布基础功能
- Canvas元素设置
- 缩放功能实现（Ctrl+滚轮）
- 拖拽功能实现
- 画笔功能实现
- 橡皮擦功能实现

#### 2.1.2 界面元素
- 画布容器
- 画笔/橡皮擦切换按钮
- 画笔颜色选择器
- 画笔粗细调整
- 提示词输入框
- 重绘按钮

### 2.2 组件集成
将`CanvasEditor.vue`组件集成到`AdminDisassemblyDetail.vue`页面中，位于`disassembled-images` div下方。

## 3. 技术实现

### 3.1 缩放功能
- 监听鼠标滚轮事件
- 判断Ctrl键是否按下
- 调整画布缩放比例
- 重新绘制画布内容

### 3.2 拖拽功能
- 为图片添加拖拽事件监听
- 实现拖拽开始、拖拽结束事件
- 将拖拽的图片绘制到画布上

### 3.3 画笔功能
- 监听鼠标按下、移动、抬起事件
- 实现不同颜色的画笔
- 支持画笔粗细调整

### 3.4 橡皮擦功能
- 添加画笔/橡皮擦切换按钮
- 实现橡皮擦模式：设置`globalCompositeOperation = 'destination-out'`
- 支持橡皮擦粗细调整
- 与画笔共享粗细调整控件

### 3.5 重绘功能
- 将canvas内容转换为base64格式
- 获取textarea中的提示词
- 将两者一起打印到控制台

## 4. 文件结构

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

### 4.2 修改现有文件
- `apps/FrontendDesigner/src/views/admin/AdminDisassemblyDetail/AdminDisassemblyDetail.vue` - 集成Canvas组件

## 5. 实现步骤

1. 创建`CanvasEditor.vue`组件，实现基础画布功能
2. 实现缩放功能
3. 实现拖拽功能
4. 实现画笔功能
5. 实现橡皮擦功能
6. 添加界面元素（切换按钮、颜色选择器、提示词输入框、重绘按钮）
7. 实现重绘功能
8. 将组件集成到AdminDisassemblyDetail页面
9. 测试所有功能

## 6. 预期效果

- 页面中显示一个Canvas画布，位于图片预览区域下方
- 可以通过Ctrl+滚轮缩放画布内容
- 可以将图片预览区域的图片拖入画布
- 可以切换画笔/橡皮擦模式
- 可以使用不同颜色的画笔在画布上绘画
- 可以使用橡皮擦擦除画布上的内容
- 可以调整画笔/橡皮擦的粗细
- 可以在提示词输入框中输入文字
- 点击重绘按钮后，控制台会打印canvas的base64图片和提示词

## 7. 注意事项

- 确保组件样式与现有页面风格一致
- 确保拖拽功能能够正确识别和处理图片
- 确保缩放功能不会影响画布的正常使用
- 确保画笔和橡皮擦功能流畅，不会出现卡顿
- 确保base64转换功能正常工作
- 确保画笔/橡皮擦切换功能正常