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