Question

我使用旋转手柄旋转图像。在尝试开始旋转时如果图像大于0 degree（例如20 degree），则会重新启动 0 degree。

如何在不使用Jquery和CSS重新启动的情况下恢复轮换。？

var RAD2DEG = 180 / Math.PI;  

var dial = $("#image_box");

$('#left').text(dial.offset().left);
$('#top').text(dial.offset().top);
dial.centerX = dial.offset().left + dial.width()/2;
dial.centerY =  dial.offset().top + dial.height()/2;
$('#centerX').text(dial.centerX);
$('#centerY').text(dial.centerY);

var offset, rotate = false;

dial.find("#rotate_handle").mousedown(function(e) {
  rotate = true;
  offset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
  $('#pageX').text(e.pageX);
  $('#pageY').text(e.pageY);
  $('#offset').text(offset);
});

$(document).mouseup(function() { 
  rotate = false;
});

$(document).mousemove(function(e) {
  if(rotate) { 
    var newOffset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
    $('#newOffset').text(newOffset);
    var r = (offset - newOffset) * RAD2DEG;
    $('#RAD2DEG').text(RAD2DEG);
    $('#r').text(r);
    dial.css('-webkit-transform', 'rotate(' + r + 'deg)');
    dial.css('transform', 'rotate(' + r + 'deg)');
    $('#box').css('-webkit-transform','rotate(' + r + 'deg)');
    $('#box').css('transform','rotate(' + r + 'deg)');
  }
});

JSfiddle..

中的代码链接

Answer 1

如果将前一个值保留在变量中并每次旋转总和，该怎么办？

var previousR=0;
$(document).mousemove(function(e) {
  if (rotate) {
    var newOffset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
    $('#newOffset').text(newOffset);
    var r = (offset - newOffset) * RAD2DEG;
    $('#RAD2DEG').text(RAD2DEG);
    $('#r').text(r);
    r+=previousR;
    dial.css('-webkit-transform', 'rotate(' + r + 'deg)');
    dial.css('transform', 'rotate(' + r + 'deg)');
    $('#box').css('-webkit-transform', 'rotate(' + r + 'deg)');
    $('#box').css('transform', 'rotate(' + r + 'deg)');
    previousR=r;
  }
});

演示：http://codepen.io/8odoros/pen/qNjokL

如何避免重新启动图像的旋转？

1 个答案: