拖動CSS旋轉圖像在一個div

我一直沒能挺找到解決這裏我的問題......拖動CSS旋轉圖像在一個div

我基本上建立類似Facebook的縮略圖編輯器，用戶可以通過移動圖像圍繞着他們想要的可見部分。

它工作正常，除了我也希望他們能夠以90deg間隔只旋轉圖像。這裏是問題出在哪裏。

限制運動到可見框內的contanier div在用戶點擊旋轉按鈕時通過jQuery更新。根據數學，約束格的尺寸似乎是正確的。但是，旋轉的圖像不會在約束格內正確移動。它似乎受到其他方面的約束。有時會超出限制分區的邊界。

如何讓旋轉的圖像在約束格內自由移動？我是否需要對變換來源做些什麼？儘管我的起源應該始終在圖像的中心而不管旋轉嗎？

的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-->

來源

2013-05-16 Dorshin

我終於能找到一些可行的，它原來是相當簡單的。

我從本頁得到了答案：Dragging & Resizing CSS Transformed Elements 。

使用單獨的div進行拖動和旋轉的較低答案之一。

來源

2013-05-16 06:46:15 Dorshin

這個答案應該被投票。您需要在此提供實際答案，而不是鏈接到其他地方。請修復。 – checklist

拖動CSS旋轉圖像在一個div

回答

相關問題