绝对定位的层判断是否有相互覆盖的解决算法
这个算法我在上篇博文《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; }
至于还有两种情况,就是两个角处于区域内和四个角都在低层的区域内,这两种情况都必须满足第一个条件,就是一个角处于区域内,所以不用再次判断。
新博客地址
hooray.github.io
hooray.github.io