Как проверить, закрывает ли обрезка обрезки изображения?

Question

Я хочу, чтобы проверить, является ли охватывает кадрирование изображения в DIV it.Everything отлично работает, когда изображение не поворачивается, но после поворота обрезать изображение не показываю Сообща ошибка ...

Вот скрипка: 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 им ярлык, Б.Г. цвет красный смысл урожай не исправить в противном случае им-ярлык, цвет зеленый означает, что урожай правилен.

Answer 1

Так что это будет большой взлом, но эй :-) Идея состоит в том, чтобы вырезать изображение за изображением, а затем посмотреть, перекрывает ли изображение вырезание на всех четыре угла.

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

Я думаю, что вы должны сделать, это рассчитать положение каждой из 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

Я думаю, что это сделает вашу жизнь намного проще