如何检查裁剪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是否覆盖旋转的图像？

回答

相关问题