jquery - 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

编辑:由于您添加了说明您希望两个齿轮都旋转的评论，因此请参阅下文以了解使用多边形检测旋转的两个齿轮。

只有一个齿轮在旋转:我已经 fork 了你的 JSFiddle 以按照我认为你想要的方式工作 here .正如我认为您想要的那样，它在 25% 的时间内显示碰撞的“真实”。我认为您正在尝试做的事情存在一些问题；你的箱子计算错了。您可能想要排除边界，因此我更改了代码以从 x1,y1 和 x2,y2 中减去它们。要排除边框，您还需要使用 innerWidth/innerHeight，而不是 outerWidth/outerHeight。

最重要的是，您要确保您的矩形不会因为简单地添加宽度或高度而包含额外的像素。例如，看这行 3 个字符的位置:
0 1 2
a b c

第一个 a (x1) 在位置 0。宽度是 3，但是当 c (r1) 显然应该在位置 2 时，0+3 = 3。包括那个额外的像素会导致左 Angular 的碰撞发生错误并且似乎比它更早发生碰撞。像我在下面的代码中做的那样减去 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);
}

两个齿轮都在旋转:要实现此功能，您需要使用旋转 Angular 形成的多边形边进行全多边形检测。我在黄色区域添加了 Angular 落 div，添加了用于调试的 go/stop/step 按钮，并使其他 div 半透明以使其更加明显。 JSFiddle here .作为您的第二个示例，两个齿轮都在旋转，现在它可以正确显示碰撞。多边形碰撞代码取自 StackOverflow question .