允許用戶用css和jquery旋轉圖像

Question

我想讓用戶像我們在photoshop中一樣旋轉圖像，我創建了一個小提琴。 旋轉角度感覺不對，長時間掙扎，請求幫助。

的js小提琴鏈接 - http://jsfiddle.net/madhuri2987/fZegT/8/

全屏 - http://jsfiddle.net/madhuri2987/fZegT/8/embedded/result/

HTML

<div id="mainTarget"> 
    <img src="http://myreaxns.com/wp-content/uploads/2013/03/priyanka-chopra-image.jpg" width="300" class="mainTarget" /> 
    <div id="target">&nbsp;</div> 
</div> 

JS

$(window).load(function(){ 
var dragging = false 

$(function() { 
    var target = $('#target'); 
    var mainTarget = $('#mainTarget'); 
    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; 
      mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-moz-transform-origin', '50% 50%'); 
      mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-webkit-transform-origin', '50% 50%'); 
      mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-o-transform-origin', '50% 50%'); 
      mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-ms-transform-origin', '50% 50%'); 
     } 
    }) 
}) 
}); 

Answer 1

用較新的jQuery的更好的方法v。您不必針對所有特定於瀏覽器的屬性。
只使用transform。

LIVE DEMO

var dragging = false; 
$(function() { 
    var target = $('#target'); 
    var mainTarget = $('#mainTarget'); 
    var rad = mainTarget.width()/2; 
    var elOfs = mainTarget.offset(); 
    var elPos = { 
     x: elOfs.left, 
     y: elOfs.top 
    }; 
    target.mousedown(function() { 
     dragging = true; 
    }); 
    $(document).mouseup(function() { 
     dragging = false; 
    }); 
    $(document).mousemove(function(e) {   
     if (dragging) { 
     var mPos = { 
      x: e.pageX-elPos.x, 
      y: e.pageY-elPos.y 
     }; 
     var getAtan = Math.atan2(mPos.x-rad, mPos.y-rad); 
     var getDeg = -getAtan/(Math.PI/180) + 135; //135 = (180deg-45deg) 

     mainTarget.css({transform: 'rotate(' + getDeg + 'deg)'}); 
     } 
    }); 
}); 

理想情況下，你可以做這樣的事情：

http://jsbin.com/ifezoq/2/edit

$(function() { 
    var dragging = 0; 
    var target  = $('#target'); 
    var mainTarget = $('#mainTarget'); 
    var elOfs = mainTarget.offset(); 
    var cent = {X: mainTarget.width()/2, Y: mainTarget.height()/2};  
    var elPos = {X: elOfs.left, Y: elOfs.top}; 
    target.mousedown(function() { 
     dragging = true; 
    }); 
    $(document).mouseup(function() { 
     dragging = 0; 
    }).mousemove(function(e) {  
     if(dragging) { 
     var mPos = {X: e.pageX-elPos.X, Y: e.pageY-elPos.Y}; 
     var getAtan = Math.atan2(mPos.X-cent.X, mPos.Y-cent.Y); 
     var getDeg = -getAtan/(Math.PI/180) + 135; 
     mainTarget.css({transform: 'rotate(' + getDeg + 'deg)'}); 
     } 
    }); 
}); 

但是這將是如果你有一個圓圈裏面一個方形圖像，可拖動的角落始終處於45deg。
但是，正如你可以看到差距是在處理矩形時得到起始角度的差異， - 你需要應用額外的數學，如果你問我，這是不需要的，所以我建議第一個演示。

Answer 2

我找到了解決辦法，修改後的腳本下面的一個：

小提琴鏈接 - http://jsfiddle.net/madhuri2987/fZegT/9/

JS

$(window).load(function(){ 
var dragging = false 

$(function() { 
    var target = $('#target'); 
    var mainTarget = $('#mainTarget'); 
    var offset = mainTarget.offset(); 
    target.mousedown(function() { 
     dragging = true 
    }) 
    $(document).mouseup(function() { 
     dragging = false 
    }) 
    $(document).mousemove(function(e) { 
     if (dragging) { 

      var center_x = (offset.left) + (mainTarget.width()/2); 
      var center_y = (offset.top) + (mainTarget.height()/2); 
      var mouse_x = e.pageX; var mouse_y = e.pageY; 
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
      var degree = (radians * (180/Math.PI) * -1) + 120;  
      mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-moz-transform-origin', '50% 50%'); 
      mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-webkit-transform-origin', '50% 50%'); 
      mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-o-transform-origin', '50% 50%'); 
      mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)'); 
      mainTarget.css('-ms-transform-origin', '50% 50%'); 
     } 
    }) 
}) 
}); 

如果有人認爲我錯了，並沒有這樣做，那麼，請不要告訴我..謝謝:)