Unity UGUI 效果之 UI 元素多边形UI （例如雷达图,圆形,不规则多边形 UI等）显示的简单实现的几种方法整理

桃扇骨 2022-12-26 04:49 92阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

# Unity UGUI 效果 之 UI 元素 多边形UI （例如雷达图,圆形,不规则多边形 UI等）显示 的简单实现的几种方法整理 #

**目录**

Unity UGUI 效果 之 UI 元素 多边形UI （例如雷达图,圆形,不规则多边形 UI等）显示 的简单实现的几种方法整理

一、简单介绍

二、可以自由调整形状的多边形 UI

1、功能说明

3、效果预览

3、 实现步骤

4、关键代码

三、调整对应边数，实现任意正多边形，甚至圆形 UI

1、功能介绍

2、效果预览

3、实现步骤

4、关键代码

四、类雷达图的多边形 UI

1、功能说明

2、效果预览

3、实现步骤

4、关键代码

五、类雷达图多边形UI（二）

1、功能介绍

2、效果预览

3、实现步骤

4、关键代码

六、雷达图 UGUI 案例

1、效果图

2、Unity 场景布局

3、关键代码

--------------------

## 一、简单介绍 ##

UGUI，是Unity自带的 GUI 系统，有别于 NGUI；使用 UGUI 也能制作出比较酷炫的效果 。

本节介绍，在 UGUI中 普通的 UI 元素中实现简单的多边形显示的若干方法的整理总结。

UGUI 的 UI 扩展，可参见 [unity-ui-extensions ][unity-ui-extensions]工程学习： [https://bitbucket.org/ddreaper/unity-ui-extensions][unity-ui-extensions]

接下来将逐一说明几种多边形UI的方法。

## 二、可以自由调整形状的多边形 UI ##

### 1、功能说明 ###

1)添加脚本 PolygonUIMesh

2）在该脚本的组建下，添加子物体，作为 Polygon 多边形的点

3）任意移动子物体，Polygon 多边形都会穗子变化

### 3、效果预览 ###

![20201203150010526.gif][]

### 3、 实现步骤 ###

1）编写好脚本 PolygonUIMesh

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

2）挂在 PolygonUIMesh 脚本到 Canvas 下的物体上

（注意：PolygonUIMesh 相当于 Button 的 Image，所以可以在其组建上添加 Button，实现按钮功能等）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

3）在挂载 PolygonUIMesh 脚本组件下，添加子物体，会自动作为多变形的点，移动他们既可以跳帧多边形形状了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

### 4、关键代码 ###

using UnityEngine;
    using System.Collections;
    using UnityEngine.UI;
    
    public class PolygonUIMesh : Graphic
    {
    
        private void OnGUI()
        {
            // 实时检测更新绘制 OnPopulateMesh 中 transform.child 位置
            SetAllDirty();
        }
    
        /// <summary>
        /// 根据 transform.child 位置 绘制 Mesh
        /// </summary>
        /// <param name="vh"></param>
        protected override void OnPopulateMesh(VertexHelper vh)
        {
            if (transform.childCount <= 2)
            {
                return;
            }
    
            Color32 color32 = color;
            vh.Clear();
    
            // 几何图形的顶点，本例中根据子节点坐标确定顶点
            foreach (Transform child in transform)
            {
                vh.AddVert(child.localPosition, color32, new Vector2(0f, 0f));
            }
    
            for (int i = 0; i < (transform.childCount-2); i ++)
            {
                // 几何图形中的三角形
                vh.AddTriangle(i+1, i + 2, 0);
    
            } 
    
        }
    
        /// <summary>
        /// 点的辅助绘制
        /// </summary>
        private void OnDrawGizmos()
        {
            if (transform.childCount == 0)
            {
                return;
            }
    
            for (int i = 0; i < transform.childCount; i++)
            {
                Gizmos.DrawSphere(transform.GetChild(i).position, 2.55f);
                Gizmos.DrawIcon(transform.GetChild(i).position, "numbers/numbers_" + i+".PNG",false);
            }
            
        }
    }

## 三、调整对应边数，实现任意正多边形，甚至圆形 UI ##

### 1、功能介绍 ###

1）这里是继承 RawImage，调整其多边形的绘制

2）改变边数，实现 UI 多边形

3）调整 UI 元素宽高，效果会有不一样（局限性）

### 2、效果预览 ###

![20201203153220592.gif][]

### 3、实现步骤 ###

1）编写脚本 UIPolygonRawImage ，继承 RawImage ，重写其方法，实现多边形UI

