JS 移动端手势识别 - 处理触摸事件实现缩放与拖拽的交互逻辑-js教程-PHP中文网

移动端手势识别的核心是监听touchstart、touchmove、touchend事件，通过管理触摸状态、计算手指间距与中心点实现缩放拖拽；需防止默认行为、使用requestAnimationFrame优化流畅度，并结合touch-action等CSS属性提升响应精度。

js 移动端手势识别 - 处理触摸事件实现缩放与拖拽的交互逻辑

移动端手势识别，尤其是处理像缩放和拖拽这样的复杂交互，核心其实就是对JavaScript的触摸事件（touchstart、touchmove、touchend）进行精细的监听和计算。说白了，就是捕捉用户手指在屏幕上的“舞蹈”，然后把这些动作翻译成我们想要的效果。这活儿听起来简单，但真做起来，里面门道不少，需要你对事件流、坐标系和状态管理有比较清晰的认识。

解决方案

要实现JS移动端手势的缩放与拖拽，我们主要围绕touchstart、touchmove和touchend这三个事件展开。我个人觉得，最关键的是要管理好触摸的状态，比如当前有多少根手指在屏幕上，它们的位置在哪里，以及上一次触摸的状态是什么。

一个比较直接的思路是：

初始化状态： 维护一个对象来存储当前触摸点的信息，比如startTouches（touchstart时的所有触摸点），initialDistance（两指缩放时的初始距离），currentScale（当前的缩放比例），currentTranslateX/Y（当前的平移量）。
touchstart 事件：
- 在这里，我们记录下所有触摸点的位置。
- 如果只有一根手指，我们认为它可能是拖拽的开始。记录下手指的初始位置和当前元素的平移量。
- 如果是两根手指，这通常是缩放的信号。记录两指的初始距离，并计算它们的中心点。
touchmove 事件：
- 这是最频繁触发的事件，也是计算的核心。
- 拖拽逻辑（一根手指）： 计算当前手指位置与touchstart时位置的差值，这个差值就是元素的位移量。然后将这个位移量累加到元素的transform: translate()属性上。
- 缩放逻辑（两根手指）：
  - 获取当前两根手指的实时位置。
  - 计算这两根手指之间的距离（勾股定理）。
  - 将当前距离与touchstart时记录的initialDistance进行比较，得到一个缩放比例因子。
  - 将这个比例因子应用到元素的transform: scale()属性上。
  - 这里需要注意一个细节，缩放应该围绕两指的中心点进行，所以还需要根据缩放比例和中心点来调整元素的平移，以确保缩放效果看起来自然。
- 阻止默认行为： 务必调用event.preventDefault()，否则浏览器可能会触发滚动或默认的缩放行为，导致我们的自定义手势失效或冲突。
touchend 事件：
- 当手指离开屏幕时触发。
- 我们需要清除或更新触摸状态，为下一次手势做准备。
- 如果只剩一根手指离开，而另一根还在屏幕上，那么需要将当前状态调整为单指拖拽模式。
- 如果所有手指都离开了，就重置所有手势相关的临时变量。

我给你一个简化版的JavaScript代码骨架，它主要展示了如何处理多点触控下的缩放和单点拖拽。

const targetElement = document.getElementById('my-draggable-scalable-element');

let initialPinchDistance = 0; // 两指初始距离
let currentScale = 1;         // 当前缩放比例
let startScale = 1;           // 缩放开始时的比例
let translateX = 0;           // 当前X轴平移量
let translateY = 0;           // 当前Y轴平移量
let startTranslateX = 0;      // 拖拽开始时的X轴平移量
let startTranslateY = 0;      // 拖拽开始时的Y轴平移量
let lastTouchX = 0;           // 单指拖拽时记录上一个触摸点X
let lastTouchY = 0;           // 单指拖拽时记录上一个触摸点Y

let isPinching = false;       // 是否正在缩放
let isDragging = false;       // 是否正在拖拽

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

function updateTransform() {
    targetElement.style.transform = `translate(${translateX}px, ${translateY}px) scale(${currentScale})`;
}

targetElement.addEventListener('touchstart', (e) => {
    e.preventDefault(); // 阻止默认的滚动和缩放行为

    if (e.touches.length === 2) {
        // 两指触控：开始缩放
        isPinching = true;
        isDragging = false; // 确保拖拽状态关闭
        initialPinchDistance = getDistance(e.touches[0], e.touches[1]);
        startScale = currentScale; // 记录缩放开始时的比例
    } else if (e.touches.length === 1) {
        // 单指触控：开始拖拽
        isDragging = true;
        isPinching = false; // 确保缩放状态关闭
        lastTouchX = e.touches[0].clientX;
        lastTouchY = e.touches[0].clientY;
        startTranslateX = translateX; // 记录拖拽开始时的平移量
        startTranslateY = translateY;
    }
});

