javascript - 单击旋转一开始方向错误

Question

我试图根据单击的箭头使 Canvas 中的元素顺时针或逆时针旋转。问题是，当您以一种方式旋转然后另一种方式旋转时，第一次单击将沿先前单击的箭头方向进行。IE。单击顺时针旋转，它会顺时针旋转。然后单击逆时针旋转，第一次单击时，受影响的元素顺时针旋转，第二次单击时逆时针旋转，之后每次单击。这在两个方向上都会发生。

希望这是清楚的。在这里，没有太多内容。旋转器代码在最后:

$(document).ready(function(){
    counter = 0;

    //draggable
    $(".drag").draggable({
        helper:'clone',
        containment: 'frame',



        //first dragged
        stop:function(ev, ui) {
            var pos=$(ui.helper).offset();
            objName = "#clonediv"+counter++
            $(objName).css({"left":pos.left,"top":pos.top});
            $(objName).removeClass("drag");

            //existing dragged
            $(objName).draggable({
                containment: 'parent',
                stop:function(ev, ui) {
                    var pos=$(ui.helper).offset();
                    console.log($(this).attr("id"));
                    console.log(pos.left)
                    console.log(pos.top)
                }
            });
        }
    });

    //droppable
    $("#frame").droppable({
        drop: function(ev, ui) {
            if (ui.helper.attr('id').search(/drag[0-9][0-9]/) != -1){
                counter++;
                var element=$(ui.draggable).clone();
                element.addClass("tempclass");
                $(this).append(element);
                $(".tempclass").attr("id","clonediv"+counter);
                $("#clonediv"+counter).removeClass("tempclass");
                draggedNumber = ui.helper.attr('id').search(/drag([0-9][0-9])/)
                itemDragged = "dragged" + RegExp.$1
                console.log(itemDragged)

                $("#clonediv"+counter).addClass(itemDragged);

                $("ol").append($("div").attr("data-piece") + "<br>" );
            }
        }
    });

    //trash can
    $("#trash").droppable({
        greedy: 'true',
        accept: function() { return true; },
        drop: function (event, ui) { 
            tolerance: 'fit', $(ui.draggable).remove();
            $("ol").detach(); 
        }
    });

    //rotator
    var angle = 22.5;    

    $('#spin').click(function() {
    $('.drag').css ({
    '-webkit-transform': 'rotate(' + angle + 'deg)',
       '-moz-transform': 'rotate(' + angle + 'deg)',
         '-o-transform': 'rotate(' + angle + 'deg)',
        '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=22.5;
    });
    $('#spin2').click(function() {
    $('.drag').css ({
    '-webkit-transform': 'rotate(' + angle + 'deg)',
       '-moz-transform': 'rotate(' + angle + 'deg)',
         '-o-transform': 'rotate(' + angle + 'deg)',
        '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=-22.5;
    });
});

非常感谢任何帮助!

Answer 1

尝试将 angle += ... 行移到 $('.drag').css(...) 行之前。

稍微清理一下，从 angle = 0 开始:

// rotator
var angle = 0;

function rotateTo(angle) {
  var value = 'rotate(' + angle + 'deg)';

  $('.drag').css({
    '-webkit-transform': value,
    '-moz-transform': value,
    '-o-transform': value,
    '-ms-transform': value,
  });
}

$('#spin').click(function() {
  angle += 22.5;
  rotateTo(angle);
});

$('#spin2').click(function() {
  angle -= 22.5;
  rotateTo(angle);
});