jquery拖动并旋转到角度

Question

我正在使用jQuery UI来拖放图像.我还想将图像旋转360度,这样我就可以像在Photoshop中一样移动和旋转它.我使用jQuery旋转插件在点击时旋转图像,但我想选择一个角并拖动以将图像旋转到任何角度.

直播JS:http://jsfiddle.net/87jaR/

JavaScript代码:

var test = 5;
$(function() 
{
    $('#rotate').draggable({ containment: 'frame' });
    $('#frame img').live('mousedown', function(event) 
    {
        test = test + 15;
        $(this).rotate({ angle: test });
    });
});

Answer 1

请检查这个,小提琴http://jsfiddle.net/prasanthkc/frz8J/

var dragging = false

$(function() {
var target = $('#target')
target.mousedown(function() {
    dragging = true
})
$(document).mouseup(function() {
    dragging = false
})
$(document).mousemove(function(e) {
    if (dragging) {

        var mouse_x = e.pageX;
        var mouse_y = e.pageY;
        var radians = Math.atan2(mouse_x - 10, mouse_y - 10);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        target.css('-moz-transform', 'rotate(' + degree + 'deg)');
        target.css('-moz-transform-origin', '0% 40%');
        target.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        target.css('-webkit-transform-origin', '0% 40%');
        target.css('-o-transform', 'rotate(' + degree + 'deg)');
        target.css('-o-transform-origin', '0% 40%');
        target.css('-ms-transform', 'rotate(' + degree + 'deg)');
        target.css('-ms-transform-origin', '0% 40%');
    }
})

})

1)在这里 deg 是指 degree,要么你可以使用 rad 的 radians

2)您可以通过更改来更改旋转点 transform-origin

对于Eg:transform-origin: 50% 50%将旋转点移动到中心.

Answer 2

这对我有用.http://plnkr.co/edit/xaCWl9Havv1ow7bhMTf2?p=preview

(function() {

    var RAD2DEG = 180 / Math.PI;            
    var dial = $("#box");
    dial.centerX = dial.offset().left + dial.width()/2;
    dial.centerY =  dial.offset().top + dial.height()/2;


    var offset, dragging=false;
    dial.mousedown(function(e) {
      dragging = true;
      offset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
    })
    $(document).mouseup(function() {
      dragging = false
    })
    $(document).mousemove(function(e) {
      if (dragging) { 

        var newOffset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
        var r = (offset - newOffset) * RAD2DEG;

        dial.css('-webkit-transform', 'rotate(' + r + 'deg)');
      }
    })
}());