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