題目（2018-11-20）

用一個對象的數據來表示一個矩形的位置和大小：

{x: 100,y: 100,width: 150,height: 250 }

它表示一個寬為150高為250的矩形在頁面上的(100, 100)的位置。

請你完成一個函數isOverlap可以接受兩個矩形作為參數，判斷這兩個矩形在頁面上是否重疊。例如：

const rect1 = { x: 100, y: 100, width: 100, height: 100 } const rect2 = { x: 150, y: 150, width: 100, height: 100 } isOverlap(rect1, rect2) // => true

實現

一開始的思路是，如果兩個矩形重疊，那么必然有一個矩形的任意一個頂點在第一個矩形中，實現之后發現并不是的，這樣沒有考慮一個矩形完全包圍另外一個矩形的情形，這種情況下需要先判斷哪一個是比較小的矩形，小矩形的頂點一定在大矩形里面

嘗試后發現，下面這種情形也沒有考慮進去：

這種情況下，利用頂點來判斷重疊就不靠譜了，索性取一個矩形的所有點進行遍歷，只要有一個點在內部就立刻退出遍歷，然后返回true

const isOverlap = (rect1, rect2) = > {if (rect1.width <= rect2.width) {[rect1, rect2] = [rect2, rect1]}const startX = rect1.x,startY = rect1.y,endX = startX + rect1.width,endY = startY + rect1.height;console.log(startX, 'startX');console.log(startY, 'startY');console.log(endX, 'endX');console.log(endY, 'endY');for (let x = rect2.x; x <= rect2.x + rect2.width; x++) {for (let y = rect2.y; y <= rect2.y + rect2.height; y++) {if (x >= startX && x <= endX && y >= startY && y <= endY) {return true}}}return false; };

這樣原則上應該是可以的，但是實在是有點蠢，重疊的情況要判斷的情形比較多，那么反過來考慮，去判斷不重疊的情況下，這樣就比較簡單了，只有四種情況：

這四種情況的判斷：

endY2 < startY1 || endY1 < startY2 || startX1 > endX2 || startX2 > endX1

這就比較簡單了

const isOverlap = (rect1, rect2) = > {const startX1 = rect1.x,startY1 = rect1.y,endX1 = startX1 + rect1.width,endY1 = startY1 + rect1.height;const startX2 = rect2.x,startY2 = rect2.y,endX2 = startX2 + rect2.width,endY2 = startY2 + rect2.height;return !(endY2 < startY1 || endY1 < startY2 || startX1 > endX2 || startX2 > endX1) };

參考

[1]?https://www.jianshu.com/p/aee1fa12a193

總結

以上是生活随笔為你收集整理的判断两个矩形是否重叠的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。