HTML5 手勢檢測原理和實現

本文首發在「前端外刊評論」。一個關注前端前沿技術，探尋業界深邃思想的自媒體。歡迎文末掃碼關注公衆號。

關於做者

周林，github，陸金所前端程序員，專一 Hybrid APP 性能優化和新技術探索。歡迎任何形式的提問和討論。

前言

隨着 Hybrid 應用的豐富，HTML5 工程師們已經不知足於把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操做體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提供開箱即用的手勢系統，可是提供了更底層一些的對 touch 事件的監聽。基於此，咱們能夠作出本身的手勢庫。

手勢

經常使用的 HTML5 手勢能夠分爲兩類，單點手勢和兩點手勢。單點手勢有 tap(單擊)，double tap(雙擊)，long tap(長按)，swipe(揮)，move(移動)。兩點手勢有 pinch(縮放)，rotate(旋轉)。 接下來咱們實現一個檢測這些手勢的 js 庫，並利用這個手勢庫作出炫酷的交互效果。

移動

關於移動手勢檢測咱們在這篇博文中作過詳細介紹，這裏再也不贅述。總結一下就是在每次touchmove事件發生時，把兩個位移點之間的座標位置相減，就能夠了。

單擊(tap)

手勢檢測的關鍵是用 touchstart，touchmove，touchend 三個事件對手勢進行分解。那麼怎麼分解單擊事件呢？

1. 在 touchstart 發生時進入單擊檢測，只有一個接觸點。由於單擊事件限制爲一個手指的動做。
2. 沒有發生 touchmove 事件或者 touchmove 在一個很小的範圍(以下圖)。限制 touchmove 在一個很小範圍，是爲了給用戶必定的冗餘空間，由於不能保證用戶手指在接觸屏幕的時候不發生輕微的位移。

3 touchend 發生在 touchstart後的很短期內(以下圖)。這個時間段的閾值是毫秒級，用來限制手指和屏幕接觸的時間。由於單擊事件從開始到結束是很快的。

有了上面的流程，就能夠開始實現 tap 事件監測了。

_getTime() {
  return new Date().getTime();
}
_onTouchStart(e) {
    //記錄touch開始的位置
    this.startX = e.touches[0].pageX;
    this.startY = e.touches[0].pageY;
    if(e.touches.length > 1) {
      //多點監測
      ...
    }else {
      //記錄touch開始的時間
      this.startTime = this._getTime();
    }
 }
_onTouchMove(e) {
  ...
  //記錄手指移動的位置
  this.moveX = e.touches[0].pageX;
  this.moveY = e.touches[0].pageY;
  ...
}
_onTouchEnd(e) {
  let timestamp = this._getTime();
  if(this.moveX !== null && Math.abs(this.moveX - this.startX) > 10 ||
    this.moveY !== null && Math.abs(this.moveY - this.startY) > 10) {
      ...
  }else {
    //手指移動的位移要小於10像素而且手指和屏幕的接觸時間要短語500毫秒
    if(timestamp - this.startTime < 500) {
      this._emitEvent('onTap')
    }
  }
}複製代碼

雙擊(double tap)

和單擊同樣，雙擊事件也須要咱們對手勢進行量化分解。

1. 雙擊事件是一個手指的行爲。因此在 touchstart 時，咱們要判斷此時屏幕有幾個接觸點。
2. 雙擊事件中包含兩次獨立的單擊行爲。理想狀況下，這兩次點擊應該落在屏幕上的同一個點上。爲了給用戶必定的冗餘空間，將兩次點擊的座標點距離限制在10個像素之內。

1. 雙擊事件本質是兩次快速的單擊。也便是說，兩次點擊的間隔時間很短。經過必定的測試量化後，咱們把兩次單擊的時間間隔設爲300毫秒。

注意雙擊事件中咱們檢測了相鄰兩個 touchstart 事件的位移和時間間隔

_onTouchStart(e) {
  if(e.touches.length > 1) {
  ...
  } else {
    if(this.previousTouchPoint) {
      //兩次相鄰的touchstart之間距離要小於10，同時時間間隔小於300ms
      if( Math.abs(this.startX -this.previousTouchPoint.startX) < 10  &&
          Math.abs(this.startY - this.previousTouchPoint.startY) < 10 &&
          Math.abs(this.startTime - this.previousTouchTime) < 300) {
            this._emitEvent('onDoubleTap');
          }
    }
    //保存上一次touchstart的時間和位置信息
    this.previousTouchTime = this.startTime;
    this.previousTouchPoint = {
        startX : this.startX,
        startY : this.startY
     };
  }
}複製代碼

長按(long press)

長按應該是最容易分解的手勢。咱們能夠這樣分解：在 touchstart 發生後的很長一段時間內，若是沒有發生 touchmove 或者 touchend 事件，那麼就觸發長按手勢。

