jquery drag and rotate to angle

问题:

I am using jQuery UI to drag and drop an image. I also want to rotate the image 360 degrees so I can move and rotate it like in Photoshop. I am using the jQuery rotate plugin to rotate the image on click, but I want to select a corner and drag to rotate the image to any angle.

Live JS: http://jsfiddle.net/87jaR/

JavaScript code:

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

回答1:

Pls check with this one, Fiddle 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) Here deg means degree, Either you can use rad for radians

2) You can change the rotating point by changing transform-origin

For Eg: transform-origin: 50% 50% will move the rotating point to center.

回答2:

this works for me. 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)');
      }
    })
}());

回答3:

I will leave this here in case someone else had the same issues I did:

The answers here are good but if you want it to work on mobile devices and IE <10, you need a library. It took me about 1 week to find it and it gets the job done.

library link

回答4:

I needed a similar function for a project, but mine also works on touch devices like the iPad or Android Tablets:

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

You need jQuery and a library for rotation which you can find here, then activate it via $("#ObjectToBeRotated").rotateAble();

Source Code:

$.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);
};

回答5:

This is not possible in JavaScript to rotate at any angle. This is possible in IE as MS has implemented activeX control in IE for that purpose but not a cross browser solution.

Anyway If you still interested to invest your time, you can use SVG which is capable of any any sort of such task but still it has cross browser problems. IE6/7/8 does not have any SVG implemented even though u can use ChromeFrame google project to solve that problem or if you can find any SVG plugin for IE.