（其中：UIPolygonRawImageInspector 脚本是对 UIPolygonRawImage  变量显示的调整，放在 Editor 目录下即可 ）

（UIPolygonRawImageInspector  可以根据需要可要可不要，不影响功能）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

2）在 Canvas 下添加组件，并挂载脚本 UIPolygonRawImage ，对应添加图片

（跟使用 RawImage差不多，只是多了个边数）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

3）调整边数，实现多边形 UI

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

### 4、关键代码 ###

参考博文：[https://www.xuanyusong.com/archives/4375][https_www.xuanyusong.com_archives_4375]

1）UIPolygonRawImage

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    public class UIPolygonRawImage : RawImage
    {
        const int FILL_PERCENT = 100;
        float thickness = 5;
    
        [SerializeField]
        [Range(4, 360)]
        int _segments = 36;
    
        public int segments
        {
            get { return _segments; }
            set
            {
                if (_segments != value)
                {
                    _segments = value;
                    SetVerticesDirty();
    #if UNITY_EDITOR
                    UnityEditor.EditorUtility.SetDirty(transform);
    #endif
                }
            }
        }
    
    
        protected override void OnRectTransformDimensionsChange()
        {
            base.OnRectTransformDimensionsChange();
            this.thickness = (float)Mathf.Clamp(this.thickness, 0, rectTransform.rect.width / 2);
        }
    
        protected override void OnPopulateMesh(VertexHelper vh)
        {
            float outer = -rectTransform.pivot.x * rectTransform.rect.width;
            float inner = -rectTransform.pivot.x * rectTransform.rect.width + this.thickness;
    
            vh.Clear();
    
            Vector2 prevX = Vector2.zero;
            Vector2 prevY = Vector2.zero;
            Vector2 uv0 = new Vector2(0, 0);
            Vector2 uv1 = new Vector2(0, 1);
            Vector2 uv2 = new Vector2(1, 1);
            Vector2 uv3 = new Vector2(1, 0);
            Vector2 pos0;
            Vector2 pos1;
            Vector2 pos2;
            Vector2 pos3;
    
            float tw = rectTransform.rect.width;
            float th = rectTransform.rect.height;
    
            float angleByStep = (FILL_PERCENT / 100f * (Mathf.PI * 2f)) / segments;
            float currentAngle = 0f;
            for (int i = 0; i < segments + 1; i++)
            {
    
                float c = Mathf.Cos(currentAngle);
                float s = Mathf.Sin(currentAngle);
    
                StepThroughPointsAndFill(outer, inner, ref prevX, ref prevY, out pos0, out pos1, out pos2, out pos3, c, s);
    
                uv0 = new Vector2(pos0.x / tw + 0.5f, pos0.y / th + 0.5f);
                uv1 = new Vector2(pos1.x / tw + 0.5f, pos1.y / th + 0.5f);
                uv2 = new Vector2(pos2.x / tw + 0.5f, pos2.y / th + 0.5f);
                uv3 = new Vector2(pos3.x / tw + 0.5f, pos3.y / th + 0.5f);
    
                vh.AddUIVertexQuad(SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));
    
                currentAngle += angleByStep;
            }
        }
    
        private void StepThroughPointsAndFill(float outer, float inner, ref Vector2 prevX, ref Vector2 prevY, out Vector2 pos0, out Vector2 pos1, out Vector2 pos2, out Vector2 pos3, float c, float s)
        {
            pos0 = prevX;
            pos1 = new Vector2(outer * c, outer * s);
    
            pos2 = Vector2.zero;
            pos3 = Vector2.zero;
    
            prevX = pos1;
            prevY = pos2;
        }
    
        protected UIVertex[] SetVbo(Vector2[] vertices, Vector2[] uvs)
        {
            UIVertex[] vbo = new UIVertex[4];
            for (int i = 0; i < vertices.Length; i++)
            {
                var vert = UIVertex.simpleVert;
                vert.color = color;
                vert.position = vertices[i];
                vert.uv0 = uvs[i];
                vbo[i] = vert;
            }
            return vbo;
        }
    }

2）UIPolygonRawImageInspector

using System.Collections;
    using System.Collections.Generic;
    using UnityEditor;
    using UnityEditor.UI;
    using UnityEngine;
    
    [CustomEditor(typeof(UIPolygonRawImage), true)]
    [CanEditMultipleObjects]
    public class UIPolygonRawImageInspector : RawImageEditor
    {
    	public override void OnInspectorGUI()
    	{
    		base.OnInspectorGUI();
    		UIPolygonRawImage polygon = target as UIPolygonRawImage;
    		polygon.segments = Mathf.Clamp(EditorGUILayout.IntField("UICircle多边形", polygon.segments), 4, 360);
    
    	}
    }

