判斷兩個矩形是否相交演算法
阿新 • • 發佈：2019-01-28
兩個矩形的空間位置（2d）有四種情況，如下圖:
給兩個矩形命名為A，B分別卻兩個矩形的坐上和右下角座標(Ax0,Ay0),(Bx0,By0),根據四種情況的判斷相交有四種情況，也就是說要寫四個判斷，這個就有點囉嗦了，其實根據這四種情況可以推出規律，如下圖:
這樣演算法就可以寫為
Bx1>Ax0,By1>Ay1,Ax1>Bx0,Ay1>By0
下面是一個用js寫的例子，當然是別人的，拿過來做證明：
顯示的的結果是：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <style> .select-div{ float: left; border: 1px solid #ff0000; width:150px; height: 150px; margin: 10px; text-align: center; line-height: 150px; } .selected{ border:1px solid #00ff00; } </style> </head> <body> <div class="select-div" id="div1">div1</div> <div class="select-div" id="div2">div2</div> <div class="select-div" id="div3">div3</div> <div class="select-div" id="div4">div4</div> <div class="select-div" id="div5">div5</div> <div class="select-div" id="div6">div6</div> <div class="select-div" id="div7">div7</div> <div class="select-div" id="div8">div8</div> <div class="select-div" id="div9">div9</div> <div class="select-div" id="div10">div10</div> <div class="select-div" id="div11">div11</div> <div class="select-div" id="div12">div12</div> <div class="select-div" id="div13">div13</div> <div class="select-div" id="div14">div14</div> <script type="text/javascript"> (function(){ // var counter = document.querySelector('.select-div'); // console.log(counter); // var counters = document.querySelectorAll('.select-div'); // console.log(counters); var startX,startY; var currentX,currentY; var selectAreaWidth,selectAreaHeight; var selectArea; var isSelect=false; var divNodeList=[]; var selectDivList=[]; document.onmousedown=function(){ getDivNodeList(); var e = event||arguments.callee.caller.arguments[0]; startX= e.x|| e.clientX; startY= e.y|| e.clientY; console.log("startX:"+startX+",startY:"+startY); selectArea = document.createElement("div"); selectArea.style="position:absolute;border:1px solid #0000ff;background:#ccc;width:0px;height:0px;filter:alpha(opacity:60);opacity:0.6;z-index:1000;"; selectArea.style.left=startX+"px"; selectArea.style.top=startY+"px"; document.body.appendChild(selectArea) isSelect=true; clearEventBubble(e); } document.onmousemove=function(){ if(isSelect){ var e = event||arguments.callee.caller.arguments[0]; currentX= e.x|| e.clientX; currentY= e.y|| e.clientY; var selectAreaWidth=Math.abs(currentX-startX); var selectAreaHeight=Math.abs(currentY-startY); selectArea.style.width=selectAreaWidth+"px"; selectArea.style.height=selectAreaHeight+"px"; //console.log(selectAreaWidth+","+selectAreaHeight); //console.log(selectArea); for(var i=0;i<divNodeList.length;i++){ var divNode = divNodeList[i]; var offsetTop = divNode.offsetTop; var offsetLeft = divNode.offsetLeft; //console.log("startX:"+startX+",startY:"+startY); // console.log(divNode.className+",offsetTop:"+offsetTop+",offsetLeft:"+offsetLeft); var offsetButtom=offsetTop+divNode.offsetHeight; var offsetRight=offsetLeft+divNode.offsetWidth; // if(startX>offsetLeft&&startY>offsetTop&&offsetButtom>startY&&offsetRight>startX){ // if(divNode.className.indexOf("selected")==-1){ // //console.log(divNode.id+",offsetTop:"+offsetTop+",offsetLeft:"+offsetLeft+",startX:"+startX+",startY:"+startY); // selectDivList.push(divNode); // divNode.className=divNode.className+" selected"; // } // } // else if(offsetTop>startY&&offsetLeft>startX&¤tX>offsetLeft&¤tY>offsetTop){ // if(divNode.className.indexOf("selected")==-1){ // //console.log(divNode.id+",offsetTop:"+offsetTop+",offsetLeft:"+offsetLeft+",startX:"+startX+",startY:"+startY); // selectDivList.push(divNode); // divNode.className=divNode.className+" selected"; // } // } if(currentX>offsetLeft&¤tY>offsetTop&&offsetRight>startX&&offsetButtom>startY){ if(divNode.className.indexOf("selected")==-1){ //console.log(divNode.id+",offsetTop:"+offsetTop+",offsetLeft:"+offsetLeft+",startX:"+startX+",startY:"+startY); selectDivList.push(divNode); divNode.className=divNode.className+" selected"; } } else{ if(divNode.className.indexOf("selected")>-1){ divNode.className="select-div"; } } } console.log(selectDivList); clearEventBubble(e); } } document.onmouseup=function(){ showSelectDiv(); startX=0; startY=0; currentX=0; currentY=0; isSelect=false; selectDivList=[]; divNodeList=[]; document.body.removeChild(selectArea); } function clearEventBubble(evt){ if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } function getDivNodeList(){ var divNodes=document.getElementsByTagName("div"); for(var i=0;i<divNodes.length;i++){ var node = divNodes[i]; if(node.className.indexOf("select-div")>-1){ divNodeList.push(node); console.log(node.id+",offsetTop:"+node.offsetTop+",offsetLeft:"+node.offsetLeft); } } } function showSelectDiv(){ var result="選中的div包括:\n"; for(var i=0;i<selectDivList.length;i++){ var node = selectDivList[i]; if(node.className.indexOf("selected")>-1){ result +=node.id+"\n" } } alert(result); } })(); </script> </body> </html>
