js根据滑动距离修改了图片的旋转角度 但是再次触摸的时候并没有根据修改的角度追加而是 以初始为准

Question

现在的需求是根据滑动的方向和距离旋转图片

正常应该是向左滑动逆时针旋转了90deg然后再一次触摸向右滑动顺时针转了30deg 应该在已经逆时针旋转的基础上顺时针转30deg 也就是总共逆时针60deg 但是现在的写法总是以初始0来修改
怎么办

    //返回角度
    function GetSlideAngle(dx, dy) {
        return Math.atan2(dy, dx) * 180 / Math.PI;
    }

    //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
    function GetSlideDirection(startX, startY, endX, endY) {
        var dy = startY - endY;
        var dx = endX - startX;
        var result = 0;

        //如果滑动距离太短
        if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
            return result;
        }

        var angle = GetSlideAngle(dx, dy);
        if(angle >= -45 && angle < 45) {
            result = 4;
        }else if (angle >= 45 && angle < 135) {
            result = 1;
        }else if (angle >= -135 && angle < -45) {
            result = 2;
        }
        else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
            result = 3;
        }

        return result;
    }

    //滑动处理
    var startX, startY;
    document.addEventListener('touchstart',function (ev) {
        startX = ev.touches[0].pageX;
        startY = ev.touches[0].pageY;
    }, false);
    document.addEventListener('touchmove',function (ev) {
        var endX, endY;
        endX = ev.changedTouches[0].pageX;
        endY = ev.changedTouches[0].pageY;
        var direction = GetSlideDirection(startX, startY, endX, endY);
        var distance=startX-endX;
        // console.log(distance);
        var angle=distance/5;
        if(angle>45){
            angle==45
        }
        else if(angle<-45){
            angle==-45
        }
        console.log(angle+'deg');
        if(direction==3){
            $('.earch').css({'transform':'rotate('+angle+'deg)','-webkit-transform':'rotate('+angle+'deg)'})
        }
        if(direction==4){
            $('.earch').css({'transform':'rotate('+angle+'deg)','-webkit-transform':'rotate('+angle+'deg)'})
        }
    }, false);

Answer 1

每次滑动完 记录一下滑动过的角度