targetElement.addEventListener('touchmove', (e) => {
    e.preventDefault();

    if (isPinching && e.touches.length === 2) {
        // 正在缩放
        const currentPinchDistance = getDistance(e.touches[0], e.touches[1]);
        const scaleFactor = currentPinchDistance / initialPinchDistance;
        currentScale = startScale * scaleFactor;

        // 缩放中心点的处理可以更复杂，这里简化为只更新scale
        // 实际应用中，还需要根据两指中心点和缩放比例来调整translateX/Y，确保缩放视觉中心不变
        updateTransform();

    } else if (isDragging && e.touches.length === 1) {
        // 正在拖拽
        const deltaX = e.touches[0].clientX - lastTouchX;
        const deltaY = e.touches[0].clientY - lastTouchY;
        translateX = startTranslateX + deltaX;
        translateY = startTranslateY + deltaY;
        updateTransform();
    }
});

targetElement.addEventListener('touchend', (e) => {
    // 如果所有手指都离开了，重置状态
    if (e.touches.length === 0) {
        isPinching = false;
        isDragging = false;
    } else if (e.touches.length === 1 && isPinching) {
        // 如果是从两指缩放变成单指，则切换到拖拽模式
        isPinching = false;
        isDragging = true;
        lastTouchX = e.touches[0].clientX;
        lastTouchY = e.touches[0].clientY;
        startTranslateX = translateX;
        startTranslateY = translateY;
    }
    // 注意：touchend的e.touches只会包含仍在屏幕上的手指
    // 所以 e.changedTouches 才是真正离开的手指
});

// 初始化样式
updateTransform();

登录后复制

为什么移动端手势识别总是感觉有点“飘”？如何提升用户体验的稳定性？

说实话，我刚开始做移动端手势的时候，也经常觉得“飘”，或者说不够跟手。这背后原因挺多的，但最核心的往往是几个点：浏览器默认行为、事件处理频率和CSS属性的干扰。

我们常常遇到的问题是：

浏览器默认行为的干扰： 比如你在touchmove里没加e.preventDefault()，那用户一滑动，页面就跟着滚了，你的手势效果自然就“飘”了，甚至根本不生效。这是一个非常常见的坑，我个人觉得，只要是自定义手势，preventDefault()几乎是必选项。
事件处理的频率： touchmove事件触发非常频繁，如果你的计算逻辑太复杂或者DOM操作太多，就可能导致卡顿，用户就会觉得不流畅。这时候，requestAnimationFrame就派上用场了。把所有的DOM更新操作都放到requestAnimationFrame回调里，让浏览器在下一次重绘前统一处理，这样能最大限度地保证动画的流畅性。
CSS touch-action 属性： 这也是一个非常重要的优化点。touch-action可以告诉浏览器，某个元素区域应该如何响应用户的触摸事件。比如，touch-action: none;意味着该元素上的所有触摸事件都由JavaScript处理，浏览器不会有任何默认行为（如滚动、缩放）。这比单纯的preventDefault()更底层，更高效，可以减少很多不必要的浏览器计算，从而提升手势的“跟手”感。我通常会在需要手势的元素上直接设置touch-action: none;。
坐标系的理解偏差： 有时候我们混淆了clientX/Y、pageX/Y、screenX/Y，或者没考虑到transform属性对元素实际位置的影响。clientX/Y通常是相对于视口（viewport）的，对于手势计算来说，这个通常最实用。但如果你要考虑元素相对于文档的位置，那可能需要pageX/Y。保持坐标系的一致性非常关键。
状态管理混乱： 当手指数量变化时（比如从单指拖拽变成双指缩放，或者反过来），如果没有妥善地更新手势状态变量，就很容易出现逻辑错误，导致手势识别不准确。

要提升稳定性，我的建议是：

Eva Design System

基于深度学习的色彩生成器

查看详情

始终使用 e.preventDefault() 在 touchstart 和 touchmove 中，或者更推荐使用 touch-action: none; 在CSS中。
利用 requestAnimationFrame 优化DOM更新，避免在 touchmove 中直接频繁操作DOM。
精简计算逻辑，尤其是在 touchmove 中，只做必要的数学计算。
清晰地管理手势状态，确保在不同手指数量下，手势模式能正确切换。

处理多点触控时，如何精确计算缩放中心点和旋转角度？

当涉及到多点触控，尤其是两根手指时，计算缩放中心点和旋转角度确实是让手势更自然的关键。如果只是简单地缩放，元素会以自身中心点缩放，而不是用户手指的中心，这体验就很差。

