javascript 如何检测两个div是否接触/碰撞检测

qeeaahzv  于 2023-02-07  发布在  Java
关注(0)|答案(5)|浏览(344)

我已经搜索了整个谷歌和这里,但还没有找到一个答案,适合我的问题
(This这是一个非常简单的解释)我有两个div,用户可以移动它们(使用JavaScript和单击事件)我需要检测这两个div是否相互接触/重叠,以及它们是否要触发某个函数,我在这里看到了答案,但它们都使用jQuery,我希望使用纯JS
可能有用的是,这两个div都有绝对位置和css中设置的不同z索引
编辑:由于我的解释非常糟糕,为了澄清问题,两个div中的一个是固定的,第二个只能在Y方向上移动,但在Y方向上移动的div是使用案例动画旋转的

des4xlb0

des4xlb01#

可能有一个更好的方法(这不是很枯燥),但它应该工作,只需将“div1”和“div2”替换为您的div ID:

let div1 = document.getElementById('div1').getBoundingClientRect();
let div1Top = div1.top;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom

let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right
let div2Bottom = div1.bottom

if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) {
  let verticalMatch = true
} else{
  let verticalMatch = false
}

if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) {
  let horizontalMatch = true
} else {
  let horizontalMatch = false
}

if (horizontalMatch && vertialMatch){
  let intersect = true
} else {
  let intersect = false
}
ih99xse1

ih99xse12#

这与当前的正确答案相似,但我解决这个问题的方法如下。

let div1 = document.getElementById('div1').getBoundingClientRect();
let div2 = document.getElementById('div2').getBoundingClientRect();

function touching(d1,d2){
    let ox = Math.abs(d1.x - d2.x) < (d1.x < d2.x ? d2.width : d1.width);
    let oy = Math.abs(d1.y - d2.y) < (d1.y < d2.y ? d2.height : d1.height);
    return ox && oy;
}

var t = touching(div1,div2) // should return whether they are touching

请注意,此函数不能很好地处理转换。

sshcrbum

sshcrbum3#

在两个div上都尝试Element.getBoundingClientRect(),并且使用它们的坐标可以执行collision detection

zpgglvta

zpgglvta4#

你可以使用Anand Thangappan的the process described in this post来获得元素的计算位置,然后使用getComputedStyle()(documentation here)来获得计算的宽度和高度,并使用简单的不等式检查来测试它们是否相交。
编辑:或者,你可以直接读取它们的位置值,因为你使用的是绝对位置,然后你可以跳过更复杂的方法来获得元素的计算位置。

hwamh0ep

hwamh0ep5#

由于您允许用户移动DIV,并且它们都是绝对的,因此您必须能够访问DIV的STYLE属性。
获取top、left、width和height属性。
计算底部和右边的属性。现在你有了所有四个角的坐标。
因为它们都是矩形,所以可以检查dev A的顶部或底部是否在div B的顶部和底部之间,以及dev B的左侧或右侧是否在其左侧和右侧之间。
这样做的一个好处是,您只需要检查A -〉B,因为在两个测试中都可以检测到任何重叠。
这是因为这些形状的直线性,如果它们是三角形或五边形,或者不是凸形,则会更加复杂。
值得注意的是,如果你使用CSS / JS动画,你可能希望在对象高速移动时扩大“碰撞区域”,否则,项目可能会在检查之间通过。

相关问题