当前位置：首页 > news >正文

移动端单指拖双值旋转缩放(改动版)

news 来源：原创 2024/4/28 18:54:08

demo

改动内容:改动了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,详细区别能够看上一篇博客对照一下代码就知道了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>222</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <style>
     
        *{
            margin:0;
            padding:0;
          
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            -ms-perspective: 1000;
            perspective: 1000;
        }
        div{
            width:100%;
            font-size:18px;
        }
        #pic{
            -webkit-transform-origin:center center;

        }
        title{
            display: none;
        }
        body{
            width:100%;
            height:100%;
            position: relative;
        }
    </style>
</head>
<body>
    <img src="5.png" id="pic" alt="" width="200" height="200">
</body>
<script src="hammer.min.js"></script>
<script>
    !(function(win,doc){
        var pic=doc.getElementById("pic");
        var mc=new Hammer.Manager(pic);
        var pinch=new Hammer.Pinch();
        var rotate=new Hammer.Rotate();
        var pan=new Hammer.Pan();
        pinch.recognizeWith(rotate);

        mc.add([pinch,rotate,pan]);
        mc.get('pan').set({direction:Hammer.DIRECTION_ALL});

        var pan_ex=pan_ey=rota_ex=pex3=pey3=0,pin_sl=1;
        /**
         * 获取到浏览器窗体的距离
         * @param  {[type]} elm [description]
         * @return {[type]}     [description]
         */
        function getpos(elm){
            var x1=0,y1=0;
            while(elm.nodeName!="BODY"){
                x1+=elm.offsetLeft;
                y1+=elm.offsetTop;
                elm=elm.offsetParent;
            }
            return {"x":x1,"y":y1}
        }
        /**获取设置网页宽度
         * [w description]
         * @type {[type]}
         */
        var w=doc.documentElement.scrollWidth<win.innerWidth?

win.innerWidth:doc.documentElement.scrollWidth; h=doc.documentElement.scrollHeight<win.innerHeight?

win.innerHeight:doc.documentElement.scrollHeight, getx=getpos(pic).x, gety=getpos(pic).y; /** * *单指拖动 * @param {[type]} ev [description] * @return {[type]} [description] */ mc.on("panmove", function(ev) { var pan_mx=ev.deltaX+pan_ex, pan_my=ev.deltaY+pan_ey; //变大变小之后计算位移防止超过边框 if(pan_mx<0&&getx-Math.abs(pan_mx-pex3/2)<0){ pan_mx=-(getx-pex3/2); }else if(pan_mx>0&&(getx+(pan_mx-pex3/2)+pic.offsetWidth)>(w)){ pan_mx=w-pic.offsetWidth-getx-pex3/2; } if(pan_my<0&&gety-Math.abs(pan_my-pey3/2)<0){ pan_my=-(gety-pey3/2); }else if(pan_my>0&&gety+(pan_my-pey3/2)+pic.offsetHeight>(h)){ pan_my=h-pic.offsetHeight-gety-pey3/2; } //设置元素变形值 pic.style.webkitTransform="translate3d("+pan_mx+"px,"+pan_my+"px,0) scale3d("+pin_sl+","+pin_sl+",1) rotate3d(0,0,1,"+rota_ex+"deg)"; pic.style.webkitTransformOrigin=(pan_mx+100)+"px "+(pan_my+100)+"px;"; mc.on("panend", function(ev) { pan_ex=pan_mx; pan_ey=pan_my; }); ev.preventDefault(); }); //双指拉伸旋转 mc.on("pinchstart rotatestart", function(ev) { var pinch_sa=ev.scale; var rota_sx=ev.rotation; mc.on("pinchmove rotatemove", function(ev) { pin_ml=ev.scale-pinch_sa+pin_sl; rota_mx=ev.rotation-rota_sx+rota_ex; pic.style.webkitTransform="translate3d("+pan_ex+"px,"+pan_ey+"px,0) scale3d("+pin_ml+","+pin_ml+",1) rotate3d(0,0,1,"+rota_mx+"deg)"; mc.on("pinchend rotateend", function(ev) { pin_sl=pin_ml; rota_ex=rota_mx; //计算拉伸之后的区间值 if(ev.type=="rotateend"){ pex3=pin_ml*pic.offsetWidth-(pic.offsetWidth); pey3=pin_ml*pic.offsetHeight-(pic.offsetHeight); } }); ev.preventDefault(); }); ev.preventDefault(); }); })(window,document) </script> </html>