序言

在移动端开发中，手势操作非常常见，本篇文章主要讲解常见的 9 种手势操作原理,期间会穿插一些数学知识，将数学运用到实际问题中，数学部分可能会比较枯燥，但希望大家坚持读完，相信会收益良多。

点按：tap
长按：longTap
双击：doubleTap
双指缩放：pinch
双指旋转：rotate
单指缩放：singlePinch
单指旋转：singleRotate
滑动：swipe
拖拽：drag

原理分析

所有的手势操作都是基于浏览器原生事件touchstart, touchmove, touchend, touchcancel进行上层封装。

TouchEvent 对象上有以下几个属性值，在封装手势库时会用到

touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表
- clientX 和 clientY 手指相对于可视区的一个坐标
- pageX 和 pageY 手指相对于页面的一个坐标

点按

为什需要封装tap事件，而不用clcik事件？

因为click事件在移动端会有 300ms 延迟，在早期由于移动端会有双击缩放的这个操作，因此浏览器在 click 之后要等待 300ms，看用户有没有下一次点击，判断这次操作是不是双击。

为什么不用touchstart或touchend做点按操作？

因为touchstart或touchend在部分 android 机下会造成滑屏误触(在做滑动操作时touchmove会触发touchend事件)。

所以需要自定义tap事件。

原理：在点击时,记录手指坐标。抬起时，判断手指坐标和摁下的手指坐标的差值,这个差值，小于一定值时我们就认定它是点击。也就是以start时手指的坐标画一个单位圆,如果end时手指的坐标在此单位圆中,说明是点击操作)

     function tap(el, fn) {
           let startPoint = {};
           el.addEventListener('touchstart', function (e) {
               startPoint = {
                   x: e.changedTouches[0].pageX,
                   y: e.changedTouches[0].pageY
               }
           });
           el.addEventListener('touchend', function (e) {
               let nowPoint = {
                   x: e.changedTouches[0].pageX,
                   y: e.changedTouches[0].pageY
               }
               if (Math.abs(nowPoint.x - startPoint.x) < 10
               && Math.abs(nowPoint.y - startPoint.y) < 10) {
                   fn && fn.call(el, e);
               }
           });

长按

原理：touchstart 时开启一个750毫秒的定时器，如果 750ms 内有 touchmove 或者 touchend 都会清除掉该定时器。超过 750ms 没有 touchmove 或者 touchend 就会触发 longTap

  function langTap(el, fn) {
        let longTapTimeout = null
        el.addEventListener('touchstart', function (e) {
            e.preventDefault()
            //手指数量
            if (e.touches.length == 1) {
                longTapTimeout = setTimeout(() => {
                    fn && fn.call(el, e)
                }, 750)
            }
        })
        el.addEventListener('touchmove', function (e) {
            clearInterval(longTapTimeout)
        })
        el.addEventListener('touchend', function (e) {
            clearInterval(longTapTimeout)
        });
    }

双击

原理：在touchstart中判断两次点击的时间间隔0<time<250ms 并且判断两次按下的手指坐标的差值是否小于某个定值（此逻辑和 tap 事件一样）。如果都满足，那么就在touchend事件中触发双击。

function doubleTap(el, fn) {
    let last, prePoint = { X: 0, Y: 0 }, isDoubleTap = false
    el.addEventListener('touchstart', function (e) {
        e.preventDefault()
        let now = Date.now()
        let time = now - (last || now)
        let currentPoint = {
            X: e.touches[0].pageX,
            Y: e.touches[0].pageY
        }
        // 判断时间差和坐标位置是否小于某个定值
        isDoubleTap = time > 0 && time < 250 && Math.abs(currentPoint.X - prePoint.X) < 30 && Math.abs(currentPoint.X - prePoint.Y < 30)
        last = Date.now()
        prePoint.X = currentPoint.X
        prePoint.Y = currentPoint.Y
    });
    el.addEventListener('touchend', function (e) {
        if (isDoubleTap) {
            // 重置状态
            prePoint = { X: 0, Y: 0 }
            isDoubleTap = false
            fn && fn.call(el, e)
        }
    });
}

双指缩放

原理：在捏的过程中求两点之间的距离比值，就是缩放scale。这个 scale 会挂载在 event 上，让用户反馈给 dom 的 transform 或者其他元素的 scale 属性

用勾股定理求两点之间距离

勾股定理

已知 A,B两点的坐标(x1,y1),(x2,y2)，即可根据勾股定理求出c边的长度

用代码表示

Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1))

