我想允许用户像在 Photoshop 中那样旋转图像,我创建了一个 fiddle 。 感觉旋转度有问题,挣扎了很久,请求帮助。
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"> </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%');
}
})
})
});
最佳答案
使用较新的 jQuery v.,您不必定位所有浏览器特定属性。
仅使用transform
。
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)'});
}
});
});
但如果你在一个圆内有一个方形图像,其中可拖动的 Angular 始终为 45 度。
但正如您所看到的,差距是为了在处理矩形时获得起始 Angular 差, - 您需要应用额外的数学,如果您问我,则不需要,所以我建议第一个演示。
关于jquery - 允许用户使用 css 和 jquery 旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16767426/