绝对定位的层判断是否有相互覆盖的解决算法
这个算法我在上篇博文《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;
}至于还有两种情况，就是两个角处于区域内和四个角都在低层的区域内，这两种情况都必须满足第一个条件，就是一个角处于区域内，所以不用再次判断。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2013-07-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读