判断两个矩形是否相交

实例效果图

判断两个矩形是否相交

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>判断两个矩形是否相交</title>
<style type="text/css">

.rect1{
width: 160px;
height: 80px;
border: 2px solid #FF0000;
background: #FE0000;
}
.rect2{
width: 250px;
height: 125px;
border: 2px solid #0000FF;
background: #0000FE;
opacity:0.5;
}
.clear{
clear: both;
}
.title{
background: #0096DC;
margin: 5px 0px;
color: #F1F1F1;
padding: 2px;
}

#xl_left{
float: left;
}
#xl_right{
float: left;
margin-left: 10px;
}

#xl_down{
margin-top: 5px;
}

#bfxj1{
float: left;
}
#bfxj2{
float: left;
margin-left: -50px;
}

#bhxj1{
float: left;
}

</style>

</head>

<body onload="main()">
<div class="container">
<div class="title">
下图的实际结果：左右相离        程序判断结果:<span id="zyxl"></span>
</div>
<div class="rect1" id="xl_left"></div>
<div class="rect2" id="xl_right"></div>
</div>
<div class="clear"></div>

<div class="container">
<div class="title">
下图的实际结果：上下相离        程序判断结果:<span id="sxxl"></span>
</div>
<div class="rect1" id="xl_up"></div>
<div class="rect2" id="xl_down"></div>
</div>
<div class="clear"></div>

<div class="container">
<div class="title">
下图的实际结果：部分相交        程序判断结果:<span id="bfxj"></span>
</div>
<div class="rect1" id="bfxj1"></div>
<div class="rect2" id="bfxj2"></div>
</div>
<div class="clear"></div>

<div class="container">
<div class="title">
下图的实际结果：包含相交        程序判断结果:<span id="bhxj"></span>
</div>
<div class="rect1" id="bhxj1"></div>
<div class="rect2" id="bhxj2"></div>
</div>
<div class="clear"></div>

<script type="text/javascript">
/* 思路：找出最左上角的坐标、最右下角的坐标；然后X坐标差与宽度之和比较，Y坐标差与高度之和比较。 */

/*
获取矩形的四个角的坐标
21:左上
A2:右上
A3:左下
A4:右下
width: 宽
height: 高
*/
function getCoordinate(x1,y1,width,height){
var arr = new Array();
//A1
arr[0] = {
x: x1,
y: y1
},
// A2
arr[1] = {
x: x1 + width,
y: y1
},
// A3
arr[2] = {
x: x1 + width,
y: y1 + height
},
// A4
arr[3] = {
x: x1,
y: y1 + height
}
return {
a:arr,
// 宽
width: width,
// 高
height: height,
// 最大X坐标
getMaxX: function(){
return arr[2].x;
},
// 最小X坐标
getMinX:function(){
return arr[0].x;
},
// 最大Y坐标
getMaxY: function(){
return arr[2].y;
},
// 最小Y坐标
getMinY:function(){
return arr[0].y;
}
}
}

/* 两个矩形中的X坐标最大值 */
function getMaxX(coord_a,coord_b){
if(coord_a.getMaxX() > coord_b.getMaxX()){
return coord_a.getMaxX();
}
else{
return coord_b.getMaxX();
}
}
/* 两个矩形中的X坐标最小值 */
function getMinX(coord_a,coord_b){
if(coord_a.getMinX() < coord_b.getMinX()){
return coord_a.getMinX();
}
else{
return coord_b.getMinX();
}
}

/* 两个矩形中的Y坐标最大值 */
function getMaxY(coord_a,coord_b){
if(coord_a.getMaxY() > coord_b.getMaxY()){
return coord_a.getMaxY();
}
else{
return coord_b.getMaxY();
}
}
/* 两个矩形中的Y坐标最小值 */
function getMinY(coord_a,coord_b){
if(coord_a.getMinY() < coord_b.getMinY()){
return coord_a.getMinY();
}
else{
return coord_b.getMinY();
}
}

