一次偶然的机会，设计师出了这样一张图：

设计师的图

在区域内，小圆形随机分布。

一般来讲，在区域内生成一个{x,y}对象并不复杂，这里的难点是碰撞检测。

先来了解一下调用方式：

调用方式

参数1是随机一个位置后，调用的回调，这里会传出来{x,y,size},size可以忽略，没什么用。

参数2是告诉位置组件，圆的个数（也就是位置的个数）和小圆半径size（和回传的size是一个字段）。

参数三是整体区域的半径。

细心的同学会问：为啥都是传的半径呢？配置是什么样子的呢？getSpotPos怎么接受返回的位置呢？

我们先来看下配置的样子（getConfig函数里做了什么）：

配置信息

PS:想要几个位置就传几个尺寸，简单的令人发指有木有。。。

再来看下getSpotPos如何接受返回值的：

getSpotPos

大家一定会有疑问：这里为什么是10次的时候重新渲染？ 小编：因为配置里有10个尺寸信息啊～.～（这里其实可以抽象成一个变量）。

好了，用法就是上边这么用了，传说中的随机位置和碰撞呢？

表糟急，代码这就来。

片段1

片段2

80行代码，童叟无欺。

大概思想：在大圆范围（实例中，这10个元素的情况下，范围半径小于150，计算将会很吃力，所以保证范围不会小于150）中间，生成第一个位置，也是最大的元素所在的位置。然后，其他的位置随机生成后，与生成过的位置进行碰撞检测，无碰撞就记录，有碰撞，再生成。

碰撞中主要做的事情：保证不太靠边，保证不会和大圆圆心离得太近，然后就是两个位置x和y相等的情况（概率事件，不得不防）。最后是一般情况。

因为都是圆，所以只需检测圆心距离是否大于两半径与最小间距之和就可以了。

做完之后，小编发现－－－－数学很重要啊。