我一直没能在这里找到我的问题的解决方案...
我基本上是在创建类似 Facebook 缩略图编辑器的东西,用户可以在其中将图像移动到他们想要的可见部分。
它工作正常,除了我还希望它们能够仅以 90 度的间隔旋转图像。这就是问题所在。
当用户点击旋转按钮时,将移动限制在可见框中的容器 div 通过 jQuery 更新。根据数学计算,约束 div 的尺寸似乎是正确的。但是,旋转后的图像不会在约束 div 内正确移动。它似乎受到其他一些维度的约束。有时会超出约束 div 的边界。
如何让旋转后的图像在约束 div 中自由移动?我需要对 transform-origin 做些什么吗?尽管无论旋转如何,我的原点都应该始终位于图像的中心?
jQuery:
var rotValue = 0;
$("a[id='rotate']").click(function(e) {
rotValue +=90;
if (rotValue == 360) {rotValue = 0;}
var wd = $('#photo-in-edit').width();
var ht = $('#photo-in-edit').height();
$('#photo-in-edit').css('-moz-transform', 'rotate('+rotValue+'deg)');
$('#photo-in-edit').css('-webkit-transform', 'rotate('+rotValue+'deg)');
$('#photo-in-edit').css('-o-transform', 'rotate('+rotValue+'deg)');
$('#photo-in-edit').css('-ms-transform', 'rotate('+rotValue+'deg)');
if ((rotValue == 0) || (rotValue == 180)){
createCont(wd, ht); //calls the function below to resize the container
} else {
createCont(ht, wd);
}
e.preventDefault();
return false;
});
function createCont (w, h) {
var containerHeight, containerTop, containerWidth, containerLeft;
//the dimensions of my viewable area are 600 x 400
var xOverflow = (w - 600);
var yOverflow = (h - 400);
if (xOverflow < 0) {containerHeight = 400;containerTop = 0;}
else {containerHeight = ((h * 2) - 400);containerTop = (yOverflow*-1);}
if (yOverflow < 0) {containerWidth = 600;containerLeft = 0;}
else {containerWidth = ((w * 2) - 600);containerLeft = (xOverflow*-1);}
$('#photo-container').css('top', containerTop+"px");
$('#photo-container').css('height', containerHeight+"px");
$('#photo-container').css('left', containerLeft+"px");
$('#photo-container').css('width', containerWidth+"px");
$('#photo-in-edit').css('top', "");
$('#photo-in-edit').css('left',"");
}
HTML:
<div class="photo-edit-box" >
<div id="photo-container" >
<img id="photo-in-edit" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Oud_Poelgeest_Oegstgeest.jpg" />
</div><!--photo-container-->
</div><!--photo-edit-box-->
最佳答案
我终于找到了可行的方法,结果证明它非常简单。
我从这个页面得到了答案:Dragging & Resizing CSS Transformed Elements .
使用单独的 div 进行拖动和旋转的较低答案之一。
关于jquery - 在 Div 中拖动 CSS 旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16579706/