사용자가 CSS 및 jquery로 이미지 회전 허용

Question

포토샵에서와 같이 사용자가 이미지를 회전 할 수있게하고 싶습니다. 작성한 바이올린이 있습니다. 회전 각도가 잘못되어 뭔가 도움을 요청하면서 오랫동안 고생하고 있습니다.

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

을 감사 제발이 일을 더 나은 방법이 있다면 v. - 브라우저 특정 속성을 모두 타겟팅 할 필요는 없습니다.
transform 만 사용하십시오. 당신이 원 안에 사각형 이미지를 가지고

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

하지만 경우에있을 것입니다 :

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

이상적으로 당신이 뭔가를 할 수 있습니다 , draggable 모서리는 항상 어디에 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%'); 
     } 
    }) 
}) 
}); 

사람이 임 잘못 생각하고 새로운 jQuery를 함께 :) .. 말해