使用hammer.js如何做到图片在拖动及放大拖动时图片的边界不在视图之内

一。何为hammer.js

    hammerJS是一个优秀的、轻量级的触屏设备手势库.可以识别由 touch, mouse 和 pointerEvents 触发的系列手势。它非常小巧，压缩后仅有3.96kb，并没有多余的脚本依赖。

    详细说明及API见官方文档【http://hammerjs.github.io/】。

二。将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/】

总结：以上就是怎样实现图片移动端手势移动缩放边界不在视图内的代码实现。

注：本文是作者版权所有，如要转载请注明来处。