摘要：最近接觸移動(dòng)端開發(fā)。自己寫一個(gè)類似微博的圖片預(yù)覽器來學(xué)習(xí)一下移動(dòng)端手勢(shì)的實(shí)現(xiàn)和的屬性的使用。在發(fā)生時(shí)將坐標(biāo)位置向減得到位移量。雙手勢(shì)單手勢(shì)雙手勢(shì)單手勢(shì)觸發(fā)移動(dòng)事件圖片放大功能的實(shí)現(xiàn)我采用了的屬性進(jìn)行縮放，并且設(shè)置來設(shè)置縮放中心位置。

最近接觸vue.js移動(dòng)端開發(fā)。自己寫一個(gè)類似微博的圖片預(yù)覽器來學(xué)習(xí)一下移動(dòng)端手勢(shì)的實(shí)現(xiàn)和css3的屬性的使用。

首先分析圖片預(yù)覽器的功能：

1.圖片顯示
2.縮放(swipe)圖片
3.拖拽圖片(drag)
3.雙擊(doubleTap)放大/縮小
4.單擊(tap)隱藏圖片
5.左右滑到前一頁或后一頁

分析的手勢(shì)有:單擊(tap) 雙擊(doubleTap) 縮放(swipe) 拖拽(drag)
都是由有三個(gè)事件構(gòu)成：touchstart, touchmove,touchend.

單擊(tap)

手勢(shì)分解：點(diǎn)擊進(jìn)入touchstart事件，touchmove幾乎沒有，但是也要為用戶預(yù)留點(diǎn)擊時(shí)的微小移動(dòng)，再觸發(fā)touchend事件。在本組件中touchmove移動(dòng)半徑設(shè)置為小于10

從觸摸屏幕到離開屏幕的時(shí)間是非常短的，所以touchstart事件到touchend事件之間的時(shí)間間隔是非常小的，不超過500毫秒。t2-t1<500

代碼實(shí)現(xiàn)：

 onTouchstart(evt){
    this.startTime = new Date().getTime();
    if(evt.touches.length>1){//雙手勢(shì)
    }else{//單手勢(shì)
         this.start.x = evt.touches[0].pageX;
         this.start.y = evt.touches[0].pageY;
    }
 }
 onTouchMove(evt){
    this.move.x =  evt.touches[0].pageX;
    this.move.y = evt.touches[0].pageY;
 }
 onTouchEnd(evt){
    let timestamp = new Date().getTime();
    if(this.move.x !== null && Math.abs(this.move.x - this.start.x)< 10 ||this.move.y !== null && Math.abs(this.move.y - this.start.y)<10){
    //有移動(dòng)的情況
    }else{
    //單擊
        if(timestamp - this.startTime < 500){
            //觸發(fā)單擊事件
        }
    }
 }

雙擊(doubleTap)
雙擊事件包含了兩次單擊事件，區(qū)分在于兩次單擊的時(shí)間判斷，兩次單擊的時(shí)間，也就是touchstart觸發(fā)的時(shí)間間隔，不超過300毫秒，當(dāng)然，也要給用戶一些觸摸移動(dòng)的像素，將兩個(gè)點(diǎn)的x,y軸上的距離控制在10像素內(nèi)。

實(shí)現(xiàn)：

 touchStartFn(evt){
      this.startTime = new Date().getTime();
      if(evt.touches.length>1){//雙手勢(shì)
       }else{//單手勢(shì)
            this.start.x = evt.touches[0].pageX;
            this.start.y = evt.touches[0].pageY;
            if(this.previousTouchPoint){//上一次的觸摸點(diǎn)
                if(Math.abs(this.start.x- this.previousTouchPoint.startX)<10 &&Math.abs(this.start.y- this.previousTouchPoint.startY)<10 && this.startTime - this.previousStartTime < 300){
                   //觸發(fā)雙擊的事件
                    ...
                }
            }
            this.previousTouchTime = this.startTime;
            this.previousTouchPoint = {
                startX:this.start.x,
                startY:this.start.y
            };
       }
   }

如果一個(gè)頁面上既有單擊tap事件，又有雙擊doubleTap事件，怎么辦？用上述方法，兩種事件會(huì)相互沖突，光靠時(shí)間和偏移量來控制是不夠的。
解決思路：初始化this.previousTouchTime = 0;this.previousTouchPoint = undefined;在執(zhí)行完雙擊事件后將this.previousTouchPoint置為undefined，this.previousTouchTime置為0。在觸摸結(jié)束事件中添加一個(gè)setTimeout來監(jiān)聽是否有新的單擊事件發(fā)生。如果新單擊事件發(fā)生，則去除這個(gè)監(jiān)聽，如果沒有，則觸發(fā)單擊事件

 touchEndFn(evt){
    let timer = setTimeout(()=>{
         if(this.previousTouchPoint !== undefined && this.previousTouchTime !== 0){
         //觸發(fā)單擊事件
         ...
         }else{
             clearTimeout(timer);//去除監(jiān)聽
         }
         
    },300); 
 }

這樣，單擊和雙擊事件就不會(huì)沖突了。

縮放（swipe）

縮放是個(gè)雙手勢(shì)觸摸過程,觸摸點(diǎn)會(huì)有兩個(gè)，也就是Touch對(duì)象會(huì)有兩個(gè)。并在觸摸滑動(dòng)過程中，要計(jì)算出縮放倍數(shù)。

point1與point2的觸摸開始位置和結(jié)束位置都會(huì)有偏移，縮放的倍數(shù)計(jì)算：scale = r2/r1

onTouchStart(evt){
    if(evt.touches.length>1){//雙手勢(shì)
        let point1 = evt.touches[0];
        let point2 = evt.touches[1];
        let deltaX = Math.abs(point2.pageX - point1.pageX);
        let deltaY = Math.abs(point2.pageY - point1.pageY);
        this.distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);//初始時(shí)候的距離，r1
    }else{
    //單手勢(shì)事件
    }
}
onTouchMove(evt){
    if(evt.touches.legnth>1){
         let point1 = evt.touches[0];
        let point2 = evt.touches[1];
        let deltaX = Math.abs(point2.pageX - point1.pageX);
        let deltaY = Math.abs(point2.pageY - point1.pageY);
        let distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
        if(this.distance){
            this.swipeScale = distance/this.distance;
            //執(zhí)行縮放事件
        }
        
    }else{//單手勢(shì)事件}
}

拖拽/移動(dòng)

移動(dòng)事件就是在觸摸屏幕并移動(dòng)的時(shí)候，圖片或者元素能夠跟隨手指一起移動(dòng)。這是一個(gè)單手勢(shì)操作，屏幕上只要一個(gè)觸摸點(diǎn)。在touchmove發(fā)生時(shí)將坐標(biāo)位置向減得到位移量。

onTouchStart(evt){
    if(evt.touches.length>1){//雙手勢(shì)
    }else{//單手勢(shì)
         this.start.x = evt.touches[0].pageX;
         this.start.y = evt.touches[0].pageY;
    }
 }
 onTouchMove(evt){
      if(evt.touches.length>1){//雙手勢(shì)
         
      }else{//單手勢(shì)
          let deltaX  = evt.touches[0].pageX - this.start.x;
          let deltaY = evt.touches[0].pageY- this.start.y;
          //觸發(fā)移動(dòng)事件
      }
 }

我采用了css3的transform屬性進(jìn)行縮放，并且設(shè)置transform-origin來設(shè)置縮放中心位置?？s放的倍數(shù)為縮放事件計(jì)算出的this.swipeScale
縮放代碼：

   $img.style.transform = "scale("+this.swipeScale +")";
   $img.style.transformOrigin = x + " " + y;

下一節(jié)將講用vue.js具體實(shí)現(xiàn)過程