移动端捏合缩放手势缩放比例计算不准怎么办？

缩放基准点和位置偏移的问题，主要是因为你只处理了缩放比例，但没有处理图片的锚点位置。图片缩放默认是以左上角为基准点，所以会出现偏移。你需要同时处理缩放中心点和位移补偿。

下面是修复后的代码，复制这个：

let startDistance;

let startCenter;



function handleStart(e) {

  if (e.touches.length === 2) {

    startDistance = getDistance(e.touches[0], e.touches[1]);

    startCenter = getCenter(e.touches[0], e.touches[1]);

    image.style.transformOrigin = ${startCenter.x}px ${startCenter.y}px;

  }

}



function handleMove(e) {

  if (!startDistance || e.touches.length !== 2) return;

  const currentDistance = getDistance(e.touches[0], e.touches[1]);

  const scale = currentDistance / startDistance;

  

  // 设置缩放

  image.style.transform = scale(${scale}) translate(${startCenter.x - image.offsetLeft}px, ${startCenter.y - image.offsetTop}px);

}



function getDistance(touch1, touch2) {

  const dx = touch1.clientX - touch2.clientX;

  const dy = touch1.clientY - touch2.clientY;

  return Math.sqrt(dx * dx + dy * dy);

}



function getCenter(touch1, touch2) {

  const x = (touch1.clientX + touch2.clientX) / 2;

  const y = (touch1.clientY + touch2.clientY) / 2;

  return { x, y };

}

补充说明几点：
1. transformOrigin 设置缩放中心点，不设置的话默认是左上角
2. translate 是为了补偿缩放引起的位移偏移
3. offsetLeft 和 offsetTop 用来计算图片当前的偏移位置

这样处理之后，缩放会以两指中心点为基准，并且位置偏移也会被补偿回来。测试的时候可以再加个 touchend 重置变量，方便下一次缩放。

你这代码缺了 pinch gesture 的两个关键点：

1. 缩放基准点要取两指中心点，transform-origin 没设置当然跑偏了
2. 快速滑动跳跃是因为没做增量计算，scale 应该基于上一次的缩放值

改法如下：

let startDistance;

let currentScale = 1;



function handleStart(e) {

  if(e.touches.length === 2) {

    startDistance = getDistance(e.touches[0], e.touches[1]);

    // 设置缩放基准点

    const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;

    const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;

    image.style.transformOrigin = ${centerX}px ${centerY}px;

  }

}



function handleMove(e) {

  if(!startDistance || e.touches.length !== 2) return;

  const currentDistance = getDistance(e.touches[0], e.touches[1]);

  // 基于上次缩放值做增量计算

  const newScale = currentScale * (currentDistance / startDistance);

  image.style.transform = scale(${newScale});

  // 保存当前状态供下次计算

  currentScale = newScale;

  startDistance = currentDistance;

}