h5 实现 捏合

捏合手势实现（H5）

在H5中实现捏合手势（Pinch Zoom）主要通过监听触摸事件（Touch Events）来计算两个触摸点之间的距离变化。以下是具体实现方法：

监听触摸事件

通过touchstart、touchmove和touchend事件跟踪用户的多点触控行为：

let initialDistance = null;

element.addEventListener('touchstart', (e) => {
  if (e.touches.length >= 2) {
    initialDistance = getDistance(e.touches[0], e.touches[1]);
  }
});

element.addEventListener('touchmove', (e) => {
  if (e.touches.length >= 2 && initialDistance !== null) {
    const currentDistance = getDistance(e.touches[0], e.touches[1]);
    const scale = currentDistance / initialDistance;
    applyScale(element, scale);
  }
});

element.addEventListener('touchend', () => {
  initialDistance = null;
});

计算两点距离

使用勾股定理计算两个触摸点之间的直线距离：

function getDistance(touch1, touch2) {
  const dx = touch2.clientX - touch1.clientX;
  const dy = touch2.clientY - touch1.clientY;
  return Math.sqrt(dx * dx + dy * dy);
}

应用缩放效果

通过CSS transform属性实现元素缩放：

function applyScale(element, scale) {
  // 限制缩放范围（可选）
  scale = Math.min(Math.max(0.5, scale), 3);
  element.style.transform = `scale(${scale})`;
}

完整示例

<div id="zoomable" style="width: 200px; height: 200px; background: blue;"></div>

<script>
  const element = document.getElementById('zoomable');
  let initialDistance = null;

  function getDistance(touch1, touch2) {
    const dx = touch2.clientX - touch1.clientX;
    const dy = touch2.clientY - touch1.clientY;
    return Math.sqrt(dx * dx + dy * dy);
  }

  function applyScale(el, scale) {
    scale = Math.min(Math.max(0.5, scale), 3);
    el.style.transform = `scale(${scale})`;
  }

  element.addEventListener('touchstart', (e) => {
    if (e.touches.length >= 2) {
      initialDistance = getDistance(e.touches[0], e.touches[1]);
    }
  });

  element.addEventListener('touchmove', (e) => {
    if (e.touches.length >= 2 && initialDistance !== null) {
      const currentDistance = getDistance(e.touches[0], e.touches[1]);
      const scale = currentDistance / initialDistance;
      applyScale(element, scale);
    }
  });

  element.addEventListener('touchend', () => {
    initialDistance = null;
  });
</script>

注意事项

• 移动端浏览器需要设置viewport meta标签：

  

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 对于更复杂的场景（如图片查看器），需要考虑缩放中心点、边界限制等问题

• 某些浏览器可能有默认的捏合缩放行为，可以通过e.preventDefault()阻止

• 考虑添加过渡动画效果提升用户体验：

  #zoomable {
    transition: transform 0.1s ease-out;
  }

这种方法适用于大多数现代移动浏览器，实现了基本的捏合缩放功能。对于更高级的需求，可以考虑使用专门的库如Hammer.js或AlloyFinger。