2

我想让用户像在 Photoshop 中一样旋转图像，我创建了一个小提琴。旋转度数感觉有问题，挣扎了很久，请求帮助。

Js Fiddle 链接 - 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%');
        }
    })
})
});
4

2 回答 2

0

我找到了解决方案，将脚本修改为以下脚本：

小提琴链接 - 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%');
        }
    })
})
});

如果有人认为我错了并且有更好的方法可以做到这一点，请告诉我.. 谢谢:)

于 2013-05-27T06:36:45.700 回答
0

使用较新的 jQuery v。您不必针对所有-browser-specific属性。
只使用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)'});
      }
    });
});

但那是在你得到一个圆圈内的方形图像的情况下，可拖动的角总是在 45 度。
但是正如您所看到的，差距是在处理矩形时获得起始角度差异，-您需要应用额外的数学，如果您问我，这不是必需的，所以我建议第一个演示。

于 2013-05-27T06:55:23.370 回答