/**
判断X坐标是否有交集
最左与最右的X坐标差小于宽度之和、则说明X坐标有交集。
从两个矩形中选出最大和最小X坐标点。
矩形与坐标平行的情况，实际上只比较每个矩形的左上、右上共四个点即可。
*/
function in_x(coord_a,coord_b){
// 两个矩形的宽度之和
var width_sum = coord_a.width + coord_b.width;
// 两个矩形中的最大X坐标值
var max_x = getMaxX(coord_a, coord_b);
// 两个矩形中的最小X坐标值
var min_x = getMinX(coord_a, coord_b);

// X坐标最大差值
var dif_x = max_x - min_x;
// X坐标差大于矩形宽度和、则左右相离。X坐标无交集
if(dif_x > width_sum){
return false;
}else{
return true;
}
}

/* 判断Y坐标是否有交集 */
function in_y(coord_a,coord_b){
// 两个矩形的高度之和
var height_sum = coord_a.height + coord_b.height;
// 两个矩形中的最大Y坐标值
var max_y = getMaxY(coord_a, coord_b);
// 两个矩形中的最小Y坐标值
var min_y = getMinY(coord_a, coord_b);

// Y坐标最大差值
var dif_y = max_y - min_y;
// Y坐标差大于矩形高度和、则上下相离、Y坐标无交集
if(dif_y > height_sum){
return false;
}
else{
return true;
}
}

/*
判断两个矩形是否相交
1:不相交、左右分离
2:不相交、上下分离
3:相交
*/
function rectsIn(rect1, rect2){
// 第一个矩形参数
var a_x1 = rect1.offsetLeft;
var a_y1 = rect1.offsetTop;
var a_width = rect1.offsetWidth;
var a_height = rect1.offsetHeight;

// 第二个矩形参数
var b_x1 = rect2.offsetLeft;
var b_y1 = rect2.offsetTop;
var b_width = rect2.offsetWidth;
var b_height = rect2.offsetHeight;

// 第一个矩形坐标
var coord_a = getCoordinate(a_x1,a_y1,a_width,a_height);
// 第二个矩形坐标
var coord_b = getCoordinate(b_x1,b_y1,b_width,b_height);

// X坐标是否有交集
var inX = in_x(coord_a, coord_b);
// Y坐标是否有交集
var inY = in_y(coord_a, coord_b);

if(false == inX){
// X坐标无交集、则左右相离。两个矩形不相交。
return {code:1,desc:'X坐标无交集、则左右相离。两个矩形不相交'};
}
else if(false == inY){
// Y坐标无交集、则上下相离。两个矩形不相交。
return {code:2,desc:'Y坐标无交集、则上下相离。两个矩形不相交'};
}
else if(true == inX && true == inY){
// X坐标、Y坐标都有交集、则说明两个矩形相交
var result = {code:3,desc:'X坐标、Y坐标都有交集、两个矩形相交'};

return result;
}
}

/* 左右分离 */
function zyfl(){
var rect1 = document.getElementById("xl_left");
var rect2 = document.getElementById("xl_right");
var result = rectsIn(rect1, rect2);
document.getElementById("zyxl").innerHTML = result.desc;
}
/* 上下分离 */
function sxfl(){
var rect1 = document.getElementById("xl_up");
var rect2 = document.getElementById("xl_down");
var result = rectsIn(rect1, rect2);
document.getElementById("sxxl").innerHTML = result.desc;
}

/* 部分相交*/
function bfxj(){
var rect1 = document.getElementById("bfxj1");
var rect2 = document.getElementById("bfxj2");
var result = rectsIn(rect1, rect2);
document.getElementById("bfxj").innerHTML = result.desc;
}

/* 包含相交 */
function bhxj(){
var rect1 = document.getElementById("bhxj1");
var rect2 = document.getElementById("bhxj2");
var result = rectsIn(rect1, rect2);
document.getElementById("bhxj").innerHTML = result.desc;
}

/**
测试
*/
function main(){
zyfl();
sxfl();
bfxj();
bhxj();
}

</script>
</body>
</html>

判断两个矩形是否相交

相关推荐