个人中心
gpt4 book ai didi

javascript - 如何确保随机生成的 Div 不重叠

转载 作者：行者123 更新时间：2023-12-04 13:07:28 26 4
gpt4 key购买 nike

我目前正在开发一个网站，该网站使用随机生成的 div 放置。我编写了一些 JavaScript 代码来根据用户的屏幕尺寸放置 div。我还实现了各种方法来检查两个 divs 是否相互重叠。 目标是两个每个 div 都不重叠 ⇒ 如果“getOverlap”返回 true，则需要再次生成坐标。

只要有覆盖的 div，我就不太确定如何生成新坐标。驱动程序代码中的 for 循环检查每个元素与其他所有元素，同时忽略重复项(例如#a == #b 和#b == #a)。

有问题的是代码中应该“提出”具有唯一坐标的部分:我无法获得最终实际上不重叠的版本。我试过递归地做，但没有成功。

注意:这是我接手的第一个大型 JS 项目。如果您对如何改进通用代码有任何建议，请告诉我:)

JSFiddle:https://jsfiddle.net/timlwsk/7bokp6wr/2/

MWE:

<html>
    <body>
        <div class="random" style="width: 500; height: 500; background-color: pink; position: absolute;"  id="a">Div1</div>
        <div class="random" style="width: 500; height: 500; background-color: lightblue; position: absolute;" id="b">Div2</div>
        <div class="random" style="width: 500; height: 500; background-color: lightgreen; position: absolute;;" id="c">Div3</div>
    <script>
        // Returns largest div's width and height
        function getMaxDimension(arr) {
            var maxWidth = 0;
            for(var i = 0; i < div_selection.length; i++) {
                if(div_selection[i].offsetWidth > maxWidth) {
                    maxWidth = div_selection[i].offsetWidth;
                }
            }
            var maxHeight = 0;
            for(var i = 0; i < div_selection.length; i++) {
                if(div_selection[i].offsetHeight > maxHeight) {
                    maxHeight = div_selection[i].offsetHeight;
                }
            }
            var values = {maxWidth: maxWidth, maxHeight: maxHeight};
            return values;
        }

        // Retruns a random number x; min < x < max
        function getRandomNumber(min, max) {
            return Math.random() * (max - min) + min;
        }

        // returns the position in xy-space of every corner of a rectangular div
        function getOffset(element) {
            var position_x = element.offsetLeft;
            var position_y = element.offsetTop;
            var height_x = element.offsetWidth;
            var height_y = element.offsetHeight;
            var tolerance = 0; // will get doubled
            return {
                A: {y: position_y-tolerance, x: position_x-tolerance},
                B: {y: position_y+height_x+tolerance, x: position_x-tolerance},
                C: {y: position_y+height_x+tolerance, x: position_x+height_y+tolerance},
                D: {y: position_y-tolerance, x: position_x+height_y+tolerance}
            };
        }


        // Returns true if any corner is inside the coordinates of the other div
        function getOverlap(div1, div2) {
            coor_1 = getOffset(document.getElementById(div1));
            coor_2 = getOffset(document.getElementById(div2));
            return (
                (coor_1.A.x < coor_2.A.x && coor_2.A.x < coor_1.D.x) && (coor_1.A.y < coor_2.A.y && coor_2.A.y < coor_1.B.y) ||
                (coor_1.A.x < coor_2.B.x && coor_2.B.x < coor_1.D.x) && (coor_1.A.y < coor_2.B.y && coor_2.B.y < coor_1.B.y) || 
                (coor_1.A.x < coor_2.C.x && coor_2.C.x < coor_1.D.x) && (coor_1.A.y < coor_2.C.y && coor_2.C.y < coor_1.B.y) ||
                (coor_1.A.x < coor_2.D.x && coor_2.D.x < coor_1.D.x) && (coor_1.A.y < coor_2.D.y && coor_2.D.y < coor_1.B.y)
            );
        }

        // Number to Letter
        function getChar(n) {
            var ordA = 'a'.charCodeAt(0);
            var ordZ = 'z'.charCodeAt(0);
            var len = ordZ - ordA + 1;
        
            var s = "";
            while(n >= 0) {
                s = String.fromCharCode(n % len + ordA) + s;
                n = Math.floor(n / len) - 1;
            }
            return s;
        }

        var div_selection = document.getElementsByClassName("random");

        maxDimensions = getMaxDimension(div_selection);
        var widthBoundary = maxDimensions.maxWidth;
        var heightBoundary = maxDimensions.maxHeight;

        for(var i = 0; i < div_selection.length; i++) {
            randomLeft = getRandomNumber(widthBoundary, window.innerWidth-widthBoundary);
            randomTop = getRandomNumber(heightBoundary, window.innerHeight-heightBoundary);
            div_selection[i].style.left = randomLeft + "px";
            div_selection[i].style.top = randomTop + "px";
        }

        // check every element
        for(var i = 0; i < div_selection.length; i++) {
            for(var j = i+1; j < div_selection.length; j++) {
                console.log(i, j)
                console.log(getChar(i), getChar(j))
                console.log(getOverlap(getChar(i), getChar(j)))
            }
        }
    </script>
  </body>
</html>

最佳答案

有趣的是，您已经拥有实现此目标所需的所有代码。这是两件事:

  • 检查矩形是否重叠的函数。这已经在代码中:getOverlap
  • 一种检查新矩形展示位置是否与现有矩形展示位置重叠的方法。这与最后一个循环基本相同。