## 四、类雷达图的多边形 UI ##

### 1、功能说明 ###

1）查看UGUI的代码可以得知，绘制ui图的方法其实是绘制mesh，然后对其进行填充。正常一个Image图片，绘制有四个顶点。为了实现多边形，继承于MaskableGraphic，重写OnPopulateMesh，重新绘制顶点。

2）能调整边数，点的比例，是否填充，旋转等，控制显示雷达图的样式

### 2、效果预览 ###

![20201203160313204.gif][]

### 3、实现步骤 ###

1）编写脚本，实现类雷达图的功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

2）把脚本挂载到Canvas 的组建下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8][]

3）调整脚本参数，即可根据需要调整成自己想要的样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9][]

### 4、关键代码 ###

参考博文：[https://blog.csdn.net/u013012420/article/details/105956884][https_blog.csdn.net_u013012420_article_details_105956884]

using UnityEngine;
    using UnityEngine.UI;
    
    /// <summary>
    /// 雷达图
    /// </summary>
    public class RadarMapUIMesh : MaskableGraphic
    {
        public bool fill = true;
        public float thickness = 5;
        [Range(3, 360)]
        public int sides = 3;
        [Range(0, 360)]
        public float rotation = 0;
        [Range(0, 1)]
        public float[] VerticesDistances = new float[3];
        private float size = 0;
    
        public void DrawPolygon(int _sides)
        {
            sides = _sides;
            VerticesDistances = new float[_sides + 1];
            for (int i = 0; i < _sides; i++) VerticesDistances[i] = 1; ;
            rotation = 0;
        }
        public void DrawPolygon(int _sides, float[] _VerticesDistances)
        {
            sides = _sides;
            VerticesDistances = _VerticesDistances;
            rotation = 0;
        }
        public void DrawPolygon(int _sides, float[] _VerticesDistances, float _rotation)
        {
            sides = _sides;
            VerticesDistances = _VerticesDistances;
            rotation = _rotation;
        }
        void Update()
        {
            size = rectTransform.rect.width;
            if (rectTransform.rect.width > rectTransform.rect.height)
                size = rectTransform.rect.height;
            else
                size = rectTransform.rect.width;
            thickness = (float)Mathf.Clamp(thickness, 0, size / 2);
        }
    
        protected override void OnPopulateMesh(VertexHelper vh)
        {
            vh.Clear();
    
            Vector2 prevX = Vector2.zero;
            Vector2 prevY = Vector2.zero;
            Vector2 uv0 = new Vector2(0, 0);
            Vector2 uv1 = new Vector2(0, 1);
            Vector2 uv2 = new Vector2(1, 1);
            Vector2 uv3 = new Vector2(1, 0);
            Vector2 pos0;
            Vector2 pos1;
            Vector2 pos2;
            Vector2 pos3;
            float degrees = 360f / sides;
            int vertices = sides + 1;
            if (VerticesDistances.Length != vertices)
            {
                VerticesDistances = new float[vertices];
                for (int i = 0; i < vertices - 1; i++) VerticesDistances[i] = 1;
            }
            // last vertex is also the first!
            VerticesDistances[vertices - 1] = VerticesDistances[0];
            for (int i = 0; i < vertices; i++)
            {
                float outer = -rectTransform.pivot.x * size * VerticesDistances[i];
                float inner = -rectTransform.pivot.x * size * VerticesDistances[i] + thickness;
                float rad = Mathf.Deg2Rad * (i * degrees + rotation);
                float c = Mathf.Cos(rad);
                float s = Mathf.Sin(rad);
                uv0 = new Vector2(0, 1);
                uv1 = new Vector2(1, 1);
                uv2 = new Vector2(1, 0);
                uv3 = new Vector2(0, 0);
                pos0 = prevX;
                pos1 = new Vector2(outer * c, outer * s);
                if (fill)
                {
                    pos2 = Vector2.zero;
                    pos3 = Vector2.zero;
                }
                else
                {
                    pos2 = new Vector2(inner * c, inner * s);
                    pos3 = prevY;
                }
                prevX = pos1;
                prevY = pos2;
                SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 });
                vh.AddUIVertexQuad(vbo);
            }
        }
        private UIVertex[] vbo = new UIVertex[4];
        private void SetVbo(Vector2[] vertices, Vector2[] uvs)
        {
            for (int i = 0; i < vertices.Length; i++)
            {
                var vert = UIVertex.simpleVert;
                vert.color = color;
                vert.position = vertices[i];
                vert.uv0 = uvs[i];
                vbo[i] = vert;
            }
        }
    }

