如何在不依赖外部库的情况下用JavaScript实现捏合缩放？求优质算法

核心逻辑 #

• 捏合缩放时，以双指中点为基准中心，同步计算缩放系数和平移偏移量，避免缩放后内容偏移
• 双指间距不变时，平移量等于双指中点的位移，与单指拖拽效果完全一致

关键计算公式 #

• 双指间距计算：间距 = Math.hypot(x2 - x1, y2 - y1)（等价于你给出的√((x2-x1)² + (y2-y1)²)）
• 缩放系数：scaleFactor = 当前双指间距 / 初始双指间距

完整代码实现 #

以下是基于原生JavaScript的移动端触摸事件实现：

// 初始化状态变量
let isPinching = false;
let initialScale = 1;
let currentScale = 1;
let initialTranslateX = 0;
let currentTranslateX = 0;
let initialTranslateY = 0;
let currentTranslateY = 0;
let initialPinchCenter = { x: 0, y: 0 };
let initialPinchDistance = 0;

// 目标元素（替换成你需要缩放的DOM元素）
const targetElement = document.getElementById('zoom-target');

// 触摸开始事件
targetElement.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    isPinching = true;
    // 记录当前状态作为初始值
    initialScale = currentScale;
    initialTranslateX = currentTranslateX;
    initialTranslateY = currentTranslateY;
    
    // 计算初始双指中心和间距
    const [touch1, touch2] = e.touches;
    initialPinchCenter.x = (touch1.clientX + touch2.clientX) / 2;
    initialPinchCenter.y = (touch1.clientY + touch2.clientY) / 2;
    initialPinchDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
  } else if (e.touches.length === 1) {
    // 单指拖拽初始状态记录
    initialTranslateX = currentTranslateX;
    initialTranslateY = currentTranslateY;
    initialPinchCenter.x = e.touches[0].clientX;
    initialPinchCenter.y = e.touches[0].clientY;
  }
});

// 触摸移动事件
targetElement.addEventListener('touchmove', (e) => {
  e.preventDefault(); // 阻止默认滚动行为
  
  if (e.touches.length === 2 && isPinching) {
    const [touch1, touch2] = e.touches;
    // 计算当前双指中心和间距
    const currentCenterX = (touch1.clientX + touch2.clientX) / 2;
    const currentCenterY = (touch1.clientY + touch2.clientY) / 2;
    const currentDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
    
    // 计算缩放系数
    const scaleFactor = currentDistance / initialPinchDistance;
    currentScale = initialScale * scaleFactor;
    
    // 计算平移偏移：保证双指中心位置不变
    currentTranslateX = initialTranslateX + (currentCenterX - initialPinchCenter.x) * (1 - scaleFactor);
    currentTranslateY = initialTranslateY + (currentCenterY - initialPinchCenter.y) * (1 - scaleFactor);
    
    // 应用变换到元素
    targetElement.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`;
  } else if (e.touches.length === 1) {
    // 单指拖拽逻辑
    const touch = e.touches[0];
    currentTranslateX = initialTranslateX + (touch.clientX - initialPinchCenter.x);
    currentTranslateY = initialTranslateY + (touch.clientY - initialPinchCenter.y);
    targetElement.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`;
  }
});

// 触摸结束事件
targetElement.addEventListener('touchend', () => {
  isPinching = false;
});

关键细节说明 #

• 使用Math.hypot计算间距，比手动计算平方根更高效且避免精度丢失
• 缩放时的平移修正公式是核心：通过(当前中心 - 初始中心) * (1 - 缩放系数)抵消缩放带来的中心偏移，确保双指始终是缩放基准点
• 双指间距不变时，scaleFactor趋近于1，此时平移量等于双指中心的位移，自动实现纯平移效果，和单指拖拽逻辑对齐

内容的提问来源于stack exchange，提问作者madhuri jawadekar