102 lines
3.1 KiB
Markdown
102 lines
3.1 KiB
Markdown
# 实现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转换功能正常工作
|
||
- 确保画笔/橡皮擦切换功能正常 |