## 五、类雷达图多边形UI（二） ##

参考博文：[http://www.lsngo.net/2017/10/26/unity\_polygonalui/][http_www.lsngo.net_2017_10_26_unity_polygonalui]

### 1、功能介绍 ###

1）可以添加图线

2）可以调整边数，和点的比例，改变样式

### 2、效果预览 ###

![20201203163536342.gif][]

### 3、实现步骤 ###

1）编写脚本 PolygonImage 等，实现功能

(注意有些脚本最好放在Editor 文件夹下)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10][]

2）把脚本 挂载到 Canvas 下的组件上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11][]

3）根据需要调整效果如上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13][]

### 4、关键代码 ###

1）PolygonImage

using UnityEngine;
    using UnityEngine.UI;
    using System.Collections.Generic;
    
    public class PolygonImage : MaskableGraphic, ISerializationCallbackReceiver, ICanvasRaycastFilter
    {
        [SerializeField]
        Texture m_Texture;
    
        public PolygonImageEdge edgeWeights;
    
        public override Texture mainTexture
        {
            get
            {
                if (m_Texture == null)
                {
                    if (material != null && material.mainTexture != null)
                    {
                        return material.mainTexture;
                    }
                    return s_WhiteTexture;
                }
    
                return m_Texture;
            }
        }
    
        /// <summary>
        /// Texture to be used.
        /// </summary>
        public Texture texture
        {
            get
            {
                return m_Texture;
            }
            set
            {
                if (m_Texture == value)
                    return;
    
                m_Texture = value;
                SetVerticesDirty();
                SetMaterialDirty();
            }
        }
    
        public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
        {
            if (raycastTarget)
            {
                Vector2 local;
                RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, sp, eventCamera, out local);
    
                int edgeCount = edgeWeights.EdgeCount;
    
                float deltaAngle = 360f/edgeCount;
    
                for (int i = 0; i < edgeCount; i++)
                {
                    bool result = IsInPolygon(i, deltaAngle, local);
                    if (result)
                        return true;
                }
            }
            return false;
        }
    
        public virtual void OnAfterDeserialize()
        {
           
        }
    
        public virtual void OnBeforeSerialize()
        {
         
        }
    
        protected override void OnPopulateMesh(VertexHelper vh)
        {
            if (edgeWeights == null || edgeWeights.EdgeCount <= 2)
            {
                base.OnPopulateMesh(vh);
                return;
            }
            int edgeCount = edgeWeights.EdgeCount;
    
            float deltaAngle = 360f/edgeCount;
    
            vh.Clear();
            
            for (int i = 0; i < edgeCount; i++)
            {
                GetTriangle(vh, i, deltaAngle);
            }
        }
    
        private void GetTriangle(VertexHelper vh, int index, float deltaAngle)
        {
            float edgeLength = Mathf.Min(rectTransform.rect.width, rectTransform.rect.height)*0.5f;
            var color32 = color;
            Vector3 cent = new Vector3(0, 0);
            float angle1 = 90+(index + 1)*deltaAngle;
            float angle2 = 90+(index)*deltaAngle;
            float radius1 = (index == edgeWeights.EdgeCount - 1 ? edgeWeights.Weights[0] : edgeWeights.Weights[index + 1])* edgeLength;
            float radius2 = edgeWeights.Weights[index]*edgeLength;
    
            Vector3 p1 = new Vector3(radius1*Mathf.Cos(angle1*Mathf.Deg2Rad), radius1*Mathf.Sin(angle1*Mathf.Deg2Rad));
            Vector3 p2 = new Vector3(radius2 * Mathf.Cos(angle2 * Mathf.Deg2Rad), radius2 * Mathf.Sin(angle2 * Mathf.Deg2Rad));
    
            vh.AddVert(cent, color32, Vector2.zero);
            vh.AddVert(p1, color32, new Vector2(0,1));
            vh.AddVert(p2, color32, new Vector2(1,0));
    
            vh.AddTriangle(index*3, index*3 + 1, index*3 + 2);
        }
    
        private bool IsInPolygon(int index, float deltaAngle, Vector2 point)
        {
            float edgeLength = Mathf.Min(rectTransform.rect.width, rectTransform.rect.height)*0.5f;
            Vector2 cent = new Vector2(0, 0);
            float angle1 = 90+(index + 1) * deltaAngle;
            float angle2 = 90+(index) * deltaAngle;
            float radius1 = (index == edgeWeights.EdgeCount - 1 ? edgeWeights.Weights[0] : edgeWeights.Weights[index + 1])*edgeLength;
            float radius2 = edgeWeights.Weights[index]*edgeLength;
    
            Vector2 p1 = new Vector2(radius1 * Mathf.Cos(angle1 * Mathf.Deg2Rad), radius1 * Mathf.Sin(angle1 * Mathf.Deg2Rad));
            Vector2 p2 = new Vector2(radius2 * Mathf.Cos(angle2 * Mathf.Deg2Rad), radius2 * Mathf.Sin(angle2 * Mathf.Deg2Rad));
    
            return IsInTriangle(cent, p1, p2, point);
        }
    
        private bool IsInTriangle(Vector2 vertex1, Vector2 vertex2, Vector2 vertex3, Vector2 point)
        {
            Vector2 v0 =vertex3 - vertex1;
            Vector2 v1 = vertex2 - vertex1;
            Vector2 v2 = point - vertex1;
    
            float dot00 = Vector2.Dot(v0, v0);
            float dot01 = Vector2.Dot(v0, v1);
            float dot02 = Vector2.Dot(v0, v2);
            float dot11 = Vector2.Dot(v1, v1);
            float dot12 = Vector2.Dot(v1, v2);
    
            float inverDeno = 1 / (dot00 * dot11 - dot01 * dot01);
    
            float u = (dot11 * dot02 - dot01 * dot12) * inverDeno;
            if (u < 0 || u > 1) 
            {
                return false;
            }
    
            float v = (dot00 * dot12 - dot01 * dot02) * inverDeno;
            if (v < 0 || v > 1) 
            {
                return false;
            }
    
            return u + v <= 1;
        }
    }

