js實現移動端圖片預覽：手勢縮放， 手勢拖動，雙擊放大...

前言
本文將介紹如何經過js實現移動端圖片預覽，包括圖片的 預覽模式，手勢縮放，手勢拖動，雙擊放大， 單擊退出基本功能；

掃碼查看示例效果：

代碼地址http://pangyongsheng.github.io/imgPreview/

1、功能介紹

　　圖片預覽主要有如下幾個功能點組成：

• 監聽圖片點擊事件，進入圖片預覽模式
• 自定義手勢事件, （雙指縮放，滑動，雙擊。。。）
• 監聽圖片手勢事件，經過 transform-matrix 實現圖片的各類變換；

 

2、實現方法

一、圖片預覽模式

圖片預覽即點擊圖片在頁面中插入一個黑色全屏背景框並將圖片居中顯示。封裝時，爲了只對指定圖片添加功能，可經過監聽指定類名或添加某種屬性的img標籤監聽；另外需在對背景框綁定點擊事件，退出預覽模式。一下是一個簡單示例代碼：

 //點擊圖片進入預覽
    var $Dom = document.querySelector(".preview");
    $Dom.onclick = function() {
        var temp = this.src;
        var objE = document.createElement("div");
        objE.innerHTML = '<div class="bgM" >' +
                '<img src="'+temp+'"  id="img_scan" class="img-custom-img2"/>' +
            '</div>';
        document.body.appendChild(objE.children[0]);
        //退出圖片預覽事件
        var $bg = document.querySelector(".bgM");
        $bg.onclick = function() {
            var dm = document.querySelector(".bgM");
            document.body.removeChild(dm);
        }
        //阻止事件冒泡
        var $img = document.querySelector(".img-custom-img2");
        $img.onclick = function(event) {
           event.stopPropagation();
        }
    }

css樣式參考

.bgM{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,0.85);
    overflow: hidden;
}
.bgM img{
    width: 100%;
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    z-index: 1001;
    margin: auto;
}

二、自定義手勢事件

這裏經過監聽移動端touch事件實現自定義雙指縮放，單指滑動，雙擊事件，並經過事件屬性傳遞相關參數，如縮放比例，滑動距離等，詳細實現方式參考這篇博客：請參考此博文：https://www.cnblogs.com/pangys/p/9119845.html 這裏只大概說明；

當觸發touch事件的時候，會生成一個TouchEvent對象，咱們可經過其屬性e.touches.length來判斷是否多點觸控，經過e.touches[index].pageX,e.touches[index].pageY獲取去觸點座標，經過e.target獲取dom節點；

這裏爲了方便，直接監聽document事件而後對目標元素觸發事件，實際也能夠直接對img監聽事件，而後分別處理；

（1）手勢事件

• 監聽touchstart事件，若e.touches.length>=2,爲雙指事件，獲取觸點座標（觸點座標-目標元素.offsetLeft/Top）計算兩個點中點 添加到事件屬性中，改變相關狀態，觸發gesturestart事件；
• 監聽touchmove事件，若e.touches.length>=2,獲當前取觸點座標和gesturestart座標，計算出縮放比例及角度，觸發gesturechange事件；
• 監聽touchend事件，根據前面事件記錄的狀態觸發結束gestureend事件；

（2）滑動事件

• 監聽touchstart事件，若e.touches.length<2,爲單指事件，獲取觸點座標（觸點座標-目標元素.offsetLeft/Top）添加到事件屬性中，記錄事件狀態；
• 監聽touchmove事件，若e.touches.length<2,獲當前取觸點座標和上一步座標，計算出移動距離添加到事件屬性中，觸發swipeMove事件；

（3）雙擊事件

監聽touchstart事件，若e.touches.length<2,爲單指事件，獲取觸點座標（觸點座標-目標元素.offsetLeft/Top）添加到事件屬性中，獲取當前時間挫記錄到相關變量中，計算本次時間戳與上次事件時間戳之差，若時間差範圍在指定範圍（0~250）則觸發doubleTouch事件；

