jquery arrastre y gire en el ángulo

Question

Estoy usando jQuery UI para arrastrar y soltar una imagen. También quiero rotar la imagen 360 grados para poder moverla y rotarla como en Photoshop. Estoy usando el jQuery rotate plugin para rotar la imagen al hacer clic, pero quiero seleccionar una esquina y arrastrar para rotar la imagen a cualquier ángulo.

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

de código JavaScript:

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

Answer 1

Cheque de Pls con éste, violín 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) Aquídegsignificadegree, O se puede utilizarradpararadians

2) Usted puede cambiar el punto de rotación mediante el cambiotransform-origin

para, por ejemplo: transform-origin: 50% 50% moverá el punto de rotación central.

Answer 2

Esto no es posible en JavaScript para girar en cualquier ángulo. Esto es posible en IE ya que MS implementó el control ActiveX en IE para ese propósito, pero no una solución de navegador cruzado.

De todos modos Si todavía le interesa invertir su tiempo, puede utilizar SVG, que es capaz de realizar cualquier tipo de tarea, pero todavía tiene problemas de navegador cruzado. IE6/7/8 no tiene ningún SVG implementado a pesar de que puede usar el proyecto Google ChromeFrame para resolver ese problema o si puede encontrar cualquier complemento SVG para IE.

Answer 3

esto funciona para mí. 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

necesitaba una función similar para un proyecto, pero la mía también funciona en dispositivos táctiles como el iPad o tabletas Android:

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

Es necesario jQuery y una biblioteca de rotación que se puede encontrar here, a continuación, activarla a través de Código $("#ObjectToBeRotated").rotateAble();

Fuente:

$.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

Voy a dejar esto aquí por si alguien más ha tenido los mismos problemas que hice:

Las respuestas aquí son buenos, pero si quieres que funcione en dispositivos móviles e IE < 10, se necesita una biblioteca. Me tomó alrededor de 1 semana encontrarlo y hace el trabajo.

library link