2）PolygonImageEdge

using UnityEngine;
    using System.Collections;
    using System.Collections.Generic;
    
    [System.Serializable]
    public class PolygonImageEdge
    {
        public int EdgeCount
        {
            get
            {
                if (m_Weights == null)
                    return 0;
                return m_Weights.Count;
            }
        }
    
        public List<float> Weights
        {
            get { return m_Weights; }
        }
    
        [SerializeField] private List<float> m_Weights;
    
    }

3）PolygonImageEditor

using UnityEngine;
    using UnityEditor.UI;
    using UnityEditor;
    using UnityEditor.UI;
    using System.Collections;
    
    [CustomEditor(typeof(PolygonImage))]
    [CanEditMultipleObjects]
    public class PolygonImageEditor : GraphicEditor
    {
    
        private SerializedProperty m_Texture;
        private SerializedProperty m_EdgeWeights;
    
        protected override void OnEnable()
        {
            base.OnEnable();
            m_Texture = serializedObject.FindProperty("m_Texture");
            m_EdgeWeights = serializedObject.FindProperty("edgeWeights");
        }
    
        protected override void OnDisable()
        {
            
        }
    
        public override void OnInspectorGUI()
        {
            serializedObject.Update();
    
            EditorGUILayout.PropertyField(m_Texture);
            EditorGUILayout.PropertyField(m_Color);
            EditorGUILayout.PropertyField(m_Material);
            EditorGUILayout.PropertyField(m_RaycastTarget);
            EditorGUILayout.PropertyField(m_EdgeWeights);
    
            serializedObject.ApplyModifiedProperties();
        }
    }

4）PolygonImageEdgeDrawer

using UnityEngine;
    using UnityEditor;
    using System.Collections;
    using UnityEditorInternal;
    
    [CustomPropertyDrawer(typeof(PolygonImageEdge))]
    public class PolygonImageEdgeDrawer : PropertyDrawer
    {
        private ReorderableList m_ReorderableList;
    
        private void Init(SerializedProperty property)
        {
            if (m_ReorderableList == null)
            {
                m_ReorderableList = new ReorderableList(property.serializedObject,
                    property.FindPropertyRelative("m_Weights"));
                m_ReorderableList.drawElementCallback = DrawEdgeWeight;
                m_ReorderableList.drawHeaderCallback = DrawHeader;
            }
        }
    
        public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
        {
            Init(property);
            var val = EditorGUI.indentLevel;
            EditorGUI.indentLevel = 0;
            m_ReorderableList.DoList(position);
            EditorGUI.indentLevel = val;
        }
    
        public override float GetPropertyHeight(SerializedProperty property, GUIContent label)
        {
            Init(property);
    
            return m_ReorderableList.GetHeight();
        }
    
        private void DrawEdgeWeight(Rect rect, int index, bool isActive, bool isFocused)
        {
            SerializedProperty itemData = m_ReorderableList.serializedProperty.GetArrayElementAtIndex(index);
            EditorGUI.Slider(rect, itemData, 0, 1);
        }
    
        private void DrawHeader(Rect rect)
        {
            EditorGUI.LabelField(rect, "边权重");
        }
    }

