jquery перетащите и поверните на угол

Question

Я использую jQuery UI для перетаскивания изображения. Я также хочу повернуть изображение на 360 градусов, чтобы я мог перемещать и поворачивать его, как в Photoshop. Я использую плагин jQuery rotate для поворота изображения при нажатии, но я хочу выбрать угол и перетащить, чтобы повернуть изображение на любой угол.

Live 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

Пожалуйста, проверьте с этим, 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) Здесь deg означает degree, Либо вы можете использовать rad для radians

2) Вы можете изменить точку вращения, изменив transform-origin

Например, : 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)');
      }
    })
}());

Answer 3

Я оставлю это здесь на случай, если у кого-то еще будут те же проблемы, что и у меня:

Ответы здесь хорошие, но если вы хотите, чтобы он работал на мобильных устройствах и IE <10, вам нужна библиотека. Мне потребовалось около недели, чтобы найти его, и он выполнил свою работу. </p>

ссылка на библиотеку

Answer 4

Мне нужна была аналогичная функция для проекта, но моя также работает на сенсорных устройствах, таких как планшеты iPad или Android:

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

Вам нужен jQuery и библиотека для вращения, которую вы можете найти здесь , затем активируйте ее с помощью $("#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

В JavaScript невозможно повернуть под любым углом. Это возможно в IE, поскольку MS для этой цели реализовала элемент управления ActiveX в IE, но не в кросс-браузерном решении.

В любом случае, если вы все еще заинтересованы в том, чтобы тратить свое время, вы можете использовать SVG, который способен выполнить любую такую ​​задачу, но все же имеет проблемы с кроссбраузерностью. В IE6 / 7/8 не реализована поддержка SVG, хотя вы можете использовать проект Google ChromeFrame для решения этой проблемы или найти какой-либо плагин SVG для IE.