我在一个网站上工作,该网站的圈子中加载了很多 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
});
最佳答案
最简单的方法可能是在创建圆圈时保留一组渲染圆圈。然后只将有效(非重叠)的添加到渲染层。
如果圆心之间的距离小于它们的半径之和,则圆与另一个圆重叠。换句话说,如果 Circle2 满足以下所有预先存在的圆(中心为(x1,y1)和半径为 r1)的条件,则仅添加 Circle2(中心为(x2,y2)和半径为 r2)。
( (x2-x1)^2 + (y2-y1)^2 ) ^ (1/2) > (r1 + r2)
如果没有,丢弃它并尝试生成另一个。
关于javascript - 如何在html5中不重叠地随机生成圆圈?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20971305/