Div重叠和碰撞位置

Question

我想看看我的两个div将要重叠并彼此接触。这个例子中的两个黄色div。

为什么在div甚至不互相重叠或接触的阶段碰撞返回true？

http://jsfiddle.net/HWfMt/156/

var degree = 0; 
var degreeSmall = 0; 
var timer=30; 
var $spin = $(".gear"); 
var $spinSmall = $(".gear-small"); 
var to; 
var toSmall; 

function collision($div1, $div2) { 
    var x1 = $div1.offset().left; 
    var y1 = $div1.offset().top; 
    var h1 = $div1.outerHeight(true); 
    var w1 = $div1.outerWidth(true); 
    var b1 = y1 + h1; 
    var r1 = x1 + w1; 
    var x2 = $div2.offset().left; 
    var y2 = $div2.offset().top; 
    var h2 = $div2.outerHeight(true); 
    var w2 = $div2.outerWidth(true); 
    var b2 = y2 + h2; 
    var r2 = x2 + w2; 

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; 
    return true; 
} 

$(document).ready(function() { 

    rotate(); 
}); 


function rotate() { 
    degree++; 
    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'}); 
    $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 

    to = setTimeout(function() { 
     rotate(); 
    }, timer); 

    $('#result').text(collision($('.gear .inner-gear.yellow'), $('.gear-small .inner-gear.yellow'))); 

} 

由于

Answer 1

编辑：因为您已经添加了说明您希望两个齿轮旋转的注释，所以请参阅下面的两个齿轮旋转多边形检测。

只有一个齿轮旋转：我已经分叉你的JSFiddle工作我怎么想你想here。它以25％的时间显示“真实”，因为我认为你想要。我认为你想要做的事情有几个问题;你的盒子计算错误。你可能想排除边界，所以我改变了代码，从x1，y1和x2，y2中减去它们。要排除边框，您还需要使用innerWidth/innerHeight，而不是outerWidth/outerHeight。

最重要的是，您要确保您的矩形不包含从简单添加宽度或高度的额外像素。例如，看这条线的3个字符与位置：
ABC

第一A（X1）是在0宽度为3的位置，但0 + 3 = 3当c （r1）应该清楚地位于位置2.包括该额外的像素导致左角的碰撞出错，并且似乎比它早得多地碰撞。减去1，因为我在做的代码下面来解决这个问题：

function collision($div1, $div2) { 
    var x1 = $div1.offset().left + parseInt($div1.css('borderLeftWidth'),10); 
    var y1 = $div1.offset().top + parseInt($div1.css('borderTopWidth'),10); 
    var h1 = $div1.innerHeight(); 
    var w1 = $div1.innerWidth(); 
    var b1 = y1 + h1 - 1; 
    var r1 = x1 + w1 - 1; 
    var x2 = $div2.offset().left + parseInt($div2.css('borderLeftWidth'),10); 
    var y2 = $div2.offset().top + parseInt($div2.css('borderTopWidth'),10); 
    var h2 = $div2.innerHeight(); 
    var w2 = $div2.innerWidth(); 
    var b2 = y2 + h2 - 1; 
    var r2 = x2 + w2 - 1; 

    return (r1 >= x2 && r2 >= x1 && b1 >= y2 && b2 >= y1); 
} 

两个齿轮的旋转：对于这个工作，你需要完整的多边形检测与旋转角形成的多边形的边。我已经为黄色区域添加了角色div，添加了用于调试的go/stop/step按钮，并使其他div变得更加透明，使其更加明显。 JSFiddle here。这两个齿轮都是您的第二个示例，现在它可以正确显示碰撞。多边形碰撞代码取自StackOverflow question。

Answer 2

的相交测试码是正确的轴对齐包围盒。如果这就是你想要检查的内容，那么你在这里遇到的问题是你检查的框坐标是错误的。我不会解决这个问题你，但我会告诉你如何轻松调试此：

添加半透明叠加：

<div id="bb" style="background:rgba(0,0,0,0.5); position:absolute;"></div> 

，看看你是比较：

​​3210

Updated JSFiddle。

Answer 3

试试这个演示：

删除边框和宽度变化49%到50%

demo

或其他解决方案

宽度&高度变化49%到calc(50% - 1px)和顶级&左变化149px到148px

demo