无碰撞的随机尺寸矩形的随机生成
无碰撞的随机尺寸矩形的随机生成
提问于 2018-08-31 21:09:19
我想生成具有随机尺寸的随机矩形，而不会发生碰撞。此时此刻，我有这个，但它是碰撞，我，我已经失去了解决这个问题的想法。
<html>
<head>
</head>
<body>
<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="550" height="550">
</svg>
<script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";
function rectan()
{
for (var i = 0; i < 5; i++) {
var x = Math.floor(Math.random() * 200) + 1 ;
y = Math.floor(Math.random() * 200) + 1 ;
var rect = document.createElementNS(svgns, 'rect');
rect.setAttributeNS(null, 'x', x);
rect.setAttributeNS(null, 'y', y);
rect.setAttributeNS(null, 'height', '50');
rect.setAttributeNS(null, 'width', '50');
rect.setAttributeNS(null, 'fill', 'none');
rect.setAttributeNS(null, 'stroke', '#010101');
document.getElementById('svgOne').appendChild(rect);
}
}
rectan();
</script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2018-08-31 21:20:51
有几种方法可以做到这一点。
选项1
- 指定您想要的矩形数量
- 当您放置的矩形数量小于您想要的矩形数量
- 生成矩形
- 如果该矩形与任何其他已放置的矩形发生冲突，请返回
<>H19>否则，请将
可选的附加组件：
如果你不能在10次(可能是100,1000，你认为最好的)之后放置一个矩形，退出循环，因为你不太可能在没有它的情况下放置另一个矩形colliding
- Reduce根据你尝试放置一个矩形的次数生成的最大矩形大小。
- 如果你不能在10次之后放置一个矩形(可以是100,1000，无论你认为是最好的)，退出循环，因为没有它你不可能放置另一个矩形。这样，您最终可以使用较小的rectangles
- Have填充较小的间隙，这是一个将所有矩形的面积相加的函数，用于检查您是否填充了画布
选项2
- 基于最大矩形尺寸和要生成的网格的最大尺寸指定网格(假设您有一个画布1000px x 1000px，最大矩形尺寸为200px x 200px，您将拥有一个5 x 5的网格)
- 为网格中的每一项生成一个随机大小的矩形并将其放置在
x * maxRectSize, y * maxRectSize
中
对于选项1，它将更密集，但您将获得更精细的结果，特别是如果您执行可选的额外任务。
使用选项2，你只会得到一个矩形网格，它们不会在随机的位置，但它会运行得很快。
另一种选择是使用选项2来生成一个起始画布，然后您可以在此基础上应用选项1来填充空白。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52116191
复制相关文章
相似问题
腾讯云开发者
