Question

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

Answer 1

我认为你要做的就是计算图像的左上角 - 右下角 - 左下角和左下角的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

我认为这会让你的生活更轻松

Answer 2

所以这将是一个很大的黑客，但是嘿:-)我们的想法是将切口放在图像后面，然后看看图像是否与四个角上的切口重叠。

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

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

2 个答案: