如何检查裁剪div是否覆盖旋转图像？

Question

我想检查裁剪div是否覆盖了图像.当图像没有旋转但是旋转图像裁剪后没有显示错误信息时,一切正常.

这是小提琴:小提琴

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里面有一个图像.如果裁剪div离开这个div我显示标签bg颜色红色意味着裁剪不正确否则我显示标签颜色绿色意味着裁剪是正确的..

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