這個算法我在上篇博文《jQuery 模擬 ubuntu 3D desktop 的 Dodge Effect 效果》中有提到過。
但那時想法過於簡單，當時的解決思路是只要層的一個角的坐標處於另一個層的所在區域，則窗口就會有覆蓋。這一點沒有錯，但還有一些特殊情況。比如：
// _______ _______ _____ // ___| | | |___ _| |___ // | | | | | | | | | | // |___| | | |___| |_| |___| // |_______| |_______| |_____| // _____ ___________ _____ // __|_____|__ | | _|_____|___ // | | | | | | // | | |___________| |___________| // |___________| |_____| |_____|
下面的代碼需要配合上篇文章的代碼看，我只提供核心的判斷代碼了
// 常規情況，只要有一個角處於區域內，則可以判斷窗口有覆蓋
// _______ _______ _______ _______
// | ___|___ ___| | ___|___ | | |___
// | | | | | | | | | | | |
// |___| | | |_______| | |___| |_______| |
// |_______| |_______| |_______| |_______|
if(
(thisStartX >= baseStartX && thisStartX <= baseEndX && thisStartY >= baseStartY && thisStartY <= baseEndY)
||
(thisStartX >= baseStartX && thisStartX <= baseEndX && thisEndY >= baseStartY && thisEndY <= baseEndY)
||
(thisEndX >= baseStartX && thisEndX <= baseEndX && thisStartY >= baseStartY && thisStartY <= baseEndY)
||
(thisEndX >= baseStartX && thisEndX <= baseEndX && thisEndY >= baseStartY && thisEndY <= baseEndY)
){
flag = true;
}
// 非常規情況
// _______ _______ _____
// ___| | | |___ _| |___
// | | | | | | | | | |
// |___| | | |___| |_| |___|
// |_______| |_______| |_____|
if(
(thisStartX >= baseStartX && thisStartX <= baseEndX && thisStartY < baseStartY && thisEndY > baseEndY)
||
(thisEndX >= baseStartX && thisEndX <= baseEndX && thisStartY < baseStartY && thisEndY > baseEndY)
){
flag = true;
}
// _____ ___________ _____
// __|_____|__ | | _|_____|___
// | | | | | |
// | | |___________| |___________|
// |___________| |_____| |_____|
if(
(thisStartY >= baseStartY && thisStartY <= baseEndY && thisStartX < baseStartX && thisEndX > baseEndX)
||
(thisEndY >= baseStartY && thisEndY <= baseEndY && thisStartX < baseStartX && thisEndX > baseEndX)
){
flag = true;
}
至於還有兩種情況，就是兩個角處於區域內和四個角都在低層的區域內，這兩種情況都必須滿足第一個條件，就是一個角處於區域內，所以不用再次判斷。