## 六、雷达图 UGUI 案例 ##

参考博文：[Unity---UGUI案例学习---雷达图][Unity---UGUI_---]

### 1、效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14][]

### 2、Unity 场景布局 ###

（这里的方法是通过改变黄色区域UI元素的外围顶点位置，来实现出我们需要的渲染效果。）

![20201203165621250.png][]

### 3、关键代码 ###

（Point是蓝色区域最外的顶点，只需执行一次获得其具体位置就行。Handler是红色的顶点，每次更新时都要同步更新）

1）Boke\_RadarChart（黄色区域雷达图类）

public class Boke_RadarChart : Image
    	
    {
    	
        //顶点个数、顶点位置、顶点大小、顶点显示图片、顶点颜色
    	
        [SerializeField]
    	
        private int _pointCount;
    	
        [SerializeField]
    	
        private List<RectTransform> _points;
    	
        [SerializeField]
    	
        private Vector2 _pointSize = new Vector2(10, 10);
    	
        [SerializeField]
    	
        private Sprite _pointSprite;
    	
        [SerializeField]
    	
        private Color _pointColor = Color.white;
    	
     
    	
        //每个方向上各个点的的比例、存储handler
    	
        [SerializeField]
    	
        private float[] _handlerRadio;
    	
        [SerializeField]
    	
        private List<S5RadarChartHandler> _handlers;
    	
     
    	
        private void Update()
    	
        {
    	
            //刷新
    	
            SetVerticesDirty();
    	
        }
    	
     
    	
        protected override void OnPopulateMesh(VertexHelper vh)
    	
        {
    	
            //修改原来的空image，让他填满我们的雷达图。
    	
            //清空原来顶点，自己添加
    	
            vh.Clear();
    	
            AddVerts(vh);
    	
            //AddVertsTemplete(vh);
    	
            AddTriangle(vh);
    	
        }
    	
     
    	
        /// <summary>
    	
        /// 添加顶点
    	
        /// </summary>
    	
        private void AddVerts(VertexHelper vh)
    	
        {
    	
            //添加轴心点
    	
            vh.AddVert(Vector3.zero, color, Vector2.zero);
    	
            foreach (S5RadarChartHandler handler in _handlers)
    	
            {
    	
                vh.AddVert(handler.transform.localPosition, color, Vector2.zero);
    	
            }
    	
        }
    	
     
    	
        /*
    	
        /// <summary>
    	
        /// 如果需要用贴图。就要每个顶点单独设置uv坐标
    	
        /// </summary>
    	
        private void AddVertsTemplete(VertexHelper vh)
    	
        {
    	
            vh.AddVert(_handlers[0].transform.localPosition, color, new Vector2(0.5f, 1));
    	
            vh.AddVert(_handlers[1].transform.localPosition, color, new Vector2(0f, 1));
    	
            vh.AddVert(_handlers[2].transform.localPosition, color, new Vector2(0f, 0));
    	
            vh.AddVert(_handlers[3].transform.localPosition, color, new Vector2(1f, 0));
    	
            vh.AddVert(_handlers[4].transform.localPosition, color, new Vector2(1f, 1));
    	
        }
    	
        */
    	
     
    	
        /// <summary>
    	
        /// 添加三角形
    	
        /// </summary>
    	
        private void AddTriangle(VertexHelper vh)
    	
        {
    	
            //围绕中心点生成5个面
    	
            for (int i = 1; i < _pointCount; i++)
    	
            {
    	
                //用三个顶点组成一个三角面
    	
                //顺时针
    	
                vh.AddTriangle(0, i + 1, i);
    	
            }
    	
            vh.AddTriangle(0, _pointCount, 1);
    	
        }
    	
     
    	
        public void InitPoint()
    	
        {
    	
            ClearPoints();
    	
            _points = new List<RectTransform>();
    	
            SpawnPoint();
    	
            SetPointPos();
    	
        }
    	
     
    	
        private void ClearPoints()
    	
        {
    	
            if (_points == null)
    	
                return;
    	
     
    	
            foreach (RectTransform point in _points)
    	
            {
    	
                if (point != null)
    	
                    //编辑模式下要用这个
    	
                    DestroyImmediate(point);
    	
            }
    	
        }
    	
     
    	
        private void SpawnPoint()
    	
        {
    	
            //5个最边角的顶点
    	
            for (int i = 0; i < _pointCount; i++)
    	
            {
    	
                GameObject point = new GameObject("Point" + i);
    	
                point.transform.SetParent(transform);
    	
                _points.Add(point.AddComponent<RectTransform>());
    	
            }
    	
        }
    	
     
    	
        private void SetPointPos()
    	
        {
    	
            //每个角的弧度
    	
            float radian = 2 * Mathf.PI / _pointCount;
    	
            //半径
    	
            float radius = 100;
    	
     
    	
            //从最上面一个顶点开始算。以中心为原点。
    	
            float curRadian = 2 * Mathf.PI / 4.0f;
    	
            for (int i = 0; i < _pointCount; i++)
    	
            {
    	
                float x = Mathf.Cos(curRadian) * radius;
    	
                float y = Mathf.Sin(curRadian) * radius;
    	
                curRadian += radian;
    	
                _points[i].anchoredPosition = new Vector2(x, y);
    	
            }
    	
        }
    	
     
    	
        public void InitHandlers()
    	
        {
    	
            ClearHandlers();
    	
            _handlers = new List<S5RadarChartHandler>();
    	
            SpawnHandlers();
    	
            SetHandlerPos();
    	
        }
    	
     
    	
        private void ClearHandlers()
    	
        {
    	
            if (_handlers == null)
    	
                return;
    	
     
    	
            foreach (S5RadarChartHandler handler in _handlers)
    	
            {
    	
                if (handler != null)
    	
                    DestroyImmediate(handler.gameObject);
    	
            }
    	
        }
    	
     
    	
        private void SpawnHandlers()
    	
        {
    	
            S5RadarChartHandler handler = null;
    	
            for (int i = 0; i < _pointCount; i++)
    	
            {
    	
                GameObject point = new GameObject("Handler" + i);
    	
                point.AddComponent<RectTransform>();
    	
                point.AddComponent<Image>();
    	
     
    	
                handler = point.AddComponent<S5RadarChartHandler>();
    	
                handler.SetParent(transform);
    	
                handler.ChangeSprite(_pointSprite);
    	
                handler.ChangeColor(_pointColor);
    	
                handler.SetSize(_pointSize);
    	
                handler.SetScale(Vector3.one);
    	
                _handlers.Add(handler);
    	
            }
    	
        }
    	
     
    	
        private void SetHandlerPos()
    	
        {
    	
            //默认的handler位置，就是5项属性全满。
    	
            if (_handlerRadio == null || _handlerRadio.Length != _pointCount)
    	
            {
    	
                for (int i = 0; i < _pointCount; i++)
    	
                {
    	
                    _handlers[i].SetPos(_points[i].anchoredPosition);
    	
                }
    	
            }
    	
            else
    	
            {
    	
                for (int i = 0; i < _pointCount; i++)
    	
                {
    	
                    _handlers[i].SetPos(_points[i].anchoredPosition * _handlerRadio[i]);
    	
                }
    	
            }
    	
        }
    	
    }