所以我所做的就是将一些代码添加到 div 放置循环中，使其查看之前的每个 div，看看它们是否会重叠。如果它们重叠，它只会生成一个新位置。这一直持续到找到空闲位置。

如果在 50 次尝试后仍未找到位置，则矩形将随机放置在任何位置，即使它们重叠。这确保我们不会陷入无限循环，如果窗口很小并且没有足够的空间以非重叠方式放置所有矩形，就会发生这种情况。

我还将矩形的数量增加到五个，这增加了碰撞的机会。

就在这里:

(我在这个版本中缩小了 div，因为代码片段窗口非常小。)

 // Returns largest div's width and height
 function getMaxDimension(arr) {
   var maxWidth = 0;
   for (var i = 0; i < div_selection.length; i++) {
     if (div_selection[i].offsetWidth > maxWidth) {
       maxWidth = div_selection[i].offsetWidth;
     }
   }
   var maxHeight = 0;
   for (var i = 0; i < div_selection.length; i++) {
     if (div_selection[i].offsetHeight > maxHeight) {
       maxHeight = div_selection[i].offsetHeight;
     }
   }
   var values = {
     maxWidth: maxWidth,
     maxHeight: maxHeight
   };
   return values;
 }

 // Retruns a random number x; min < x < max
 function getRandomNumber(min, max) {
   return Math.random() * (max - min) + min;
 }

 // returns the position in xy-space of every corner of a rectangular div
 function getOffset(element) {
   var position_x = element.offsetLeft;
   var position_y = element.offsetTop;
   var height_x = element.offsetWidth;
   var height_y = element.offsetHeight;
   var tolerance = 0; // will get doubled
   return {
     A: {
       y: position_y - tolerance,
       x: position_x - tolerance
     },
     B: {
       y: position_y + height_x + tolerance,
       x: position_x - tolerance
     },
     C: {
       y: position_y + height_x + tolerance,
       x: position_x + height_y + tolerance
     },
     D: {
       y: position_y - tolerance,
       x: position_x + height_y + tolerance
     }
   };
 }


 // Returns true if any corner is inside the coordinates of the other div
 function getOverlap(div1, div2) {
   coor_1 = getOffset(document.getElementById(div1));
   coor_2 = getOffset(document.getElementById(div2));
   return (
     (coor_1.A.x <= coor_2.A.x && coor_2.A.x <= coor_1.D.x) && (coor_1.A.y <= coor_2.A.y && coor_2.A.y <= coor_1.B.y) ||
     (coor_1.A.x <= coor_2.B.x && coor_2.B.x <= coor_1.D.x) && (coor_1.A.y <= coor_2.B.y && coor_2.B.y <= coor_1.B.y) ||
     (coor_1.A.x <= coor_2.C.x && coor_2.C.x <= coor_1.D.x) && (coor_1.A.y <= coor_2.C.y && coor_2.C.y <= coor_1.B.y) ||
     (coor_1.A.x <= coor_2.D.x && coor_2.D.x <= coor_1.D.x) && (coor_1.A.y <= coor_2.D.y && coor_2.D.y <= coor_1.B.y)
   );
 }

 // Number to Letter
 function getChar(n) {
   var ordA = 'a'.charCodeAt(0);
   var ordZ = 'z'.charCodeAt(0);
   var len = ordZ - ordA + 1;

   var s = "";
   while (n >= 0) {
     s = String.fromCharCode(n % len + ordA) + s;
     n = Math.floor(n / len) - 1;
   }
   return s;
 }

 var div_selection = document.getElementsByClassName("random");

 maxDimensions = getMaxDimension(div_selection);
 var widthBoundary = maxDimensions.maxWidth;
 var heightBoundary = maxDimensions.maxHeight;

 for (var i = 0; i < div_selection.length; i++) {
   var isOverlapping = false;
   var attemptCount = 0;
   do {
     randomLeft = getRandomNumber(0, window.innerWidth - widthBoundary);
     randomTop = getRandomNumber(0, window.innerHeight - heightBoundary);
     div_selection[i].style.left = randomLeft + "px";
     div_selection[i].style.top = randomTop + "px";     
     isOverlapping = false;
     for (var j = 0; j < i; j++) {
        if (getOverlap(getChar(i), getChar(j))) {
        isOverlapping = true;
        break;
      }
     }
   } while (++attemptCount < 50 && isOverlapping);
 }

 // check every element
 for (var i = 0; i < div_selection.length; i++) {
   for (var j = i + 1; j < div_selection.length; j++) {
     console.log(i, j)
     console.log(getChar(i), getChar(j))
     console.log(getOverlap(getChar(i), getChar(j)))
   }
 }
div {
  width: 60px;
  height: 60px;
  position: absolute;
}

#a {
  background-color: pink;
}

#b {
  background-color: lightblue;
}

#c {
  background-color: lightgreen;
}

#d {
  background-color: silver;
}

#e {
  background-color: yellow;
}
<html>

  <body>
    <div class="random" id="a">Div1</div>
    <div class="random" id="b">Div2</div>
    <div class="random" id="c">Div3</div>
    <div class="random" id="d">Div4</div>
    <div class="random" id="e">Div5</div>
  </body>

</html>

关于javascript - 如何确保随机生成的 Div 不重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68734459/

26 4 0
文章推荐： rxjs - 如何防止在 RxJS 中进行多次提取调用？
文章推荐： python - pandas - 识别最接近 null/sentinel 值的行
文章推荐： javascript - 如何使用 vue-cli 和 vue 3 在 antdesign 中应用组件？
文章推荐： python - 在使用 pyinstaller 制作的可执行文件中获取运行时错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com