好资源导航 » 文章资讯 » js实现固定区域内的不重叠随机圆

js实现固定区域内的不重叠随机圆

2023-08-10 10:51:05 88

本文实例为大家分享了js实现固定区域内的不重叠随机圆，供大家参考，具体内容如下

关键词：js、固定区域、不重叠、随机圆，半径固定、半径随机

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

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

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

效果图：

思路：

（固定半径）

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

（随机半径）

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

代码：

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






YourbrowserdoesnotsupporttheHTML5canvastag.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js实现固定区域内的不重叠随机圆

热门推荐

随机推荐