完整代码：


    // 计算手指距离
       function getLen(v) {
           return Math.sqrt(v.x * v.x + v.y * v.y)
       }
       function pinch(el, fn) {
           let preV = { x: null, y: null }
           el.addEventListener('touchstart', function (e) {
               if (e.touches.length > 1) {
                   preV = { x: e.touches[1].pageX - e.touches[0].pageX, y: e.touches[1].pageY - e.touches[0].pageY }
               }
           })
           el.addEventListener('touchmove', function (e) {
               e.preventDefault()
               if (e.touches.length > 1) {
                   v = { x: e.touches[1].pageX - e.touches[0].pageX, y: e.touches[1].pageY - e.touches[0].pageY }
                   if (preV.x !== null) {
                       // 距离比值
                       e.scale = getLen(v) / getLen(preV)
                       fn && fn.call(el, e)
                   }
               }
           })
       }
       let box = document.getElementById('box')
       pinch(box, e => {
           box.innerHTML = e.scale
       })

双指旋转

原理：双指旋转也就是求两次手势状态之间的夹角θ,和旋转方向。那怎么求夹角和旋转方向呢？可以用向量的数量积和叉乘来求夹角和方向。先复习一下向量相关的知识。

向量的基本概念

向量：既有大小又有方向的量叫向量，记作：| $\overline{AB}$ | 或 a

单位向量：长度为 1 的向量叫做单位向量

向量的模：是一个标量，只有大小，没有方向，可用勾股定理求出，记为|a|，

向量的坐标运算

加法运算：若a=(x1,y1),b=(x2,y2),则a+b=(x1+x2,y1-y2)

减法运算：若a=(x1,y1),b=(x2,y2),则a-b=(x1-x2,y1-y2)

数乘运算：若a=(x1,y1),b=(x2,y2),则 λa=(λx1,λy1)

向量坐标的求法：若a=(x1,y1),b=(x2,y2),则| $\overline{AB}$ |=(x2-x1,y2-y1)

即一个向量的坐标等于此向量的有向线段的终点坐标减去始点坐标

获取向量的函数：

    /**
    @params {Object} 始点坐标A
    @params {Object} 终点坐标B
    @returns {Object} 向量:{x,y}
    */
   function getVector(A, B) {
       return { x: B.x - A.x, y: B.y - A.y }
   }

向量相乘

两个向量相乘得到的不是一个坐标，而是一个确定的数：a*b=x1*x2+y1*y2

向量的数乘(叉乘)

概念：一般的，规定实数λ与向量a的积是一个向量，这种运算叫做向量的数乘，记作λa,它的长度与方向规定如下：

|λa|=λ|a|
当 λ>0 时，λa 的方向与 a 的方向相同
当 λ<0 时，λa 的方向与 a 的方向方向相反

向量共线定理

概念：当且仅当有唯一一个实数λ,是b=λa，那么向量a与b共线

向量共线的坐标推导

当x1·y2-x2·y1>0，b 向量相对于 a 向量顺时针旋转
当x1·y2-x2·y1<0，b 向量相对于 a 向量逆时针旋转
当x1·y2-x2·y1=0，共线

通过共线定理我们可以判断出旋转的方向

向量的数量积(内积)

概念：已知两个非零向量a,b,a=(x1,y1),b=(x2,y2)。我们把数量|a||b|·cosθ叫做a与b的数量积(或内积),记作a*b,即a·b=|a|·|b|·cosθ=x1*x2+y1*y2，其中θ是a与b的夹角

数量积可根据三角形的余弦定理推导出来：

由此我们可以得出

cosθ=(x1·x2+y1·y2)/(|a|·|b|)

通过向量的数量积我们可以求出旋转的角度。

完整代码为：


        //根据共线定理判断方向
        function cross(v1, v2) {
            return v1.x * v2.y - v2.x * v1.y
        }
        // 勾股定理计算长度
        function getLen(v) {
            return Math.sqrt(v.x * v.x + v.y * v.y)
        }
        // 计算向量积
        function dot(v1, v2) {
            return v1.x * v2.x + v1.y * v2.y;
        }
        // 计算弧度
        function getAngle(v1, v2) {
            let mr = getLen(v1) * getLen(v2)
            if (mr === 0) return 0
            let r = dot(v1, v2) / mr  //得到弧度
            if (r > 1) r = 1   // Math.acos(1)=0
            return Math.acos(r)
        }
        // 传入两个向量
        function getRotateAngle(v1, v2) {
            let angle = getAngle(v1, v2)
            if (cross(v1, v2) > 0) {
                angle *= -1
            }
            return angle * 180 / Math.PI //弧度转角度
        }

        function rotate(el, fn) {
            let preV = { x: null, y: null }
            el.addEventListener('touchmove', function (e) {
                if (e.touches.length > 1) {
                    let currentX = e.touches[0].pageX,
                        currentY = e.touches[0].pageY,
                        // 计算向量
                        v = { x: e.touches[1].pageX - currentX, y: e.touches[1].pageY - currentY }
                    // 拿到旋转角度 因为每次计算的旋转角度是上一次和当前旋转的差值，所以的到的旋转角度会比较小，注意与Math.atan2()区分
                    e.angle = getRotateAngle(v, preV)
                    if (preV.x !== null) {
                        fn && fn.call(el, e)
                    }
                    preV.x = v.x
                    preV.y = v.y
                }

            })
        }
        let box = document.getElementById('box')
        rotate(box, e => {
            box.innerHTML = e.angle
        })

单指缩放和单指旋转都需要依赖于操作元素的基准点(操作元素的中心点)进行计算

单指缩放

由 a 向量单指放大到 b 向量，对元素进行了中心放大，此时缩放值即为 b 向量的模 / a 向量的模。和缩放手势原理相同。

单指旋转

和双指旋转一样,θ就是我们要求的角度

单指缩放,单指旋转，多用于处理图片场景当中，比如说在 canvas 画布当中给图片添加水印或文字。

滑动(swipe)

滑动这个操作很有意思，它正好和 点按手势相反，需要当 touchstart 的手的坐标和 touchend 时候手的坐标 x、y 方向偏移要大于 30，然后再去判断用户到底是从上到下，还是从下到上，或者从左到右、从右到左滑动。

比较横纵坐标的绝对值，然后再根据某以方向的坐标判断出上下滑动还是左右滑动

Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')

完整代码：


  function swipeDirection(x1, x2, y1, y2) {
            return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
        }
        function swipe(el, fn) {
            let startPoint = {};
            el.addEventListener('touchstart', function (e) {
                e.preventDefault();
                startPoint = {
                    x: e.changedTouches[0].pageX,
                    y: e.changedTouches[0].pageY
                }
            });
            el.addEventListener('touchend', function (e) {
                let nowPoint = {
                    x: e.changedTouches[0].pageX,
                    y: e.changedTouches[0].pageY
                }
                if (Math.abs(nowPoint.x - startPoint.x) > 10 && Math.abs(nowPoint.y - startPoint.y) > 10) {
                    e.direction = swipeDirection(startPoint.x, nowPoint.x, startPoint.y, nowPoint.y);
                    fn && fn.call(el, e);
                }
            });
        }
        let box = document.getElementById('box')
        swipe(box, e => {
            box.innerHTML = e.direction
        })

拖拽

在touchmove把每次移动的距离deltaX,deltaY，挂载在 event 上。拿到移动距离+=就能实现一个简单的拖拽

 div {
        width: 200px;
        height: 200px;
        border: 1px solid sienna;
        background: saddlebrown;
    }

 <div id="box">拖拽此物体</div>

 function drag(el, fn) {
            let x2 = null, y2 = null
            el.addEventListener('touchmove', function (e) {
                e.preventDefault()
                let currentX = e.touches[0].pageX, currentY = e.touches[0].pageY
                if (x2 !== null || y2 !== null) {
                    e.deltaX = currentX - x2
                    e.deltaY = currentY - y2
                    fn && fn.call(el, e)
                }
                x2 = currentX
                y2 = currentY
            })
            el.addEventListener('touchend', function (e) {
                x2 = null
                y2 = null
            })
        }
        let box = document.getElementById('box')
        box.style.transform = `translate3d(0,0,0)`
        drag(box, e => {
            let translates = getComputedStyle(box, null).transform
            let x = parseFloat(translates.substring(6).split(',')[4]) //解析x轴数值
            let y = parseFloat(translates.substring(6).split(',')[5]); //解析y轴数值
            box.style.transform = `translate3d(${x += e.deltaX}px,${y += e.deltaY}px,0)`
        })

同时支持触摸事件和鼠标事件

虽然说触摸事件和鼠标事件很相似，不过二者仍然需要分开处理。假如想让应用程序同时运行在桌面浏览器与手机浏览器之中，那么必须将触摸事件于鼠标事件同等对待。把事件处理逻辑封装在同一系列方法当中。这些方法不需要知道到底是触摸事件还是鼠标事件。

ul {
    width: 200px;
    height: 361px;
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #787878;
  }

    <ul id="ul1">拖拽 </ul>

   let oUl = document.getElementById('ul1')
        let disX = 0;
        let offsetLeft = 0
        oUl.onmousedown = function (ev) {
            mouseDownOrTouchStart(ev.pageX)
            oUl.onmousemove = function (ev) {
                mouseMoveOrTouchMove(ev.pageX)
            }

            oUl.onmouseup = function (ev) {
                oUl.onmousemove = null
                oUl.onmouseup = null
            }

        }
        oUl.ontouchstart = function (ev) {
            mouseDownOrTouchStart(ev.touches[0].pageX)
        }
        oUl.ontouchmove = function (ev) {
            mouseMoveOrTouchMove(ev.touches[0].pageX)
        }

        // 代理
        function mouseDownOrTouchStart(pageX) {
            disX = pageX
            offsetLeft = oUl.offsetLeft
        }

        function mouseMoveOrTouchMove(pageX) {
            oUl.style.left = pageX - disX + offsetLeft + 'px'
       }

以上demo都放到github上啦，感兴趣的可以加个star~ 😊

https://github.com/wensiyuanseven/gesture-dem