js怎么实现固定区域内的不重叠随机圆-创新互联

这篇文章给大家分享的是有关js怎么实现固定区域内的不重叠随机圆的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

最近公司有一个需求就是在一个固定的区域（500X500）内显示10个圆，且半径固定，而且不重叠

因为圆的个数固定，而且半径固定，那么就有可能会没有解决方案。

不过其实也没有很难，处理好半径的大值就好了。

效果图：

思路：

（固定半径）

step1：先在区域内生成一个随机的圆心坐标，
step2：然后拿一个固定半径（从大到小拿固定半径）
step3：判断圆心和半径是否合法（是否超边距，或者两个圆相交）
step4：如果不合法，重新执行step2和step3
step5：如果合法，记为一个新圆
step6：重复step1~5，直到生成10个圆

（随机半径）

step1：先在区域内生成一个随机的圆心坐标，
step2：根据圆心坐标，与其他圆比较，获取最短的圆心距减去比较圆的半径（圆心距-R n  RnR_n）的值，作为新圆的半径(这样就会生成一个相切的圆)
step3：判断圆心和半径是否合法（是否超边距）
step4：如果不合法，重新执行step2和step3
step5：如果合法，记为一个新圆
step6：重复step1~5，直到生成10个圆

代码：

// 参数
let obj = {
  id: string, // canvas 的id
  fix：boolean, // 是否固定半径，默认为false
  minMargin： Number, // 两个圆的最短距离，默认为10
  minRadius: Number, 最小的圆半径，默认为30
  radiuArr: Array, 圆的半径的数组，当fix为true时该值必须填
  total: Number ，圆的个数，默认为10
}

Your browser does not support the HTML5 canvas tag.


 

感谢各位的阅读！关于“js怎么实现固定区域内的不重叠随机圆”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。