Question

我在这里找不到解决问题的方法......

我基本上创建类似Facebook缩略图编辑器的东西，用户可以将图像移动到他们想要的可见部分。

它工作正常，但我也希望它们能够仅以90度间隔旋转图像。这就是问题所在。

当用户点击旋转按钮时，通过jQuery更新限制移动到可见框内的contanier div。根据数学，约束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-->

Answer 1

我终于找到了可行的东西，结果很简单。

我从这个页面得到了答案：Dragging & Resizing CSS Transformed Elements

使用单独的div进行拖动和旋转的较低答案之一。

在Div中拖动CSS旋转图像

1 个答案: