javascript - 顺时针(仅)围绕元素旋转

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

只记录之前的rotation-degrees，当结果大于之前的时候才调整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