一。何為hammer.js

    hammerJS是一個優秀的、輕量級的觸屏裝置手勢庫.可以識別由 touch, mouse 和 pointerEvents 觸發的系列手勢。它非常小巧，壓縮後僅有3.96kb，並沒有多餘的指令碼依賴。

二。將hammer.js 加入專案的方式

（1）直接<script src="****/hammer.js"></script>

（2）使用require方式引入。

三。下面將程式碼的實現

    var manager = new Hammer.Manager(stage);  	//stage---->表示要加入手勢的dom節點
    var Pan = new Hammer.Pan();			//Pan是移動物件例項
    var Pinch = new Hammer.Pinch();		//Pinch是縮放的物件例項

    Pinch.recognizeWith([Pan]);
    manager.add(Pan);
    manager.add(Pinch);
 

注：上面 先將dom節點放入hammer中管理，然後分別產生移動與縮放的物件例項。

    var deltaX = 0;
    var deltaY = 0;
    var nLeftTemp = 0;
    var nTopTemp = 0;
    var liveScale = 1;
    var currentScale = 1;
    var nWidth = $stage.width();
    var nHeight = $stage.height();  //獲取目標圖片的高寬

    manager.on('panmove', function (e) {
        var dX = deltaX + e.deltaX;
        var dY = deltaY + e.deltaY;
        Velocity.hook($stage, 'translateX', dX + 'px');
        Velocity.hook($stage, 'translateY', dY + 'px');   //注Velocity是動畫js庫
    });
    manager.on('panend', function (e) {
        deltaX = deltaX + e.deltaX;
        deltaY = deltaY + e.deltaY;
        var nOffSet = $stage.offset();  //這行開始下面是控制邊界的邏輯 
        var nLeft = nOffSet.left;
        var nTop = nOffSet.top;
        var nMaxCrosswise = nWidth - liveScale * nWidth;     //最大左移的位置
        var nMaxPortrait = nHeight - liveScale * nHeight;    //最大上移的位置
        if(nLeft < nMaxCrosswise){
            nLeftTemp = nMaxCrosswise;
        }else if(nLeft > 0){
            nLeftTemp = 0;
        }else{
            nLeftTemp = nLeft;
        }
        if(nTop < nMaxPortrait){
            nTopTemp = nMaxPortrait;
        }else if(nTop > 0){
            nTopTemp = 0;
        }else{
            nTopTemp = nTop;
        }
        $stage.offset({
            left: nLeftTemp,
            top: nTopTemp
        });

    });

    function getRelativeScale(scale) {
        return scale * currentScale;
    }
    manager.on('pinchmove', function (e) {
        var scale = getRelativeScale(e.scale);
        if(scale > 10.0){
            scale = 10.0;
        } //防止圖片太糊，這裡限制圖片放大的最大倍數
        if(scale < 1.0){
            scale = 1.0;
        }  //不讓圖片縮小
        Velocity.hook($stage, 'scale', currentScale);
    });
    manager.on('pinchend', function (e) {
        currentScale = getRelativeScale(e.scale);
        if(currentScale > 10.0){
            currentScale = 10.0;
        }
        if(currentScale < 1.0){
            currentScale = 1.0;
        }
        liveScale = currentScale;
        Velocity.hook($stage, 'scale', currentScale);  //這裡先放縮後然後做邊界控制

        var nOffSet = $stage.offset();
        var nLeft = nOffSet.left;
        var nTop = nOffSet.top;
        var nMaxCrosswise = nWidth - liveScale * nWidth;
        var nMaxPortrait = nHeight - liveScale * nHeight;
        if(nLeft < nMaxCrosswise){
            nLeftTemp = nMaxCrosswise;
        }else if(nLeft > 0){
            nLeftTemp = 0;
        }else{
            nLeftTemp = nLeft;
        }
        if(nTop < nMaxPortrait){
            nTopTemp = nMaxPortrait;
        }else if(nTop > 0){
            nTopTemp = 0;
        }else{
            nTopTemp = nTop;
        }
        $stage.offset({
            left: nLeftTemp,
            top: nTopTemp
        });
    });
 

注：Velocity是Velocity.js 專為動畫而設計 ，簡單易用，功能強大.詳見官方文件【http://velocityjs.org/】

總結：以上就是怎樣實現圖片移動端手勢移動縮放邊界不在檢視內的程式碼實現。

注：本文是作者版權所有，如要轉載請註明來處。