1. 長按是一個手指的行爲，須要檢測屏幕上是否只有一個接觸點。
2. 若是手指在空間上發生了移動，那麼長按事件取消。
3. 若是手指在屏幕上停留的時間超過800ms，那麼觸發長按手勢。
4. 若是手指在屏幕上停留的時間小於800ms，也即 touchend 在 touchstart 發生後的800ms內觸發，那麼長按事件取消。

_onTouchStart(e) {
  clearTimeout(this.longPressTimeout);
  if(e.touches.length > 1) {
  }else {
    this.longPressTimeout = setTimeout(()=>{
      this._emitEvent('onLongPress');
    });
  }
}
_onTouchMove(e) {
  ...
  clearTimeout(this.longPressTimeout);
  ...
}
_onTouchEnd(e) {
  ...
  clearTimeout(this.longPressTimeout);
  ...
}複製代碼

縮放(pinch)

縮放是一個很是有趣的手勢，還記得第一代iPhone雙指縮放圖片給你帶來的震撼嗎？雖然如此，縮放手勢的檢測卻相對簡單。

1. 縮放是兩個手指的行爲，須要檢測屏幕上是否有兩個接觸點。
2. 縮放比例的量化，是經過兩次縮放行爲之間的距離的比值獲得，以下圖。

因此縮放的核心是獲取兩個接觸點之間的直線距離。

//勾股定理
_getDistance(xLen,yLen) {
    return Math.sqrt(xLen * xLen + yLen * yLen);
  }複製代碼

這裏的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)

旋轉手勢須要檢測兩個比較重要的值，一是旋轉的角度，二是旋轉的方向(順時針或逆時針)。 其中旋轉角度和方向的計算須要經過向量的計算來獲取，本文再也不展開，感興趣的同窗能夠查看這裏。

首先，須要獲取向量的旋轉方向和角度

//這兩個方法屬於向量計算，具體原理請閱讀本文最後的參考文獻
_getRotateDirection(vector1,vector2) {
  return vector1.x * vector2.y - vector2.x * vector1.y;
}  
_getRotateAngle(vector1,vector2) {
  let direction = this._getRotateDirection(vector1,vector2);
  direction = direction > 0 ? -1 : 1;
  let len1 = this._getDistance(vector1.x,vector1.y);
  let len2 = this._getDistance(vector2.x,vector2.y);
  let mr = len1 * len2;
  if(mr === 0) return 0;
  let dot = vector1.x * vector2.x + vector1.y * vector2.y;
  let r = dot / mr;
  if(r > 1) r = 1;
  if(r < -1) r = -1;
  return Math.acos(r) * direction * 180 / Math.PI;
}複製代碼

而後，咱們在手指發生移動時，調用獲取旋轉方向和角度的方法。

_onTouchStart(e) {
  ...  
  if(e.touches.length > 1) {
    this.touchVector = {
       x: point2.pageX - this.startX,
       y: point2.pageY - this.startY
     };
  }
  ...
}
_onTouchMove(e) {
  ...
  if(this.touchVector) {
        let vector = {
          x: e.touches[1].pageX - e.touches[0].pageX,
          y: e.touches[1].pageY - e.touches[0].pageY
        };
        let angle = this._getRotateAngle(vector,this.touchVector);
        this._emitEvent('onRotate',{
          angle
        });
        this.touchVector.x = vector.x;
        this.touchVector.y = vector.y;
      }
  ...
}複製代碼

實戰

好了，咱們的手勢系統到這裏就完成了。接下來要在實戰中檢驗這套系統是否可靠，作一個簡單的圖片瀏覽器，支持圖片縮放，旋轉，移動，長按。 首先，作好dom規劃，和[以前]同樣，咱們的事件監聽機制並不直接做用在圖片上，而是做用在圖片的父組件上。

而後，能夠開始使用上面的手勢檢測系統了。

render() {
  return (
    <Gestures onPinch={this.onPinch} onMove={this.onMove} onRotate={this.onRotate} onDoubleTap={this.onDoubleTap} onLongPress={this.onLongPress}> <div className="wrapper" > <img src="http://upload-images.jianshu.io/upload_images/2362670-f8b44d4b9101e8d6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" /> </div> </Gestures> ); }複製代碼

因爲咱們的手勢系統檢測的增量，所以不能直接把增量應用在對象上，而是須要把這些增量累加。以旋轉爲例：

onRotate(event) {
  //對增量進行累加
  this.angle += event.angle
  this.setState({
    angle:this.angle
  });
}複製代碼

至此，咱們的手勢檢測就完成了：

• 源碼
• 在線demo

參考

• AlloyFinger
• iScroll
• hammer.js