2）Boke\_RadarChartHandler（红色顶点类）

public class Boke_RadarChartHandler : MonoBehaviour
    	
    {
    	
        private Image _image;
    	
        private Image Image
    	
        {
    	
            get
    	
            {
    	
                if (_image == null)
    	
                    _image = GetComponent<Image>();
    	
     
    	
                return _image;
    	
            }
    	
        }
    	
     
    	
        private RectTransform _rect;
    	
        private RectTransform Rect
    	
        {
    	
            get
    	
            {
    	
                if (_rect == null)
    	
                    _rect = GetComponent<RectTransform>();
    	
     
    	
                return _rect;
    	
            }
    	
        }
    	
     
    	
        #region 封装一层
    	
        public void SetParent(Transform parent)
    	
        {
    	
            transform.SetParent(parent);
    	
        }
    	
        public void ChangeSprite(Sprite sprite)
    	
        {
    	
            Image.sprite = sprite;
    	
        }
    	
        public void ChangeColor(Color color)
    	
        {
    	
            Image.color = color;
    	
        }
    	
        public void SetPos(Vector2 pos)
    	
        {
    	
            Rect.anchoredPosition = pos;
    	
        }
    	
        public void SetSize(Vector2 size)
    	
        {
    	
            Rect.sizeDelta = size;
    	
        }
    	
        public void SetScale(Vector3 scale)
    	
        {
    	
            Rect.localScale = scale;
    	
        }
    	
        private float GetScale()
    	
        {
    	
            return Rect.lossyScale.x;
    	
        }
    	
        #endregion
    	
    }

3）Boke\_RadarChartEditor

（编辑器类，用于把Boke\_RadarChart类中的可变属性显示到面板中，方便我们更改调试。）

