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

最新推荐文章于 2023-11-25 00:09:04 发布

寓言s

最新推荐文章于 2023-11-25 00:09:04 发布

阅读量1.6k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u011551941/article/details/50659405

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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>

寓言s

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端单指拖双值旋转缩放(修改版)

demo修改内容:修改了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,具体差别可以看上一篇博客对比一下代码就知道了。 222 *{ margin:0; padding:0; -webkit-perspe
复制链接

扫一扫