一次偶然的機會厨内,設(shè)計師出了這樣一張圖:
在區(qū)域內(nèi)夷都,小圓形隨機分布。
一般來講尤莺,在區(qū)域內(nèi)生成一個{x,y}對象并不復(fù)雜旅敷,這里的難點是碰撞檢測。
先來了解一下調(diào)用方式:
參數(shù)1是隨機一個位置后颤霎,調(diào)用的回調(diào)媳谁,這里會傳出來{x,y,size},size可以忽略,沒什么用友酱。
參數(shù)2是告訴位置組件晴音,圓的個數(shù)(也就是位置的個數(shù))和小圓半徑size(和回傳的size是一個字段)。
參數(shù)三是整體區(qū)域的半徑缔杉。
細心的同學(xué)會問:為啥都是傳的半徑呢锤躁?配置是什么樣子的呢?getSpotPos怎么接受返回的位置呢或详?
我們先來看下配置的樣子(getConfig函數(shù)里做了什么):
PS:想要幾個位置就傳幾個尺寸系羞,簡單的令人發(fā)指有木有。霸琴。椒振。
再來看下getSpotPos如何接受返回值的:
大家一定會有疑問:這里為什么是10次的時候重新渲染? 小編:因為配置里有10個尺寸信息啊~.~(這里其實可以抽象成一個變量)梧乘。
好了澎迎,用法就是上邊這么用了,傳說中的隨機位置和碰撞呢选调?
表糟急夹供,代碼這就來。
80行代碼仁堪,童叟無欺哮洽。
大概思想:在大圓范圍(實例中,這10個元素的情況下枝笨,范圍半徑小于150袁铐,計算將會很吃力,所以保證范圍不會小于150)中間横浑,生成第一個位置剔桨,也是最大的元素所在的位置。然后徙融,其他的位置隨機生成后洒缀,與生成過的位置進行碰撞檢測,無碰撞就記錄欺冀,有碰撞树绩,再生成。
碰撞中主要做的事情:保證不太靠邊隐轩,保證不會和大圓圓心離得太近饺饭,然后就是兩個位置x和y相等的情況(概率事件,不得不防)职车。最后是一般情況瘫俊。
因為都是圓,所以只需檢測圓心距離是否大于兩半徑與最小間距之和就可以了悴灵。
做完之后扛芽,小編發(fā)現(xiàn)----數(shù)學(xué)很重要啊。