如何在JavaScript中实现图片捏合缩放及平移功能

要在捏合缩放时实现图片平移，需要同时跟踪两指的中心位置变化，结合缩放比例调整图片的偏移量。以下是改进后的完整实现：

HTML 结构 #

先调整容器结构，添加需要缩放平移的图片，并设置基础样式确保定位逻辑生效：

<style>
#zoom_here {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  touch-action: none; /* 阻止浏览器默认触摸行为，避免干扰自定义操作 */
}

#zoom_img {
  position: absolute;
  transform-origin: center center;
  transition: transform 0.05s ease-out; /* 让缩放平移更平滑 */
}
</style>

<div id='zoom_here'>
  <img id="zoom_img" src="你的图片地址" alt="可缩放平移的图片">
</div>

JavaScript 实现 #

更新触摸事件逻辑，添加状态变量跟踪缩放比例、平移位置和触摸中心：

// 用于记录触摸和变换状态的变量
let initialDistance = 0;
let currentScale = 1;
let initialScale = 1;
let initialTranslateX = 0;
let initialTranslateY = 0;
let initialTouchCenter = { x: 0, y: 0 };

const zoomContainer = document.getElementById('zoom_here');
const zoomImg = document.getElementById('zoom_img');

function handleTouchStart(ev) {
  ev.preventDefault();
  if (ev.targetTouches.length === 2) {
    // 记录初始两指距离
    const touch1 = ev.targetTouches[0];
    const touch2 = ev.targetTouches[1];
    initialDistance = Math.hypot(
      touch1.pageX - touch2.pageX,
      touch1.pageY - touch2.pageY
    );
    
    // 读取当前图片的缩放和平移状态
    const transform = getComputedStyle(zoomImg).transform;
    if (transform !== 'none') {
      const matrix = new DOMMatrix(transform);
      initialScale = matrix.a; // 取x方向缩放比例（x/y保持一致）
      initialTranslateX = matrix.e; // 当前平移X值
      initialTranslateY = matrix.f; // 当前平移Y值
    } else {
      initialScale = 1;
      initialTranslateX = 0;
      initialTranslateY = 0;
    }
    
    // 记录初始两指的中心坐标
    initialTouchCenter.x = (touch1.pageX + touch2.pageX) / 2;
    initialTouchCenter.y = (touch1.pageY + touch2.pageY) / 2;
  }
}

function handleTouchMove(ev) {
  ev.preventDefault();
  if (ev.targetTouches.length === 2) {
    const touch1 = ev.targetTouches[0];
    const touch2 = ev.targetTouches[1];
    
    // 计算当前两指距离，得出缩放比例
    const currentDistance = Math.hypot(
      touch1.pageX - touch2.pageX,
      touch1.pageY - touch2.pageY
    );
    currentScale = initialScale * (currentDistance / initialDistance);
    // 可选：限制缩放范围，避免过度缩放或缩小
    currentScale = Math.max(0.5, Math.min(currentScale, 3));
    
    // 计算当前两指的中心坐标
    const currentTouchCenter = {
      x: (touch1.pageX + touch2.pageX) / 2,
      y: (touch1.pageY + touch2.pageY) / 2
    };
    
    // 根据中心偏移和缩放比例，计算最终平移量
    const deltaX = (currentTouchCenter.x - initialTouchCenter.x) * (currentScale / initialScale);
    const deltaY = (currentTouchCenter.y - initialTouchCenter.y) * (currentScale / initialScale);
    const translateX = initialTranslateX + deltaX;
    const translateY = initialTranslateY + deltaY;
    
    // 将变换应用到图片上
    zoomImg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${currentScale})`;
  }
}

zoomContainer.addEventListener('touchstart', handleTouchStart, false);
zoomContainer.addEventListener('touchmove', handleTouchMove, false);

核心要点说明 #

• 阻止默认行为：通过touch-action: none和ev.preventDefault()避免浏览器自带的滚动、缩放逻辑干扰自定义操作。
• 状态备份：在触摸开始时记录当前的缩放和平移状态，确保后续操作基于当前画面计算，不会重置状态。
• 中心对齐逻辑：以两指中心为基准计算平移偏移，保证缩放过程中图片跟随手指中心移动，符合用户操作直觉。
• 缩放范围限制：通过Math.max和Math.min控制缩放比例区间，避免出现极端缩放导致的显示问题。

内容的提问来源于stack exchange，提问作者Madhuri Javadekar