这个算法我在上篇博文《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;
}
至于还有两种情况,就是两个角处于区域内和四个角都在低层的区域内,这两种情况都必须满足第一个条件,就是一个角处于区域内,所以不用再次判断。