js计算手势的移动距离（双指扩大或缩小）

本文链接：https://blog.youkuaiyun.com/qq_36438918/article/details/131457649

该代码段实现了一个功能，通过监听touchstart,touchmove,touchend事件来计算双指在屏幕上的移动距离，利用Math.hypot方法计算两点间的欧氏距离。根据起始和结束时的距离变化，判断是放大还是缩小操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算两点之间的距离判断双指移动的距离是多少
从而实现控制的距离
首先监听这个移动的开始touchstart 拿到移动开始的手指的位置，多点触屏所以记录两个

设定一个元素 咱先按照心情起个名字
var touchState = null
let container = document.getElementById('XXXX')
container.addEventListener('touchstart', function (evt) {
    touchState = {
        startX: evt.touches[0].pageX,
        startY: evt.touches[0].pageY,
        endX: evt.touches[0].pageX,
        endY: evt.touches[0].pageY,
        startX2: evt.touches[1] ? evt.touches[1].pageX : -1,
        startY2: evt.touches[1] ? evt.touches[1].pageY: -1,
        endX2: evt.touches[1] ? evt.touches[1].pageX : -1,
        endY2: evt.touches[1] ? evt.touches[1].pageY : -1
    }
},false)


监听完开始的 咱们要监听移动的了,移动的时候记着他你手指移动的位置和距离

container.addEventListener('touchmove', function (evt) {
    if (touchState === null) {
        return
    }
    touchState.endX = evt.touches[0].pageX
    touchState.endY = evt.touches[0].pageY
    touchState.endX2 = evt.touches[1] ? evt.touches[1].pageX : -1
    touchState.endY2 = evt.touches[1] ? evt.touches[1].pageY : -1
},false)


移动的过程也监听了 咱们来看看移动结束的时候应该肿么办呢

container.addEventListener('touchend', function (evt) {
    if (touchState === null) {
        return
    }
    // 计算两点的距离
    var getDistance = function (startX, startY, endX, endY) {
        return Math.hypot(endX - startX, endY - startY)
    }
    if (touchState.startX2 !== -1 && touchState.endX2 !== -1 && touchState.startY2 != -1 && touchState.endY2 !== -1) {
        let distanceStart = getDistance(touchState.startX, touchState.startY, touchState.startX2, touchState.startY2)
        let distanceEnd = getDistance(touchState.endX, touchState.endY, touchState.endX2, touchState.endY2);
        //起始时两点距离和结束时两点距离进行比较，判断是放大还是缩小
        if(distanceStart < distanceEnd) {
            // todo
        }else if (distanceStart > distanceEnd) {
            // todo
        }
    }
},false)



一个新的没见过的东西出现了
Math.hypot
这个是算所有参数的平方根
他的计算规则是
1.如果没有传递任何的参数那么返回值是+0
2.如果任意一个参数是正无穷，那么返回值是正无穷
3.如果任意一个参数是负无穷，那么返回值是负无穷
4.如果所有参数中都不包含正无穷和负无穷，并且任意一个参数是NaN，那么返回NaN
5.如果所有参数都是+0或者-0，那么返回值是+0
6.其余情况下，就先计算所有参数的平方和，再将该和的平方根作为最终返回值