using System.Collections;
    	
    using System.Collections.Generic;
    	
    using UnityEngine;
    	
    using UnityEditor;
    	
     
    	
    [CustomEditor(typeof(Boke_RadarChart), true)]
    	
    [CanEditMultipleObjects]
    	
    public class Boke_RadarChartEditor : UnityEditor.UI.ImageEditor
    	
    {
    	
        SerializedProperty _pointCount;
    	
        SerializedProperty _pointSprite;
    	
        SerializedProperty _pointColor;
    	
        SerializedProperty _pointSize;
    	
        SerializedProperty _handlerRadio;
    	
     
    	
        protected override void OnEnable()
    	
        {
    	
            base.OnEnable();
    	
            _pointCount = serializedObject.FindProperty("_pointCount");
    	
            _pointSprite = serializedObject.FindProperty("_pointSprite");
    	
            _pointColor = serializedObject.FindProperty("_pointColor");
    	
            _pointSize = serializedObject.FindProperty("_pointSize");
    	
            _handlerRadio = serializedObject.FindProperty("_handlerRadio");
    	
        }
    	
     
    	
        public override void OnInspectorGUI()
    	
        {
    	
            base.OnInspectorGUI();
    	
     
    	
            serializedObject.Update();
    	
            
    	
            EditorGUILayout.PropertyField(_pointCount);
    	
            EditorGUILayout.PropertyField(_pointSprite);
    	
            EditorGUILayout.PropertyField(_pointColor);
    	
            EditorGUILayout.PropertyField(_pointSize);
    	
            EditorGUILayout.PropertyField(_handlerRadio,true);
    	
     
    	
            Boke_RadarChart radar = target as Boke_RadarChart;
    	
            if (radar != null)
    	
            {
    	
                if (GUILayout.Button("生成雷达图顶点"))
    	
                {
    	
                    radar.InitPoint();
    	
                }
    	
     
    	
                if (GUILayout.Button("生成内部可操作顶点"))
    	
                {
    	
                    radar.InitHandlers();
    	
                }
    	
            }
    	
            serializedObject.ApplyModifiedProperties();
    	
            if (GUI.changed)
    	
            {
    	
                EditorUtility.SetDirty(target);
    	
            }
    	
     
    	
        }
    	
    }

**最后，感谢各位博主。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 15][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221120/193c60af7af844039f7cf221a3182535.png
[unity-ui-extensions]: https://bitbucket.org/ddreaper/unity-ui-extensions
[20201203150010526.gif]: /images/20221120/adc9b3008ac5474f864548ee380d1179.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221120/0d999c55926c4227916d1b2572bc33a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221120/3121e8ea36e3443ca543e702e0efb30b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221120/47c2c0f04f394c118ec800f7b1bd71e4.png
[20201203153220592.gif]: /images/20221120/c454392302f44dd6b966e52db0992ff3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221120/2bac7443c9b24354a1cf4230853cabc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221120/ea00d7c2351e42599992627c01ae4638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221120/d524909ebdfd43eabf8c11ef437bb2b2.png
[https_www.xuanyusong.com_archives_4375]: https://www.xuanyusong.com/archives/4375
[20201203160313204.gif]: /images/20221120/b73d407e49a043c38d91f2210ee0396d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20221120/06a4d3db8d34411388983fc7a9a2f7cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8]: /images/20221120/699b6663fbc944899bc849fcd8bd5f86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9]: /images/20221120/f1b19405651b49a187673df9435772ad.png
[https_blog.csdn.net_u013012420_article_details_105956884]: https://blog.csdn.net/u013012420/article/details/105956884
[http_www.lsngo.net_2017_10_26_unity_polygonalui]: http://www.lsngo.net/2017/10/26/unity_polygonalui/
[20201203163536342.gif]: /images/20221120/515688393d604a7f8e57ae17a7d30955.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10]: /images/20221120/79345e80fe0a4635a2acd28b4d9dd77d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11]: /images/20221120/898b1c2a7891470db7f862eb3b575fb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12]: /images/20221120/e5f65cc222fd44b986ff82b3f1449c68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13]: /images/20221120/769a4d6ba75e46419b160f2712becb3d.png
[Unity---UGUI_---]: https://www.cnblogs.com/Fflyqaq/p/12713312.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14]: /images/20221120/8d93110577ab46dca7fab606cdb6d9dd.png
[20201203165621250.png]: /images/20221120/97dbf83094044ed49a63a20aeba46442.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 15]: /images/20221120/df34b7044ed34dab8c4dcc7832214ae0.png