大家好，可能今年換了公司過得比較安逸，自己的心情也不算太好，所以一段時間都沒很好的學習和更新文章。自從最近看了扔物線HenCoder的文章之後，自己感覺自己對很多自定義View和動畫的知識都不太懂，甚至在平時的開發極少用到，所以自己想好好學習這一塊的知識。之前無意中在公眾號上看到一個仿英雄聯盟的的七邊形戰力圖，自己發現，平時我看的好幾個app都有這樣的多邊形戰力圖，所以覺得可以自己做一個大眾版的出來，適配各個關於多邊形戰力圖的自定義View。下面我們看看效果圖：
然後再看看我自己寫的自定義View的效果：
可以看到其實大致的效果是差不多的，但是有一些小細節可能需要自己去定製某個條件再處理，細化和潤色，因為我這裡是用同樣的方法，只是設定的引數不一樣，所以看上去有些細節需要再根據自己是幾邊形再調整一下。
大家看看我寫的程式碼就知道了：
只需要短短的程式碼就能畫出不同的戰力多邊形。
好的，那下面我們就來講講這個東西是怎麼實現的，老規矩，如果不想聽分析的同學可以直接下載原始碼去看看。原始碼下載連結
講程式碼之前，先給大家講一下畫出這個多邊形的原理，對，就是數學原理，先看看下面的圖：
用一個正六邊形舉例，假設說它每個角到座標原點為半徑X，那麼我們用數學的原理XcosA就能得出得出B點的X軸座標，XsinA能得出B點的Y軸座標，由此我們看出來B（XcosA，XsinA），至於∠A的度數怎麼來的就更簡單了，正n邊形360°/ n，即 2π/n 就能得到一個角是多少度的了。那很自然而然的，我們用一個for迴圈就可以得出六邊形所有的座標點
for (i in 0..count - 1) {
//每個座標點
(radius * cos(2 * Math.PI / count * i)).toFloat(), (radius * sin(2 * Math.PI / count * i)).toFloat())
}
複製程式碼以上就是多邊形戰力圖的數學原理，應該很簡單吧。其實很多自定義View也是一樣，只要懂了原理，很多東西很自然而然很簡單的就能寫出來。生活上很多事情也是一樣，沒做之前什麼事情都想著自己做不好就放棄了，但是自己嘗試了發現原來這個事情原來那麼簡單，我每次寫自定義View總有這個感慨。
不吹什麼了，確實畢業一年多工作兩年最近感慨有點。好了，下面我們來看看程式碼我是怎麼一步步實現的吧。在實現程式碼之前，我先說這個View我是用kotlin寫的，最近也慢慢用kotlin寫程式碼寫專案。一開始確實很不習慣，速度很慢，但是我覺得我總會熟能生巧的吧，所以貴在堅持嘛。
下面我們以懂球帝的六邊形戰力圖為例一步步畫出想要的效果吧：
一、首先我們需要畫出一個多邊形，和巢狀的多個多邊形。
程式碼很簡單，我們看看紅色框裡面的程式碼就是最核心的部分，一個for迴圈，剛剛講原理的時候也說過。那下面詳細分析一下，當i=0的時候，我們把path移動到我們的第一個點上，
path.moveTo((radius * cos(2 * Math.PI / count * i - Math.PI / 2)).toFloat(), (radius * sin(2 * Math.PI / count * i - Math.PI / 2)).toFloat())
複製程式碼當i>0的時候，我們就需要把這些點用路徑直線連起來了，所以用的是lineTo()
path.lineTo((radius * cos(2 * Math.PI / count * i - Math.PI / 2)).toFloat(), (radius * sin(2 * Math.PI / count * i - Math.PI / 2)).toFloat())
複製程式碼有人會問為什麼角度最後需要減去π / 2，那是因為我們需要把六邊形旋轉一下，視覺效果更好。
一個六邊形我們畫出來了，那麼一個六邊形裡面多個巢狀的多邊形就能很容易的畫出來了，只需要在第一個for迴圈的外面再加一個for迴圈，每次把半徑都減去一定的值，那很簡單就畫出來了。在上圖中紅色框框外的程式碼做的事情就是去加一個for迴圈，和給畫筆paint加上一些圖片的填充顏色，另外還在六邊形描了畫邊。
二、畫六邊形的中心到每個角的角邊：
有人注意到了嗎，我們在第一個for迴圈的時候加了一句程式碼：
//把相應的點儲存到pointList中
points.add(PointF(radius * cos(2 * Math.PI / count * i - Math.PI / 2).toFloat(), radius * sin(2 * Math.PI / count * i - Math.PI / 2).toFloat()))
複製程式碼這句程式碼就是把我們所要畫的六邊形的六個點的座標儲存了下來，為方便我們之後用，而且下面很多地方都用到了，你看，這裡就用到了。
我們這裡考慮到有些多邊形不需要角邊，所以加了一個判斷，不需要就設定false就好了。
畫完角邊我們就考慮一下多邊形外面的字型了。
三、畫出字型
老實說，這裡是我做這個自定義View最難受的地方，因為字型的位置要根據六邊形每個角慢慢調整字型的不同的位置，我沒想到更好的辦法處理，暫時只是按照座標軸的四個象限來稍微調整了一下位置，所以當每個同學有興趣做定製化的時候，需要自己再做一些細節的字型位置調整處理。
畫完六邊形外面的內容，那麼我們就要往裡看看了吧。
四、畫出分數區域及設定相關屬性
1.我們要設定分數區域的一些屬性，另它更好看一點：
2.設定各個屬性的分數比例：
3.按比例畫出每個區域的點並連成線：
其實這一步跟第一步很類似，也並沒有什麼難點可言。
最後我們來看看最終的效果圖：
講完多邊形戰力圖的原理程式碼，我們再看看要如何使用：
關於使用，我用了設計模式的builder模式，即建造者模式來管理整個自定義View的配置。我把每個屬性都分開做定製化處理，並連成一條資料鏈初始化，然後最後呼叫build的方法就可以實現所有方法的配置，是不是很簡便，雖然程式碼量多了，但是builder模式對我以後對這個自定義View的修改和擴充套件非常有好處。
下面講講做這個自定義View在kotlin上遇到的一些小問題：
1.建構函式的編寫跟java有區別：
有人注意到了嗎，雖然在意思上是一樣的，但是kotlin和java在表達上在建構函式這塊上可有不一樣的地方。
2.kotlin的小坑：
誰都知道，kotlin是不需要在程式碼中初始化xml控制元件的，這一點用過的人都會覺得很方便，但是在這裡我踩了一個小坑，看下圖：
大家是不是會覺得這段程式碼完全沒問題？我一開始也是這麼認為的，但是我得到的結果是。。。。。
為什麼說我沒有初始化呢，明明程式碼的編譯成功了，我一開始想不明白為什麼，後來經過一個師兄的提醒 ，我才發現我們在宣告的時候，dongqiudiPolygonView指向的只是一個int型別的數字，但是如果你想用他的build方法，你還是要老老實實的加上一句
dongqiudiPolygonView = findViewById(R.id.dongqiudiPolygonView)
複製程式碼哎，坑啊，所以說探索還是需要有點代價的，下次就不會再犯這種低階錯誤了。
好了，這一期就講得差不多了，如果對我的程式碼有什麼建議的同學可以跟我討論一下，譬如說很多kotlin的問題我自己都沒搞得懂~對我的專案有興趣的同學可以下載我的原始碼一起學習和交流，共同進步！原始碼下載連結
最近在簡書感覺漸漸沒人看了，所以第一次在掘金髮布文章，如果大家想看我的文章，我可以把那邊的文章遷移到這邊來。
我的簡書