jquery拖动并旋转到角度

Posted 2023-05-08

【中文标题】jquery拖动并旋转到角度

【英文标题】：jquery drag and rotate to angle

【发布时间】：2011-08-04 14:18:24

【问题描述】：

我正在使用 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 );
    );
);

【参考方案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 for radians

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

例如：transform-origin: 50% 50% 会将旋转点移动到中心。

【讨论】：

感谢此代码！你知道如何设置圆的旋转中心吗？不是 atan2()

@user1775888: 'deg' 代表 'degrees'，你也可以使用 'radians using 'rad' 的值。

@user1775888：你想从圆心旋转一个圆吗？如果是这样，将 transform-origin 的值设置为 50% 50% 就可以了

@PrasanthKC 是他们为移动设备实现相同功能的方式？？.. 谢谢:)..

应该指出，Math.atan2 的第一个参数实际上应该是 y 坐标，第二个参数是 x 坐标 (src)。此外，-10 代表正文边距。

【参考方案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)');
      
    )
());

【参考方案3】：

我会留在这里，以防其他人遇到与我相同的问题：

这里的答案很好，但如果你想让它在移动设备和 IE

library link

【讨论】：

正是我想要的。非常感谢:)

这个软件是免费的吗？

【参考方案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);
;

【讨论】：

JqueryRotate.js 导致404

【参考方案5】：

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

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