2016-05-31 85 views
0

我有一個尺寸爲200px x 300px的SVG圖像,但基於某些條件,我需要畫出半徑值爲30的小圓圈,條件失敗,並希望它在我的圖像的指定區域上均勻分層(不重疊)。如何計算要用於圓形的SVG圖像的區域

可能會畫出多個圓圈,但顯然不希望這些圖像脫離圖像,而是在圖像的第一行上繪製5個圓圈時將它們纏繞到下一行。

第2行同樣適用,一旦繪製了半徑爲30的5個圓,則換行到下一行。

我使用的是snapsvg.io,但不確定如何計算圖像的區域,我希望繪製圓圈並確定如何執行到下一行的換行。

如何實現上述任何幫助將不勝感激。

謝謝。

+1

JavaScript中的模數運算符將用於包裝。 –

+0

還沒有使用這個操作符 - 會看一看,但仍然不確定如何計算出圖像某個區域的邊界,添加我的圓圈? – tonyf

+0

你想讓你的圓圈從x = 0 + r到x = 200 - r?不是嗎? –

回答

0

設法通過計算我想要的目標區域的邊界並使用Robert Longson建議的JavaScript模運算符來實現此目的。

通過邊界,我手動確定了我想要使用的圖像區域的每個角位置,即從左到右到底部並再次離開 - 基本上是寬度/高度。

除此之外,我知道我只會在這個圖像區域上從左到右顯示7個小圓圈,所以當循環索引%7 = 0時,我重置我的(x,y)座標以開始下一個ine - 2r。

+0

@RobertLongson - 關於你的建議,我已經更新了我的答案。 – tonyf