順時針（只）元素周圍

Question

我使用這個代碼來拖動另一個圓形元素的元素在一個項目上工作的旋轉：http://jsfiddle.net/sandeeprajoria/x5APH/11/

function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){ 
       //alert(offsetSelector.left); 

       var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2; 
       var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2); 
       var theta = Math.atan2(y,x)*(180/Math.PI);   


       var cssDegs = convertThetaToCssDegs(theta); 
       var rotate = 'rotate(' +cssDegs + 'deg)'; 
       cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate}); 
       $('body').on('mouseup', function(event){ $('body').unbind('mousemove')}); 

     } 

     function convertThetaToCssDegs(theta){ 
      var cssDegs = 90 - theta; 
      return cssDegs; 
     } 

     $(document).ready(function(){    

      $('#marker').on('mousedown', function(){ 
       $('body').on('mousemove', function(event){ 
        rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));  
       }); 

      });      
     }); 

我需要修改它，所以它只能向一個方向旋轉，順時針或逆時針。

任何有關如何解決這個問題的建議，因爲我很難過。

Answer 1

只是跟蹤以前的旋轉度，而當結果大於以前只調整CSS：

var previousCssDegs = 45; 
var clockwise = true; // set false for anti-clockwise 

function rotateAnnotationCropper() { 
    // snip 
    var cssDegs = convertThetaToCssDegs(theta); 

    var isClockwise = 
     (
      cssDegs > previousCssDegs 
      && cssDegs - previousCssDegs < 20 // disallow to move from -80 to 80 
     ) 
     || cssDegs < -80 && previousCssDegs > 80 // allow to move pass 90 > -90 
    ; 
    if(isClockwise == clockwise) { 
      var rotate = 'rotate(' +cssDegs + 'deg)'; 
      cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate}); 
      previousCssDegs = cssDegs; 
    } 
    $('body').on('mouseup', function(event){ $('body').unbind('mousemove')}); 
} 

Fiddle