利用Unity+Slua實作遊戲常用UI元件（五）LRadarChart——雷達圖

1. 定義

   LRadarChart是一個雷達圖元件，在遊戲中常用于顯示人物各項屬性的權重，讓玩家容易比較和了解。

2. LRadarChart效果展示

   

   雷達圖效果

3. 實作原理

   unity的圖形都是由一個個三角形拼起來的，unity已經提供了接口——隻需你提供3個坐标和坐标繪制的順序，就可以繪制一個三角形（需要按坐标繪制順序的順時針方向才能看到三角形）

4. 擴充練習

   知道了上面的接口，各種圖形的繪制都比較簡單，比如下面的正方形，圓形，圓環，雷達圖

   

   

   

   

   不止于此，立方體也可以繪制，需要的隻不過是繪制坐标從二維變為三維，比如下面的正方體，八面體，球體

   

   

   

5. untiy還提供接口可以設定三角形貼圖的内容（uv），下面是一些帶貼圖的例子

   

   

6. UGUI畫雷達圖關鍵代碼，重寫OnPopulateMesh方法，重新輸入繪制的頂點和順序。代碼對頂點顔色的處理隻不過是為了展示需要，具體情況具體處理。

   protected override void OnPopulateMesh(VertexHelper vh)
   {
       vh.Clear();
       if(_valueArray != null && _valueArray.Length != )
       {
           Rect rect = GetPixelAdjustedRect();
           Vector3 origin = new Vector3(rect.x + rect.width * f, rect.y + rect.height * f, f);
           Color32 originColor;
           if(_randomColor)
           {
               originColor = new Color32((byte)Random.Range(, ), (byte)Random.Range(, ), (byte)Random.Range(, ), );
           }
           else
           {
               originColor = _color;
           }
           vh.AddVert(origin, _color, Vector2.zero);
           int segment = _valueArray.Length;
           float delta =  / segment;
           for(int i = ; i < segment; i++)
           {
               float radian = Mathf.Deg2Rad * ( + i * delta);
               float x = Mathf.Cos(radian) * _radius * _valueArray[i];
               float y = Mathf.Sin(radian) * _radius * _valueArray[i];
               Color32 color;
               if(_randomColor)
               {
                   color = new Color32((byte)Random.Range(, ), (byte)Random.Range(, ), (byte)Random.Range(, ), );
               }
               else
               {
                   color = _color;
               }
               vh.AddVert(origin + new Vector3(x, y), color, Vector2.zero);
           }
   
           for(int i = ; i < (segment - ); i++)
           {
               vh.AddTriangle(, i + , i + );
           }
           vh.AddTriangle(, , segment);
       }
   }
              

7. 關于Mesh畫圖的詳細原理，可以跳轉到下面的位址

   詳細教程位址

8. 關于上面的代碼，可以檢視下面的位址（Demo中的LRadarChart以及Test中的LMeshTest）

   github位址

   Unity版本：5.6.6