jquery拖动并旋转到角度 [英] jquery drag and rotate to angle

问题描述

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

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}）; 
}）; 
}）; 
  

解决方案

请检查这个，Fiddle http://jsfiddle.net/prasanthkc/frz8J/

  var dragging = false 
 
 $（function（）{
 var target = $（'＃target'）
 target.mousedown function（）{
 dragging = true 
}）
 $（document）.mouseup（function（）{
 dragging = false 
}）
 $ （文件）.mousemove（function（e）{
 if（dragging）{
 
 var mouse_x = e.pageX; 
 var mouse_y = e.pageY; 
 var radans = Math.atan2（mouse_x  -  10，mouse_y  -  10）; 
 var degree =（弧度*（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（' -  web （'+ o'+'deg）'; 
 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 表示 学位，您可以使用 rad 弧度

2）您可以通过更改更改旋转点。 c $ c> transform-origin / p>

例如： transform-origin：50％50％将移动旋转点中心。

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

解决方案

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.

这篇关于jquery拖动并旋转到角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！