雷達圖是游戲中常見的圖表表現之一，比如用來呈現英雄的屬性等等，本文將在 Unity 中實現一個帶均勻描邊、可響應點擊的雷達圖。

Unity 的原生 UI 系統 UGUI 提供了名為 Graphic 的基類用于實現各自 UI組件的。該類中有名為 OnPopulateMesh 的方法，只要向參數 VertexHelper 傳遞正確的頂點數組與下標數組，即可構造出我們期望的網格。

網格的構建

雷達圖可視為一個正多邊形，每個頂點沿徑向縮放得到。因此，我們只需要遍歷每個角度，并根據當前角度的權重計算出相應的頂點。最后，我們可以構造下標數組來獲得所需的網格。構造頂點代碼如下

這樣對于邊數為 N 的雷達圖，我們會得到包括中心點在內的 N 1 個頂點，然后是構造下標數組，代碼如下。

這只是一個簡單的方法，結合兩個相鄰的頂點與中心點形成一個三角形。注意，第一個頂點在這里被重用。

Unity 的 UI 組件，響應點擊需要實現接口 ICanvasRaycastFilter 的 IsRaycastLocationValid 方法。如果命中多邊形，也就是點擊坐標落在多邊形內，則返回 true ，否則返回 false。首先需要將方法參數里的屏幕坐標轉換到ui的局部坐標。

然后我們檢測坐標是否落在多邊形中。對于我們單擊的坐標，我們檢測到一條指向多邊形外部頂點的光線從它發出。對于多邊形的每一條邊，我們檢測它是否相交。最后，我們計算相交邊的數量。如果是奇數，則表示該點落在多邊形中，否則落在多邊形外。有關詳細信息，請參閱以下問題。

如何判斷一個點是在一個有自交線的封閉圖的內部還是外部？

代碼如下

做完這些就實現了一個可響應點擊的雷達圖了。

描邊

一開始覺得這就不算個問題，搞兩個權重一樣但是半徑不一樣的雷達圖不就能實現了嘛。試了試發現，問題沒有這么簡單。

因為權重不均勻，所以會導致描邊也不均勻，為了實現均勻的描邊，還需要額外的工作。

解決辦法是額外進行邊的繪制。對于多邊形的每一個頂點 C ，我們按逆時針方向找出它的上一個 A 與下一個頂點 B ，并且得到它相鄰的兩條邊的向外的垂線，把 A 與 B 沿著垂線向外延伸得到 E 與 F，把 E 與 F 沿著邊的方向延伸，相交于點 P，對每個頂點重復上述步驟，就能得到外框的所有點了。

頂點構造代碼

下標數組構造

獲得交點

獲得垂線

最后看效果

結論：

   網上 Unity 實現 雷達圖的代碼能找到不少，但是我發現基本都止步于網格的構造，并沒有將點擊響應的計算以及均勻描邊的實現，有的更過分，甚至連 uv 都不肯算，沒辦法只能自己擼一個，把一些中學幾何的東西又撿起來過了一遍，總的來說，這個過程還是有所收獲的。

轉載聲明：本文來源于網絡，不作任何商業用途。