如何通过touchmove获取Y坐标，修正图片缩放的方向逻辑问题？

当前代码错误使用event.pageY判断滑动方向，导致无法区分向上/向下滑动。pageY是触摸点的绝对位置，而非滑动的位移差，因此无论向上还是向下滑动，只要触摸点在文档可视区域内，pageY始终为正，只会触发放大逻辑。

解决方案 #

通过记录触摸初始位置与当前位置的位移差来判断滑动方向：

• 向下滑动（手指从屏幕上方向下移，位移差为正）时放大图片
• 向上滑动（手指从屏幕下方向上移，位移差为负）时缩小图片

修正后的完整代码 #

// 存储初始触摸Y坐标
let startY;

// 监听触摸开始事件，记录初始位置
document.addEventListener('touchstart', (event) => {
  startY = event.touches[0].pageY;
});

document.addEventListener('touchmove', (event) => {
  // 阻止默认页面滚动行为，避免干扰缩放操作
  event.preventDefault();
  
  if (!startY) return;
  
  // 计算触摸位移差：当前位置 - 初始位置
  const deltaY = event.touches[0].pageY - startY;
  
  // 根据位移差判断滑动方向并调整缩放级别
  if (deltaY > 0) {
    // 向下滑动：放大图片
    zoomLevel *= 1.1;
  } else if (deltaY < 0) {
    // 向上滑动：缩小图片
    zoomLevel /= 1.1;
  }
  
  // 限制缩放范围在1到5之间
  zoomLevel = Math.max(1, Math.min(zoomLevel, 5));
  
  drawImage();
  
  // 更新初始Y坐标，确保连续滑动时判断准确
  startY = event.touches[0].pageY;
});

function drawImage() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  const imgWidth = img.width * zoomLevel;
  const imgHeight = img.height * zoomLevel;
  const imgX = canvasWidth / 2 - imgWidth / 2;
  const imgY = canvasHeight / 2 - imgHeight / 2;
  ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight);
}

关键改动说明 #

• 添加touchstart事件记录初始触摸位置startY，作为滑动方向判断的基准
• 通过deltaY（当前触摸位置与初始位置的差值）的正负区分滑动方向，替代原有的绝对位置判断
• 调用event.preventDefault()阻止页面默认滚动，避免滑动时页面滚动干扰缩放操作
• 使用Math.max()和Math.min()简化缩放范围限制逻辑
• 每次触摸移动后更新startY，确保连续滑动过程中方向判断的准确性

内容的提问来源于stack exchange，提问作者Jorge Rojas C.