如何檢查裁剪div是否覆蓋旋轉的圖像？

我要檢查是否裁剪格覆蓋圖像時，圖像不被旋轉it.Everything工作正常，但旋轉圖像裁剪後不顯示錯誤味精...如何檢查裁剪div是否覆蓋旋轉的圖像？

這裏是提琴：Fiddle

function isCropValid(){ 
    var $selector = $("#resizeDiv"); // cropping Div 
    var $img = $("#rotateDiv"); // image div 
    var $selectorW = $selector.width(); 
    var $selectorH = $selector.height(); 
    var $selectorX = $selector.offset().left ; 
    var $selectorY = $selector.offset().top ; 

    var $imgW = $img.width(); 
    var $imgH = $img.height(); 
    var $imgX = $img.offset().left; 
    var $imgY = $img.offset().top; 

    var diff_X = $selectorX - $imgX; 
    var diff_Y = $selectorY - $imgY; 

    if(diff_X+$selectorW > $imgW){ 
     return false; 
    } else if(diff_Y+$selectorH > $imgH){ 
     return false; 
    } else if($selectorX<$imgX){ 
     return false; 
    } else if($selectorY<$imgY){ 
     return false; 
    } 
    else { 
     return true; 
    } 
}

或其它功能來

function isCropValid(){ 
      var el1 = document.getElementById("resizeDiv"); // cropDiv 
      var el2 = document.getElementById("rotateDiv"); // imageDiv 

      var cropdiv = el1.getBoundingClientRect(); 
      var imgdiv = el2.getBoundingClientRect(); 

       return (
         ((imgdiv.top <= cropdiv.top) && (cropdiv.top <= imgdiv.bottom)) && 
         ((imgdiv.top <= cropdiv.bottom) && (cropdiv.bottom <= imgdiv.bottom)) && 
         ((imgdiv.left <= cropdiv.left) && (cropdiv.left <= imgdiv.right)) && 
         ((imgdiv.left <= cropdiv.right) && (cropdiv.right <= imgdiv.right)) 
         ); 
     }

我上面的代碼我有div.if作物DIV中的一個圖像失控的這個div IM表示標籤背景顏色紅色含義作物是不正確的，否則表示即時標籤顏色綠色意味着作物是正確的..

來源

2014-02-11 Developer Desk

所以這是一個很大的破解，但嘿:-)這個想法是把剪切出來的圖像，然後看看是否圖像重疊切割出所有四個角落。

function cutoutIsOK() { 
    // Grab the cutout element and position it behind the image 
    var cutout = document.querySelector('#resizeDiv'); 
    cutout.style.zIndex = -1; 

    // Grab the image 
    var image = document.querySelector('#rotateDiv img'); 

    // Take the four corners of the cutout element 
    var cutoutRect = cutout.getBoundingClientRect(); 
    var pos = [ 
    [cutoutRect.left, cutoutRect.top], 
    [cutoutRect.right - 1, cutoutRect.top], 
    [cutoutRect.left, cutoutRect.bottom - 1], 
    [cutoutRect.right - 1, cutoutRect.bottom - 1] 
    ]; 
    // And verify that the image overlaps all four corners 
    var ok = pos.every(function(p) { 
    return document.elementFromPoint(p[0], p[1]) === image; 
    }); 

    // Reset the cutout's z-index to make it visible again 
    cutout.style.zIndex = 0; 

    return ok; 
}

來源

2014-02-24 12:01:00

感謝您的幫助.. –

我認爲你必須做的是計算每個4分的圖像的位置左上右上右下和左下角，然後做同樣的事情作物div是這樣的：

var $topLeftX=$selectorX-($selectorW/2)-($selectorH/2); 
var $topLeftY=$selectorY-($selectorH/2)-($selectorW/2); 
var $bottomLeftX=$selectorX-($selectorW/2)+($selectorH/2); 
var $bottomLeftY=$selectorY+($selectorH/2)-($selectorW/2); 
var $topRightX=$selectorX+($selectorW/2)-($selectorH/2); 
var $topRightY=$selectorY-($selectorH/2)+($selectorW/2); 
var $bottomRightX=$selectorX+($selectorW/2)+($selectorH/2); 
var $bottomRightY=$selectorY+($selectorH/2)+($selectorW/2);

然後比較角點。

現在問題是與圖像的角落，因爲旋轉後，這將需要一些正弦/餘弦計算。

你可能想看看這篇文章：Find the coordinates of the corners of a rotated object in fabricjs

我想它會讓你的生活變得更輕鬆

來源

2014-02-24 12:17:58 CodeBird

是非常有助於完全鏈接 –

如何檢查裁剪div是否覆蓋旋轉的圖像？

回答

相關問題