HTML5 手势检测原理和实现

　　这里的xLen是两个接触点x坐标差的绝对值，yLen相应的就是y坐标差的绝对值。

_onTouchStart(e) {

  if(e.touches.length > 1) {

    let point1 = e.touches[0];

    let point2 = e.touches[1];

    let xLen = Math.abs(point2.pageX - point1.pageX);

    let yLen = Math.abs(point2.pageY - point1.pageY);

    this.touchDistance = this._getDistance(xLen, yLen);

  } else {

    ...

  }

}

　　在_onTouchStart函数中获取并且保存 touchstart 发生时两个接触点之间的距离。

_onTouchMove(e) {

  if(e.touches.length > 1) {

      let xLen = Math.abs(e.touches[0].pageX - e.touches[1].pageX);

      let yLen = Math.abs(e.touches[1].pageY - e.touches[1].pageY);

      let touchDistance = this._getDistance(xLen,yLen);

      if(this.touchDistance) {

        let pinchScale = touchDistance / this.touchDistance;

          this._emitEvent('onPinch',{scale:pinchScale - this.previousPinchScale});

          this.previousPinchScale = pinchScale;

      }

  }else {

    ...

  }

}

   　旋转(rotate)

　　旋转手势需要检测两个比较重要的值，一是旋转的角度，二是旋转的方向(顺时针或逆时针)。

　　其中旋转角度和方向的计算需要通过向量的计算来获取，本文不再展开。