49 lines
1.7 KiB
Markdown
49 lines
1.7 KiB
Markdown
# 实现移动端手指缩放功能
|
|
|
|
## 现状分析
|
|
- 当前代码已经实现了鼠标滚轮+Ctrl键的缩放功能
|
|
- 实现了场景拖拽功能，支持触摸和鼠标事件
|
|
- 有一个`preventPinchZoom`函数阻止了缩放手势，需要修改
|
|
- 没有实现双指缩放功能
|
|
|
|
## 实现方案
|
|
|
|
### 1. 修改preventPinchZoom函数
|
|
- 移除或修改该函数，允许在主内容区域进行缩放手势
|
|
- 保持在侧边栏区域阻止缩放手势
|
|
|
|
### 2. 添加双指缩放支持
|
|
- 添加触摸事件处理，实现双指缩放
|
|
- 在`touchstart`事件中记录双指初始距离
|
|
- 在`touchmove`事件中计算双指距离变化，实现缩放
|
|
- 保持与现有缩放逻辑的一致性
|
|
|
|
### 3. 实现缩放中心点计算
|
|
- 计算双指中心点作为缩放中心
|
|
- 调整场景偏移量，使缩放围绕双指中心点进行
|
|
|
|
### 4. 保持现有功能不变
|
|
- 确保鼠标滚轮缩放功能正常
|
|
- 确保单指拖拽功能正常
|
|
|
|
## 代码修改点
|
|
|
|
1. **修改preventPinchZoom函数**：仅在侧边栏区域阻止缩放手势
|
|
2. **添加触摸事件处理变量**：记录双指初始距离和中心点
|
|
3. **修改startSceneDrag函数**：添加双指检测逻辑
|
|
4. **修改dragScene函数**：添加双指缩放逻辑
|
|
5. **调整缩放计算逻辑**：支持从触摸事件获取缩放中心点
|
|
|
|
## 预期效果
|
|
- 移动端支持双指缩放场景
|
|
- 缩放围绕双指中心点进行
|
|
- 与现有鼠标滚轮缩放效果一致
|
|
- 保持单指拖拽功能正常
|
|
|
|
## 实现步骤
|
|
|
|
1. 分析现有触摸事件处理逻辑
|
|
2. 添加双指缩放所需的状态变量
|
|
3. 修改触摸事件处理函数，添加双指缩放逻辑
|
|
4. 测试在移动端的缩放效果
|
|
5. 确保与现有功能兼容 |