jquery拖动并旋转到角度

Question

我正在使用jQuery UI拖放图像。我也想旋转图像360度，所以我可以像Photoshop一样移动和旋转它。我正在使用jQuery rotate plugin来点击图片，但是我想选择一个角并拖动以将图片旋转到任意角度。

直播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

这不是在JavaScript可以在任意角度旋转。这在IE中是可行的，因为MS为此目的在IE中实现了activeX控件，但不是跨浏览器解决方案。

无论如何如果你仍然有兴趣投资你的时间，你可以使用SVG，它可以执行任何类型的任务，但它仍然存在跨浏览器问题。 IE6/7/8没有任何SVG实现，即使你可以使用ChromeFrame谷歌项目来解决这个问题，或者如果你可以找到任何SVG插件的IE浏览器。

Answer 3

这对我有用。 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)'); 
     } 
    }) 
}()); 

Answer 4

我需要一个项目类似的功能，但我也适用于触摸设备如iPad或Android平板电脑：

http://jsfiddle.net/C3tuD/46/

你需要jQuery和旋转库您可以发现here，然后通过$("#ObjectToBeRotated").rotateAble();

源代码激活它：

$.fn.rotateAble = function() { 
var offset = null; 
var dragging = false; 

var RotationTarget = $(this); // Save target, cause $(this) doesn't work from MouseUp and MouseMove 

// Mouse 
var MouseDown = function(e) { 
    dragging = true; 

    offset = { 
     x: e.pageX, 
     y: e.pageY 
    }; 
    $("div#rotation").text("MouseDown"); 
}; 
var MouseUp = function() { 
    dragging = false; 
    $("div#rotation").text("MouseUp"); 
}; 
var MouseMove = function(e) { 
    var mouse_x = e.pageX - offset.x; 
    var mouse_y = e.pageY - offset.y; 
    //$("div#rotation").text("Move: " + mouse_x + " " + mouse_y); 
    if (dragging) { 

     var radians = Math.atan2(mouse_x, mouse_y); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     RotationTarget.rotate(degree); 

     //$("div#rotation").text(degree); 
    } 
}; 

// Touch 
var TouchStart = function(e) { 
    var orig = e.originalEvent; 
    var pos = $(this).position(); 

    offset = { 
     x: orig.changedTouches[0].pageX, 
     y: orig.changedTouches[0].pageY 
    }; 
}; 
var TouchMove = function(e) { 
    e.preventDefault(); 
    var orig = e.originalEvent; 

    var mouse_x = orig.changedTouches[0].pageX - offset.x; 
    var mouse_y = orig.changedTouches[0].pageY - offset.y; 

    var radians = Math.atan2(mouse_x, mouse_y); 
    var degree = (radians * (180/Math.PI) * -1) + 90; 
    $(this).rotate(degree); 
    //$("div#rotation").text(degree); 
}; 

this.bind("touchstart", TouchStart); 
this.bind("touchmove", TouchMove); 
$(this).bind("mousedown", MouseDown); 
$(document).bind("mouseup", MouseUp); 
$(document).bind("mousemove", MouseMove); 
}; 

Answer 5

我会的情况下，这里有人离开这个人都有和我一样的问题：

的答案在这里是好的，但如果你希望它在移动设备上工作，并且IE < 10，你需要一个库。我花了大约1周才找到它，并完成了工作。

library link