js計算兩個矩形相交
阿新 • • 發佈：2017-11-03
utf char Y軸 lang cli epo ava log function
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap{
width: 400px;
height: 400px;
margin: 20px auto;
border-radius: 50%;
}
.wrap div{
width: 100px;
height: 100px;
background: pink;
}
#box1{
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div id="box1">
</div>
<div id="box2">
</div>
</div>
</body>
<script type="text/javascript">
var $box1 = document.getElementById(‘box1‘);
var $box2 = document.getElementById(‘box2‘);
function getCirclePoint(dom){
var posit = dom.getBoundingClientRect();
posit.circleX = posit.left + posit.width/2;
posit.circleY = posit.top + posit.height/2;
return posit;
}
function crash(dom1,dom2){
var result = {
leavelX:false,
leavelY:false
}
var pos1 = getCirclePoint(dom1);
var pos2 = getCirclePoint(dom2);
//crashX
var leavelY = Math.abs(pos1.circleY - pos2.circleY);
var leavelX = Math.abs(pos1.circleX - pos2.circleX);
var maxLeavelY= (pos1.height+pos2.height)/2;
var maxLeavelX = (pos1.width+pos2.width)/2;
if(leavelY < maxLeavelY){
//x方向有可能相交
var leavelXMiss = leavelX - (pos1.width + pos2.width)/2;
if(leavelXMiss <= 0){
//x軸方向相交
console.log("x相交",leavelXMiss);
result.leavelX = true;
}
}
if(leavelX < maxLeavelX){
//Y方向相交
var leavelYMiss = maxLeavelY - (pos1.height + pos2.height)/2;
if(leavelYMiss <= 0){
//y軸相交
console.log("Y相交",leavelYMiss);
result.leavelY = true;
}
}
if(leavelY == maxLeavelY && leavelX == maxLeavelX){
//對角相交
console.log(‘對角相交‘);
result.leavelX = true;
result.leavelY = true;
}
console.log(result);
return result;
}
crash($box1,$box2);
</script>
</html>
js計算兩個矩形相交