javascript - 如何在html5中不重叠地随机生成圆圈？

Question

我在一个网站上工作，该网站的圈子中加载了很多 YouTube 缩略图。并且圆圈应该随机生成而不会重叠。这是 Fiddle link .不确定如何在我的网站中不重叠的情况下加载此圈子内的图像。我正在使用 kineticjs。如有必要，我可以转移到其他代码或插件。这些图像也有点击事件。感谢你。

//js
 var circle = new Kinetic.Circle({
          x: Math.random() * stage.getWidth(),
          y: Math.random() * stage.getHeight(),
          radius: Math.random() * 50 + 30,
          fill: Kinetic.Util.getRandomColor(),
          id: id
        });

Answer 1

最简单的方法可能是在创建圆圈时保留一组渲染圆圈。然后只将有效(非重叠)的添加到渲染层。

如果圆心之间的距离小于它们的半径之和，则圆与另一个圆重叠。换句话说，如果 Circle2 满足以下所有预先存在的圆(中心为(x1，y1)和半径为 r1)的条件，则仅添加 Circle2(中心为(x2，y2)和半径为 r2)。

( (x2-x1)^2 + (y2-y1)^2 ) ^ (1/2) > (r1 + r2)

如果没有，丢弃它并尝试生成另一个。