Wie überprüft man, ob crop div rotiertes Bild abdeckt?

Question

ich überprüfen möchten, ob div Zuschneiden deckt Bilder in it.Everything funktioniert gut, wenn Bild nicht gedreht wird, sondern nach der Bild Ernte Dreh nicht zeigt Fehler msg ...

Hier Geige: 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; 
    } 
} 

oder eine andere Funktion

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)) 
         ); 
     } 

ich oben Code ich habe ein Bild innerhalb div.if Ernte div aus diesem bekommt div im Auftritt Etikett Ernte bg Farbe rot Bedeutung wird sonst nicht korrekt Etikett im Auftritt Farbe grün bedeutet Ernte ist korrekt ..

Answer 1

Also das wird ein großer Hack sein, aber hey :-) Die Idee ist es, den Ausschnitt hinter das Bild zu legen, und dann zu sehen, ob das Bild den Ausschnitt über alles überlappt vier Ecken.

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; 
} 

Answer 2

Ich denke, was Sie tun müssen, ist, die Positionen von jedem der vier Punkte des Bildes oben links oben rechts unten rechts und unten links zu berechnen, dann tun das gleiche für die Ernte div etwas wie folgt aus:

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); 

dann die Eckpunkte vergleichen.

Jetzt ist das Problem mit den Ecken des Bildes, als nach der Rotation wird dies einige Sinus/Cosinus-Berechnungen benötigen.

Sie vielleicht einen Blick auf diesen Posten zu übernehmen wollen: Find the coordinates of the corners of a rotated object in fabricjs

ich denke, es Ihr Leben wird viel einfacher