參考代碼：

    var isTouch = false;
    var isDoubleTouch = false; //是否爲多觸點   
    var start = []; //存放觸點座標
    var timer = null ;
    var now, delta; //當前時間，兩次觸發事件時間差
    var startPosition, movePosition, endPosition; //滑動起點，移動，結束點座標
    //事件聲明
    var gesturestart = new CustomEvent('gesturestart');
    var gesturechange = new CustomEvent('gesturechange');
    var gestureend = new CustomEvent('gestureend');
    var swipeMove = new CustomEvent('swipeMove');
    var doubleTouch = new CustomEvent("doubleTouch");
    //監聽touchstart事件
    document.addEventListener('touchstart', function(e) {
        if (e.touches.length >= 2) { //判斷是否有兩個點在屏幕上
            isDoubleTouch = true;
            start = e.touches; //獲得第一組兩個點
            var screenMinPoint = getMidpoint(start[0], start[1]); //獲取兩個觸點中心座標
            gesturestart.midPoint = [screenMinPoint[0] - e.target.offsetLeft, screenMinPoint[1] - e.target.offsetTop]; //獲取中心點座標相對目標元素座標
            e.target.dispatchEvent(gesturestart);
        } else {
            delta = Date.now() - now; //計算兩次點擊時間差
            now = Date.now();
            startPosition = [e.touches[0].pageX, e.touches[0].pageY];
            if (delta > 0 && delta <= 250) { //雙擊事件
　　　　　　　　　clearTimeout(timer);
                doubleTouch.position = [e.touches[0].pageX - e.target.offsetLeft, e.touches[0].pageY - e.target.offsetTop];
                e.target.dispatchEvent(doubleTouch);
            } else { //滑動事件
                timer = setTimeout(function(){ //單擊事件
　　　　　　　　　　　　e.target.dispatchEvent(oneTouch);
　　　　　　　　　})

            }
                isTouch = true;
        }
    }, false);
    //監聽touchmove事件
    document.addEventListener('touchmove', function(e) {
　　　　 clearTimeout(timer);
        if (e.touches.length >= 2 && isDoubleTouch) { //手勢事件
            var now = e.touches; //獲得第二組兩個點
            var scale = getDistance(now[0], now[1]) / getDistance(start[0], start[1]); //獲得縮放比例
            var rotation = getAngle(now[0], now[1]) - getAngle(start[0], start[1]); //獲得旋轉角度差
            gesturechange.scale = scale.toFixed(2);
            gesturechange.rotation = rotation.toFixed(2);
            e.target.dispatchEvent(gesturechange);
        } else if (isTouch) {
            movePosition = [e.touches[0].pageX, e.touches[0].pageY];
            endPosition = movePosition;
            movePosition = [movePosition[0] - startPosition[0], movePosition[1] - startPosition[1]];
            startPosition = [e.touches[0].pageX, e.touches[0].pageY];
            swipeMove.distance =[movePosition[0].toFixed(2) , movePosition[1].toFixed(2)];
            e.target.dispatchEvent(swipeMove);
        }
    }, false);
    //監聽touchend事件
    document.addEventListener('touchend', function(e) {
        if (isDoubleTouch) {
            isDoubleTouch = false;
            gestureend.position = endPosition;
            e.target.dispatchEvent(gestureend);
        };
    }, false);
    /*
     * 兩點的距離
     */
    function getDistance(p1, p2) {
        var x = p2.pageX - p1.pageX,
            y = p2.pageY - p1.pageY;
        return Math.sqrt((x * x) + (y * y));
    };
    /*
     * 兩點的夾角
     */
    function getAngle(p1, p2) {
        var x = p1.pageX - p2.pageX,
            y = p1.pageY - p2.pageY;
        return Math.atan2(y, x) * 180 / Math.PI;
    };
    /*
     * 獲取中點 
     */
    function getMidpoint(p1, p2) {
        var x = (p1.pageX + p2.pageX) / 2,
            y = (p1.pageY + p2.pageY) / 2;
        return [x, y];
    }

3、圖片的變換

對於圖片的每次操做都需在上一次操做的基礎上進行疊加，若是直接使用width，top,left或scale,translate等css樣式須要每次都記錄當前圖片狀態的所有參數，並且計算較多，這裏考慮使用transform-matrix實現圖片的基本變換，這樣只需建立一個數組做爲變換矩陣，每次操做直接在當前變換矩陣上修改相關參數便可實現圖像的變換：

transform-matrix ：可配置[a,b,c,d,e,f]6個參數，以下圖所示，x和y是初始的座標，x’ 和y’則是經過矩陣變換後獲得新的座標。變換矩陣，對原先的座標施加變換，就能獲得新的座標了。依據矩陣變換規則便可獲得： x’=ax+cy+e y’=bx+dy+f。

變換	x方向	y方向
縮放	a	d
移動	e	f

(1) 獲取目標元素及相關參數，綁定事件

    var $imgs = document.querySelector("#img_scan");
    var clientWidth = document.body.clientWidth; //窗口寬
    var clientHeight = document.body.clientHeight; //窗口高
    var imgWidth = parseInt(window.getComputedStyle($imgs).width); //圖片寬
    var imgHeight = parseInt(window.getComputedStyle($imgs).height); //圖片高

    $imgs.addEventListener('gesturestart', gesturef, false);
    $imgs.addEventListener('gesturechange', gesturef, false);
    $imgs.addEventListener('gestureend', gesturef, false);
    $imgs.addEventListener('swipeMove', gesturef, false);
    $imgs.addEventListener('doubleTouch', gesturef, false);
    $imgs.addEventListener('oneTouch', gesturef, false);

    var tMatrix = [1, 0, 0, 1, 0, 0]; //x縮放，無，無，y縮放，x平移，y平移
    var originLast, maxSwipeLeft, maxSwipeRight, maxSwipeTop, maxSwipeBottom; //上下左右可拖動距離

(2)監聽 gesturestart 設置 變換中心

 case "gesturestart":
    var x = event.midPoint[0];
    var y = event.midPoint[1];
    originLast = event.midPoint;
    $imgs.style.transformOrigin = x + "px " + y + "px";
    break;

(2)監聽 gesturechange 進行縮放變換,這裏設置了縮放範圍爲0.5 ~ 3；

case "gesturechange":
     var sc = parseFloat(event.scale);
     tMatrix[0] = tMatrix[0] + sc - 1 > 0.5 && tMatrix[0] + sc - 1 < 3 ? tMatrix[0] + sc - 1 : tMatrix[0];
     tMatrix[3] = tMatrix[3] + sc - 1 > 0.5 && tMatrix[3] + sc - 1 < 3 ? tMatrix[3] + sc - 1 : tMatrix[3];
     var temp = tMatrix.join(",");
     $imgs.style.transform = "matrix(" + temp + ")";
     break;

（3）監聽 gestureend 獲取移動邊界範圍邊界

case "gestureend":
     maxMove();
     break;

可移動邊界範圍的計算：

對於圖片中的任意點可拖動範圍都是相同的，那麼以縮放中心點來計算，以下圖所示，對於圖片中的縮放中心點p，有縮放後距離邊距的距離，可移動的範圍均爲 縮放後增長或減小的距離 - （縮放中心點距離圖片邊緣的距離），即 | 縮放比例 - 1 |  *  p點距離邊緣的距離；

 

代碼以下：

 function maxMove(){
     //最大可拖動範圍
     var sca = tMatrix[0];
     maxSwipeLeft = Math.abs(sca - 1) * originLast[0];
     maxSwipeRight = Math.abs(sca - 1) * (imgWidth - originLast[0]);
     maxSwipeTop = Math.abs(sca - 1) * originLast[1];
     maxSwipeBottom = Math.abs(sca - 1) * (imgHeight - originLast[1]);
}

(4)監聽 swipeMove 拖動圖片，需考慮是否在可拖動範圍

 if (!maxSwipeLeft || !maxSwipeRight || !maxSwipeTop || !maxSwipeBottom) return;
     if (event.distance[0] > 0 && maxSwipeLeft < tMatrix[4]) return;
     if (event.distance[0] < 0 && maxSwipeRight < -tMatrix[4]) return;
     if (event.distance[1] > 0 && maxSwipeTop < tMatrix[5]) return;
     if (event.distance[1] < 0 && maxSwipeBottom < -tMatrix[5]) return;

     tMatrix[4] = tMatrix[4] + parseInt(event.distance[0]);
     tMatrix[5] = tMatrix[5] + parseInt(event.distance[1]);

     var temp = tMatrix.join(",");
     $imgs.style.transform = "matrix(" + temp + ")";
     break;

（5）監聽 doubleTouch 實現雙擊點縮放

case "doubleTouch":
      originLast = event.position;
      $imgs.style.transformOrigin = event.position[0] + "px " + event.position[1] + "px";
      tMatrix[0] = 2;
      tMatrix[3] = 2;
      var temp = tMatrix.join(",");
      $imgs.style.transform = "matrix(" + temp + ")";
      maxMove();
      break;

（6）監聽 oneTouch 退出預覽

case "oneTouch":
　　var $bg = document.querySelector(".bgM");
　　document.body.removeChild($bg);
　　break;

 

至此一個圖片預覽的基本功能便可實現 ，  也能夠經過手勢作旋轉及上下一張的功能；