缩放中心点（Pinch Center）：
- 缩放中心点，或者说“捏合中心”，应该是两根手指在屏幕上的中点。
- 假设两根手指的坐标分别是 (x1, y1) 和 (x2, y2)。
- 那么它们的中心点坐标就是 centerX = (x1 + x2) / 2 和 centerY = (y1 + y2) / 2。
- 在touchstart时，记录这个初始中心点。
- 在touchmove时，计算实时的中心点。
- 如何应用： 当你计算出新的缩放比例 newScale 后，如果元素是围绕其自身中心缩放的，那么它的位置会发生偏移。为了让它看起来是围绕手指中心缩放，我们需要对元素的 translateX 和 translateY 进行补偿。
  - 一个常见的做法是：计算元素当前中心点与手指中心点的偏移量。然后，当应用新的缩放比例时，这个偏移量也会按比例放大。我们需要反向地调整元素的平移，来抵消这个放大效果。
  - 具体来说，如果元素原来的左上角是 (elX, elY)，缩放前手指中心点相对于元素左上角的偏移是 (offsetX, offsetY)。缩放后，这个偏移会变成 (offsetX * newScale, offsetY * newScale)。那么元素新的左上角就应该是 (centerX - offsetX * newScale, centerY - offsetY * newScale)。通过比较新旧左上角的位置，就能计算出需要额外平移的量。
  - 这块儿的数学计算会稍微复杂一点，涉及到矩阵变换或者更直观的“先将元素平移到中心点，缩放，再平移回去”的思路。我通常会把元素的原点（transform-origin）设置到手指的中心点，然后直接缩放，这样可以简化计算。但如果你要保持 transform-origin 为 0 0 或者 50% 50%，就得手动计算平移补偿了。
旋转角度（Rotation Angle）：
- 旋转角度的计算也是基于两根手指。
- 你可以将两根手指看作一个向量。
- 在touchstart时，记录两指形成的初始向量（例如，从touch1到touch2）。
- 在touchmove时，获取实时的两指向量。
- 计算角度： 两个向量之间的夹角就是旋转的角度。这可以通过 Math.atan2(y, x) 函数来计算。
  - initialAngle = Math.atan2(touch2.clientY - touch1.clientY, touch2.clientX - touch1.clientX)
  - currentAngle = Math.atan2(currentTouch2.clientY - currentTouch1.clientY, currentTouch2.clientX - currentTouch1.clientX)
  - rotationDelta = currentAngle - initialAngle
- 然后将 rotationDelta 累加到元素的 transform: rotate() 属性上。同样，旋转也需要围绕两指的中心点进行，所以前面提到的中心点计算依然重要。

这些计算都需要在touchmove事件中实时进行，并且最好是结合requestAnimationFrame来更新元素的transform样式，以保证流畅性。记住，e.touches数组里保存着所有当前在屏幕上的触摸点信息，它们的clientX/Y属性是你的计算基础。

除了基础的缩放拖拽，还有哪些高级手势可以探索？

一旦你掌握了基础的触摸事件和多点触控的原理，很多“高级”手势其实都是这些基础的组合和扩展。我个人觉得，所谓的“高级”，更多是在用户体验和交互细节上的打磨。

捏合旋转（Pinch-Rotate）：
- 这其实就是缩放和旋转的组合。在touchmove中，你同时计算两指的距离变化（用于缩放）和角度变化（用于旋转），然后将两者叠加到元素的transform属性上。这比单独的缩放或旋转更自然，因为用户在实际操作中，很难做到纯粹的缩放而不带一点旋转。
滑动/轻扫（Swipe）：
- 这通常是单指手势。在touchstart时记录手指位置和时间戳。在touchend时，比较手指的最终位置与初始位置的距离，以及经过的时间。如果距离超过某个阈值，且时间在某个范围内，就可以判断为一次滑动。根据滑动方向（水平或垂直），可以触发页面切换、列表项删除等操作。
长按（Long Press）：
- 同样是单指手势。在touchstart时，设置一个定时器。如果在定时器触发前touchend或touchmove的距离超过某个阈值，就清除定时器。如果定时器成功触发，则判断为长按。这常用于弹出上下文菜单或进入编辑模式。
双击（Double Tap）：
- 这需要判断两次点击事件的时间间隔和位置接近程度。在touchend时，记录当前点击的时间和位置。如果短时间内（比如300ms内）又发生了另一次点击，并且两次点击的位置非常接近，就可以判断为双击。常用于图片放大缩小。
自定义手势库的集成：
- 说实话，如果你的项目对手势交互有很高的要求，或者需要支持多种复杂手势，自己从头写一遍所有的手势逻辑会非常耗时且容易出错。这时候，我会倾向于使用一些成熟的JavaScript手势库，比如 Hammer.js、AlloyFinger 等。这些库已经封装了大量的手势识别逻辑，包括多点触控、手势冲突处理、惯性动画等，能大大提高开发效率和手势的稳定性。它们底层依然是基于我们讨论的触摸事件，但提供了更高级、更易用的API。
- 使用这些库的好处是，它们通常考虑了各种边缘情况和性能优化，比如事件节流、去抖动、防止误触等，这些都是自己实现时容易忽略的细节。