放大图片旋转

Question

我截了一段网上关于移动端双指放大旋转的代码，
但是每一次放大旋转后，松开手，再次放大旋转的时候每次都会还原到初始值
怎么让他保持上一次放大旋转的位置，再在这个位置上无缝的继续放大旋转?

<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)";//改变目标元素的大小和角度
            };
            boxGesture.gestureend = function(){  //双指结束
            };

          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); //执行gesturestart方法
                };
            },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]);  //得到旋转角度
                    obj.gesturemove && obj.gesturemove.call(el, {
                        scale: scale.toFixed(2),
                        rotation: rotation.toFixed(2)
                    });  //执行gesturemove方法
                };
            },false);
            el.addEventListener("touchend", function(e){
                if(istouch){
                    istouch = false;
                    obj.gestureend && obj.gestureend.call(el);  //执行gestureend方法
                };
            },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>

Answer 1

增加两个标记，用来标记你单击的时候，初始状态

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那个缩放加上