在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 放大圖片旋轉(zhuǎn)

放大圖片旋轉(zhuǎn)

我截了一段網(wǎng)上關(guān)于移動端雙指放大旋轉(zhuǎn)的代碼,
但是每一次放大旋轉(zhuǎn)后,松開手,再次放大旋轉(zhuǎn)的時候每次都會還原到初始值
怎么讓他保持上一次放大旋轉(zhuǎn)的位置,再在這個位置上無縫的繼續(xù)放大旋轉(zhuǎn)?

<div class="drag" style="
        background: url('https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=988279975,1210033778&fm=58');
        background-size: cover;
        width: 200px;
        height: 200px;
        position: absolute;
        top: 100px;
        left: 180px;
        transform: scale(1) rotate(0deg);
        color: #fff;"
    >
    </div>
    
<scirpt>
var now = [], start = [], scale = 1, rotation = 0 , sPageX = 0, sPageY = 0;

            var box = document.querySelector(".drag");
            var boxGesture = setGesture(box); 
            boxGesture.gesturestart = function(){  //雙指開始
            };
            boxGesture.gesturemove = function(e){  //雙指移動
                scale = e.scale;
                rotation = e.rotation;
                box.style.transform = "scale("+scale+") rotate("+rotation+"deg)";//改變目標(biāo)元素的大小和角度
            };
            boxGesture.gestureend = function(){  //雙指結(jié)束
            };

          function setGesture(el){
            var obj = {}; //定義一個對象
            var istouch = false;
            
            el.addEventListener("touchstart", function(e) {
                if(e.touches.length >= 2) {  //判斷是否有兩個點在屏幕上
                    istouch = true;
                    start = e.touches;  //得到第一組兩個點
                    obj.gesturestart && obj.gesturestart.call(el); //執(zhí)行g(shù)esturestart方法
                };
            },false);
            el.addEventListener("touchmove", function(e) {
                e.preventDefault();
                if(e.touches.length >= 2 && istouch) {
                    now = e.touches;  //得到第二組兩個點
                    scale = getDistance(now[0],now[1]) / getDistance(start[0], start[1]); //得到縮放比例
                    rotation = getAngle(now[0],now[1]) - getAngle(start[0],start[1]);  //得到旋轉(zhuǎn)角度
                    obj.gesturemove && obj.gesturemove.call(el, {
                        scale: scale.toFixed(2),
                        rotation: rotation.toFixed(2)
                    });  //執(zhí)行g(shù)esturemove方法
                };
            },false);
            el.addEventListener("touchend", function(e){
                if(istouch){
                    istouch = false;
                    obj.gestureend && obj.gestureend.call(el);  //執(zhí)行g(shù)estureend方法
                };
            },false);
            return obj;
          }
          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;
          }

</script>
回答
編輯回答
萌面人

增加兩個標(biāo)記,用來標(biāo)記你單擊的時候,初始狀態(tài)

var now = [], start = [], scale = 1, rotation = 0 , sPageX = 0, sPageY = 0;
改為
var now = [], start = [], scale = 1, rotation = 0 , sPageX = 0, sPageY = 0,
    oldScale = 0,
    oldRotation = 0;
    

touchstart里面

oldScale  = _this.scale.toFixed(2);
oldRotation  = _this.rotation.toFixed(2);

touchmove里面的時候,把old那個縮放加上

2018年8月17日 02:05