围绕一个元素进行顺时针旋转（仅限）

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'));    
                });

            });                    
        }); 

我需要修改它，使其只能顺时针或逆时针旋转。

对于如何解决问题，我束手无策，请问您有什么建议吗？

- Christopher Camplin

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')});
 }

这是代码示例

- Peter van der Wal