js实现pinch

实现 Pinch 手势缩放功能

Pinch 手势通常用于移动设备上实现缩放功能，通过两个手指的捏合或张开操作来放大或缩小目标元素。以下是使用 JavaScript 实现的基本方法：

监听触摸事件 需要监听 touchstart、touchmove 和 touchend 事件来跟踪手指的位置变化。当有两个或更多触摸点时，可以计算初始距离和当前距离的比例。

let initialDistance = null;
const targetElement = document.getElementById('zoom-target');

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

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

targetElement.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 属性实现缩放效果。可以结合 transform-origin 确保缩放中心正确：

function applyScale(element, scale) {
  element.style.transform = `scale(${scale})`;
  element.style.transformOrigin = 'center';
}

平滑缩放与边界控制

为了避免缩放效果过于生硬或超出合理范围，可以添加以下优化：

限制缩放范围 设置最小和最大缩放比例，防止过度缩小或放大：

const minScale = 0.5;
const maxScale = 3;

function applyScale(element, scale) {
  const clampedScale = Math.max(minScale, Math.min(maxScale, scale));
  element.style.transform = `scale(${clampedScale})`;
}

平滑过渡效果 添加 CSS 过渡效果使缩放更流畅：

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

处理多点触控冲突

当同时存在其他手势（如旋转或平移）时，需要确保 Pinch 手势不会与其他操作冲突：

手势优先级 通过比较初始角度变化和距离变化来判断用户意图：

let initialAngle = null;

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

targetElement.addEventListener('touchmove', (e) => {
  if (e.touches.length >= 2 && initialDistance !== null) {
    const currentDistance = getDistance(e.touches[0], e.touches[1]);
    const currentAngle = getAngle(e.touches[0], e.touches[1]);
    const distanceRatio = currentDistance / initialDistance;
    const angleDiff = Math.abs(currentAngle - initialAngle);

    // 角度变化较小时视为缩放操作
    if (angleDiff < 15) {
      applyScale(targetElement, distanceRatio);
    }
  }
});

function getAngle(touch1, touch2) {
  const dx = touch2.clientX - touch1.clientX;
  const dy = touch2.clientY - touch1.clientY;
  return Math.atan2(dy, dx) * 180 / Math.PI;
}

兼容性注意事项

不同浏览器对触摸事件的支持可能略有差异，建议进行特性检测：

if ('ontouchstart' in window) {
  // 添加触摸事件监听
} else {
  // 提供替代交互方式或提示
}

对于更复杂的手势需求，可以考虑使用现成的库如 Hammer.js 或 Interact.js，它们提供了更全面的手势识别功能。