如何在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

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

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

<（>（x2-x1）^ 2 +（y2-y1）^ 2）^（1/2）> （r1 + r2）

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