如何在移动设备上用JavaScript追踪手指捏合缩放比例与旋转角度？

你遇到的核心问题是：touchstart事件本身并不提供rotation和scale属性，这些手势相关的计算值只会在手势变化过程（touchmove事件）中产生，而且标准触摸事件对象里没有直接暴露这两个属性，需要通过两个触摸点的坐标自行计算。

正确实现思路 #

1. 在touchstart时记录两个触摸点的初始位置，计算初始距离（用于后续计算缩放比例）和初始角度（用于后续计算旋转角度）。
2. 在touchmove时，实时获取当前两个触摸点的位置，计算当前距离和角度，与初始值对比得到缩放比例和旋转角度。

修正后的代码示例 #

let initialDistance = 0;
let initialAngle = 0;
let scale = 1;
let degrees = 0;

myCan.addEventListener('touchstart', function(e) {
    if (e.targetTouches.length === 2) {
        // 获取两个初始触摸点
        const touch1 = e.targetTouches[0];
        const touch2 = e.targetTouches[1];
        
        // 计算初始两点距离
        initialDistance = getDistance(touch1, touch2);
        // 计算初始两点连线的角度
        initialAngle = getAngle(touch1, touch2);
    }
});

myCan.addEventListener('touchmove', function(e) {
    e.preventDefault(); // 阻止页面默认滚动/缩放行为
    if (e.targetTouches.length === 2) {
        const touch1 = e.targetTouches[0];
        const touch2 = e.targetTouches[1];
        
        // 计算当前距离与缩放比例
        const currentDistance = getDistance(touch1, touch2);
        scale = currentDistance / initialDistance;
        
        // 计算当前角度与旋转差值
        const currentAngle = getAngle(touch1, touch2);
        degrees = currentAngle - initialAngle;
        // 转换为0-360度范围
        degrees = (360 + degrees) % 360;
    }
});

// 辅助函数：计算两点间距离
function getDistance(touch1, touch2) {
    const dx = touch2.clientX - touch1.clientX;
    const dy = touch2.clientY - touch1.clientY;
    return Math.sqrt(dx * dx + dy * dy);
}

// 辅助函数：计算两点连线与X轴的夹角（角度制）
function getAngle(touch1, touch2) {
    const dx = touch2.clientX - touch1.clientX;
    const dy = touch2.clientY - touch1.clientY;
    return Math.atan2(dy, dx) * 180 / Math.PI;
}

关键说明 #

• 必须监听touchmove事件才能获取手势变化的实时数据，touchstart仅用于记录初始状态。
• 调用preventDefault()可以避免触摸手势触发页面默认行为（如滚动、缩放），确保自定义手势正常工作。
• 自行计算的方式兼容性更好，不会依赖部分浏览器曾支持但已废弃的GestureEvent。

内容的提问来源于stack exchange，提问作者Pragyat Srivastava