jQuery rotatable() in degree

问题

Hi we are using jquery rotatble plugin for rotating a div

$( function() {

      $('.new-multiple').rotatable();
});

.new-multiple{
  display:inline-block;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css">
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script>

<div class="new-multiple">

   <img src="https://www.gravatar.com/avatar/322f808cb7a7e06d38ca4c8a441332fd?s=48&d=identicon&r=PG&f=1">
   </div>

But the problem is that it rotate the div using radiant option . But we need to rotate the div using degree . that is 0 to 360 degree. How we can achieve this

i tried

.rotatable({
        options: {
            degrees: true
        }
});

but this is not working

回答1:

If you review the docs at https://github.com/godswearhats/jquery-ui-rotatable you will see:

degrees: starting rotation in degrees (default 0)

Therefore, you cannot use the option as you attempted. It will need to be a int value between 0 and 360, not true.

For example, if you wish to initialize the rotation at 45 degrees, you would use:

$(function() {
  $('.new-multiple').rotatable({
    degress: 45
  });
});

Hope that helps.

回答2:

Because i need to get the rotation in degree i converted the given radians to degree in the stop event

$('.new-multiple').rotatable({


        stop: function(e, ui){
             if(ui.angle.current<0){
                   var given_angle=ui.angle.current+2*Math.PI;
                }
                else{ var given_angle=ui.angle.current;  }
                var new_angle=Math.round(given_angle*180/ Math.PI)+"deg";
                $(".new-multiple").css("transform","rotate("+new_angle+")");
        }

    });

来源：https://stackoverflow.com/questions/46744738/jquery-rotatable-in-degree

标签

javascript

jquery

rotation