devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：寸_铁 | 2024-07-25 20:43:05

赞

踩

unity ui不规则画面

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 工程学习： https://bitbucket.org/ddreaper/unity-ui-extensions

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

 

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

1、功能说明

1)添加脚本 PolygonUIMesh

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

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

 

3、效果预览

 

3、 实现步骤

1）编写好脚本 PolygonUIMesh

 

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

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

 

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

 

4、关键代码

  1. using UnityEngine;
  2. using System.Collections;
  3. using UnityEngine.UI;
  4.  
  5. public class PolygonUIMesh : Graphic
  6. {
  7.  
  8.     private void OnGUI()
  9.     {
  10.         // 实时检测更新绘制 OnPopulateMesh 中 transform.child 位置
  11.         SetAllDirty();
  12.     }
  13.  
  14.     /// <summary>
  15.     /// 根据 transform.child 位置 绘制 Mesh
  16.     /// </summary>
  17.     /// <param name="vh"></param>
  18.     protected override void OnPopulateMesh(VertexHelper vh)
  19.     {
  20.         if (transform.childCount <= 2)
  21.         {
  22.             return;
  23.         }
  24.  
  25.         Color32 color32 = color;
  26.         vh.Clear();
  27.  
  28.         // 几何图形的顶点，本例中根据子节点坐标确定顶点
  29.         foreach (Transform child in transform)
  30.         {
  31.             vh.AddVert(child.localPosition, color32, new Vector2(0f, 0f));
  32.         }
  33.  
  34.         for (int i = 0; i < (transform.childCount-2); i ++)
  35.         {
  36.             // 几何图形中的三角形
  37.             vh.AddTriangle(i+1, i + 2, 0);
  38.  
  39.         } 
  40.  
  41.     }
  42.  
  43.     /// <summary>
  44.     /// 点的辅助绘制
  45.     /// </summary>
  46.     private void OnDrawGizmos()
  47.     {
  48.         if (transform.childCount == 0)
  49.         {
  50.             return;
  51.         }
  52.  
  53.         for (int i = 0; i < transform.childCount; i++)
  54.         {
  55.             Gizmos.DrawSphere(transform.GetChild(i).position, 2.55f);
  56.             Gizmos.DrawIcon(transform.GetChild(i).position, "numbers/numbers_" + i+".PNG",false);
  57.         }
  58.         
  59.     }
  60. }

 

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

1、功能介绍

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

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

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

 

2、效果预览

 

3、实现步骤

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

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

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

 

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

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

 

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

 

4、关键代码

参考博文：https://www.xuanyusong.com/archives/4375

1）UIPolygonRawImage

  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using UnityEngine;
  4. using UnityEngine.UI;
  5.  
  6. public class UIPolygonRawImage : RawImage
  7. {
  8.     const int FILL_PERCENT = 100;
  9.     float thickness = 5;
  10.  
  11.     [SerializeField]
  12.     [Range(4, 360)]
  13.     int _segments = 36;
  14.  
  15.     public int segments
  16.     {
  17.         get { return _segments; }
  18.         set
  19.         {
  20.             if (_segments != value)
  21.             {
  22.                 _segments = value;
  23.                 SetVerticesDirty();
  24. #if UNITY_EDITOR
  25.                 UnityEditor.EditorUtility.SetDirty(transform);
  26. #endif
  27.             }
  28.         }
  29.     }
  30.  
  31.  
  32.     protected override void OnRectTransformDimensionsChange()
  33.     {
  34.         base.OnRectTransformDimensionsChange();
  35.         this.thickness = (float)Mathf.Clamp(this.thickness, 0, rectTransform.rect.width / 2);
  36.     }
  37.  
  38.     protected override void OnPopulateMesh(VertexHelper vh)
  39.     {
  40.         float outer = -rectTransform.pivot.x * rectTransform.rect.width;
  41.         float inner = -rectTransform.pivot.x * rectTransform.rect.width + this.thickness;
  42.  
  43.         vh.Clear();
  44.  
  45.         Vector2 prevX = Vector2.zero;
  46.         Vector2 prevY = Vector2.zero;
  47.         Vector2 uv0 = new Vector2(0, 0);
  48.         Vector2 uv1 = new Vector2(0, 1);
  49.         Vector2 uv2 = new Vector2(1, 1);
  50.         Vector2 uv3 = new Vector2(1, 0);
  51.         Vector2 pos0;
  52.         Vector2 pos1;
  53.         Vector2 pos2;
  54.         Vector2 pos3;
  55.  
  56.         float tw = rectTransform.rect.width;
  57.         float th = rectTransform.rect.height;
  58.  
  59.         float angleByStep = (FILL_PERCENT / 100f * (Mathf.PI * 2f)) / segments;
  60.         float currentAngle = 0f;
  61.         for (int i = 0; i < segments + 1; i++)
  62.         {
  63.  
  64.             float c = Mathf.Cos(currentAngle);
  65.             float s = Mathf.Sin(currentAngle);
  66.  
  67.             StepThroughPointsAndFill(outer, inner, ref prevX, ref prevY, out pos0, out pos1, out pos2, out pos3, c, s);
  68.  
  69.             uv0 = new Vector2(pos0.x / tw + 0.5f, pos0.y / th + 0.5f);
  70.             uv1 = new Vector2(pos1.x / tw + 0.5f, pos1.y / th + 0.5f);
  71.             uv2 = new Vector2(pos2.x / tw + 0.5f, pos2.y / th + 0.5f);
  72.             uv3 = new Vector2(pos3.x / tw + 0.5f, pos3.y / th + 0.5f);
  73.  
  74.             vh.AddUIVertexQuad(SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));
  75.  
  76.             currentAngle += angleByStep;
  77.         }
  78.     }
  79.  
  80.     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)
  81.     {
  82.         pos0 = prevX;
  83.         pos1 = new Vector2(outer * c, outer * s);
  84.  
  85.         pos2 = Vector2.zero;
  86.         pos3 = Vector2.zero;
  87.  
  88.         prevX = pos1;
  89.         prevY = pos2;
  90.     }
  91.  
  92.     protected UIVertex[] SetVbo(Vector2[] vertices, Vector2[] uvs)
  93.     {
  94.         UIVertex[] vbo = new UIVertex[4];
  95.         for (int i = 0; i < vertices.Length; i++)
  96.         {
  97.             var vert = UIVertex.simpleVert;
  98.             vert.color = color;
  99.             vert.position = vertices[i];
  100.             vert.uv0 = uvs[i];
  101.             vbo[i] = vert;
  102.         }
  103.         return vbo;
  104.     }
  105. }

 

2）UIPolygonRawImageInspector

  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using UnityEditor;
  4. using UnityEditor.UI;
  5. using UnityEngine;
  6.  
  7. [CustomEditor(typeof(UIPolygonRawImage), true)]
  8. [CanEditMultipleObjects]
  9. public class UIPolygonRawImageInspector : RawImageEditor
  10. {
  11. 	public override void OnInspectorGUI()
  12. 	{
  13. 		base.OnInspectorGUI();
  14. 		UIPolygonRawImage polygon = target as UIPolygonRawImage;
  15. 		polygon.segments = Mathf.Clamp(EditorGUILayout.IntField("UICircle多边形", polygon.segments), 4, 360);
  16.  
  17. 	}
  18. }

 

四、类雷达图的多边形 UI

1、功能说明

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

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

 

2、效果预览

 

3、实现步骤

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

 

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

 

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

 

4、关键代码

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

  1.  
  2. using UnityEngine;
  3. using UnityEngine.UI;
  4.  
  5. /// <summary>
  6. /// 雷达图
  7. /// </summary>
  8. public class RadarMapUIMesh : MaskableGraphic
  9. {
  10.     public bool fill = true;
  11.     public float thickness = 5;
  12.     [Range(3, 360)]
  13.     public int sides = 3;
  14.     [Range(0, 360)]
  15.     public float rotation = 0;
  16.     [Range(0, 1)]
  17.     public float[] VerticesDistances = new float[3];
  18.     private float size = 0;
  19.  
  20.     public void DrawPolygon(int _sides)
  21.     {
  22.         sides = _sides;
  23.         VerticesDistances = new float[_sides + 1];
  24.         for (int i = 0; i < _sides; i++) VerticesDistances[i] = 1; ;
  25.         rotation = 0;
  26.     }
  27.     public void DrawPolygon(int _sides, float[] _VerticesDistances)
  28.     {
  29.         sides = _sides;
  30.         VerticesDistances = _VerticesDistances;
  31.         rotation = 0;
  32.     }
  33.     public void DrawPolygon(int _sides, float[] _VerticesDistances, float _rotation)
  34.     {
  35.         sides = _sides;
  36.         VerticesDistances = _VerticesDistances;
  37.         rotation = _rotation;
  38.     }
  39.     void Update()
  40.     {
  41.         size = rectTransform.rect.width;
  42.         if (rectTransform.rect.width > rectTransform.rect.height)
  43.             size = rectTransform.rect.height;
  44.         else
  45.             size = rectTransform.rect.width;
  46.         thickness = (float)Mathf.Clamp(thickness, 0, size / 2);
  47.     }
  48.  
  49.     protected override void OnPopulateMesh(VertexHelper vh)
  50.     {
  51.         vh.Clear();
  52.  
  53.         Vector2 prevX = Vector2.zero;
  54.         Vector2 prevY = Vector2.zero;
  55.         Vector2 uv0 = new Vector2(0, 0);
  56.         Vector2 uv1 = new Vector2(0, 1);
  57.         Vector2 uv2 = new Vector2(1, 1);
  58.         Vector2 uv3 = new Vector2(1, 0);
  59.         Vector2 pos0;
  60.         Vector2 pos1;
  61.         Vector2 pos2;
  62.         Vector2 pos3;
  63.         float degrees = 360f / sides;
  64.         int vertices = sides + 1;
  65.         if (VerticesDistances.Length != vertices)
  66.         {
  67.             VerticesDistances = new float[vertices];
  68.             for (int i = 0; i < vertices - 1; i++) VerticesDistances[i] = 1;
  69.         }
  70.         // last vertex is also the first!
  71.         VerticesDistances[vertices - 1] = VerticesDistances[0];
  72.         for (int i = 0; i < vertices; i++)
  73.         {
  74.             float outer = -rectTransform.pivot.x * size * VerticesDistances[i];
  75.             float inner = -rectTransform.pivot.x * size * VerticesDistances[i] + thickness;
  76.             float rad = Mathf.Deg2Rad * (i * degrees + rotation);
  77.             float c = Mathf.Cos(rad);
  78.             float s = Mathf.Sin(rad);
  79.             uv0 = new Vector2(0, 1);
  80.             uv1 = new Vector2(1, 1);
  81.             uv2 = new Vector2(1, 0);
  82.             uv3 = new Vector2(0, 0);
  83.             pos0 = prevX;
  84.             pos1 = new Vector2(outer * c, outer * s);
  85.             if (fill)
  86.             {
  87.                 pos2 = Vector2.zero;
  88.                 pos3 = Vector2.zero;
  89.             }
  90.             else
  91.             {
  92.                 pos2 = new Vector2(inner * c, inner * s);
  93.                 pos3 = prevY;
  94.             }
  95.             prevX = pos1;
  96.             prevY = pos2;
  97.             SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 });
  98.             vh.AddUIVertexQuad(vbo);
  99.         }
  100.     }
  101.     private UIVertex[] vbo = new UIVertex[4];
  102.     private void SetVbo(Vector2[] vertices, Vector2[] uvs)
  103.     {
  104.         for (int i = 0; i < vertices.Length; i++)
  105.         {
  106.             var vert = UIVertex.simpleVert;
  107.             vert.color = color;
  108.             vert.position = vertices[i];
  109.             vert.uv0 = uvs[i];
  110.             vbo[i] = vert;
  111.         }
  112.     }
  113. }

 

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

参考博文：http://www.lsngo.net/2017/10/26/unity_polygonalui/

1、功能介绍

1）可以添加图线

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

 

2、效果预览

 

3、实现步骤

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

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

 

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

 

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

 

 

4、关键代码

1）PolygonImage

  1. using UnityEngine;
  2. using UnityEngine.UI;
  3. using System.Collections.Generic;
  4.  
  5. public class PolygonImage : MaskableGraphic, ISerializationCallbackReceiver, ICanvasRaycastFilter
  6. {
  7.     [SerializeField]
  8.     Texture m_Texture;
  9.  
  10.     public PolygonImageEdge edgeWeights;
  11.  
  12.     public override Texture mainTexture
  13.     {
  14.         get
  15.         {
  16.             if (m_Texture == null)
  17.             {
  18.                 if (material != null && material.mainTexture != null)
  19.                 {
  20.                     return material.mainTexture;
  21.                 }
  22.                 return s_WhiteTexture;
  23.             }
  24.  
  25.             return m_Texture;
  26.         }
  27.     }
  28.  
  29.     /// <summary>
  30.     /// Texture to be used.
  31.     /// </summary>
  32.     public Texture texture
  33.     {
  34.         get
  35.         {
  36.             return m_Texture;
  37.         }
  38.         set
  39.         {
  40.             if (m_Texture == value)
  41.                 return;
  42.  
  43.             m_Texture = value;
  44.             SetVerticesDirty();
  45.             SetMaterialDirty();
  46.         }
  47.     }
  48.  
  49.     public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
  50.     {
  51.         if (raycastTarget)
  52.         {
  53.             Vector2 local;
  54.             RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, sp, eventCamera, out local);
  55.  
  56.             int edgeCount = edgeWeights.EdgeCount;
  57.  
  58.             float deltaAngle = 360f/edgeCount;
  59.  
  60.             for (int i = 0; i < edgeCount; i++)
  61.             {
  62.                 bool result = IsInPolygon(i, deltaAngle, local);
  63.                 if (result)
  64.                     return true;
  65.             }
  66.         }
  67.         return false;
  68.     }
  69.  
  70.     public virtual void OnAfterDeserialize()
  71.     {
  72.        
  73.     }
  74.  
  75.     public virtual void OnBeforeSerialize()
  76.     {
  77.      
  78.     }
  79.  
  80.     protected override void OnPopulateMesh(VertexHelper vh)
  81.     {
  82.         if (edgeWeights == null || edgeWeights.EdgeCount <= 2)
  83.         {
  84.             base.OnPopulateMesh(vh);
  85.             return;
  86.         }
  87.         int edgeCount = edgeWeights.EdgeCount;
  88.  
  89.         float deltaAngle = 360f/edgeCount;
  90.  
  91.         vh.Clear();
  92.         
  93.         for (int i = 0; i < edgeCount; i++)
  94.         {
  95.             GetTriangle(vh, i, deltaAngle);
  96.         }
  97.     }
  98.  
  99.     private void GetTriangle(VertexHelper vh, int index, float deltaAngle)
  100.     {
  101.         float edgeLength = Mathf.Min(rectTransform.rect.width, rectTransform.rect.height)*0.5f;
  102.         var color32 = color;
  103.         Vector3 cent = new Vector3(0, 0);
  104.         float angle1 = 90+(index + 1)*deltaAngle;
  105.         float angle2 = 90+(index)*deltaAngle;
  106.         float radius1 = (index == edgeWeights.EdgeCount - 1 ? edgeWeights.Weights[0] : edgeWeights.Weights[index + 1])* edgeLength;
  107.         float radius2 = edgeWeights.Weights[index]*edgeLength;
  108.  
  109.         Vector3 p1 = new Vector3(radius1*Mathf.Cos(angle1*Mathf.Deg2Rad), radius1*Mathf.Sin(angle1*Mathf.Deg2Rad));
  110.         Vector3 p2 = new Vector3(radius2 * Mathf.Cos(angle2 * Mathf.Deg2Rad), radius2 * Mathf.Sin(angle2 * Mathf.Deg2Rad));
  111.  
  112.         vh.AddVert(cent, color32, Vector2.zero);
  113.         vh.AddVert(p1, color32, new Vector2(0,1));
  114.         vh.AddVert(p2, color32, new Vector2(1,0));
  115.  
  116.         vh.AddTriangle(index*3, index*3 + 1, index*3 + 2);
  117.     }
  118.  
  119.     private bool IsInPolygon(int index, float deltaAngle, Vector2 point)
  120.     {
  121.         float edgeLength = Mathf.Min(rectTransform.rect.width, rectTransform.rect.height)*0.5f;
  122.         Vector2 cent = new Vector2(0, 0);
  123.         float angle1 = 90+(index + 1) * deltaAngle;
  124.         float angle2 = 90+(index) * deltaAngle;
  125.         float radius1 = (index == edgeWeights.EdgeCount - 1 ? edgeWeights.Weights[0] : edgeWeights.Weights[index + 1])*edgeLength;
  126.         float radius2 = edgeWeights.Weights[index]*edgeLength;
  127.  
  128.         Vector2 p1 = new Vector2(radius1 * Mathf.Cos(angle1 * Mathf.Deg2Rad), radius1 * Mathf.Sin(angle1 * Mathf.Deg2Rad));
  129.         Vector2 p2 = new Vector2(radius2 * Mathf.Cos(angle2 * Mathf.Deg2Rad), radius2 * Mathf.Sin(angle2 * Mathf.Deg2Rad));
  130.  
  131.         return IsInTriangle(cent, p1, p2, point);
  132.     }
  133.  
  134.     private bool IsInTriangle(Vector2 vertex1, Vector2 vertex2, Vector2 vertex3, Vector2 point)
  135.     {
  136.         Vector2 v0 =vertex3 - vertex1;
  137.         Vector2 v1 = vertex2 - vertex1;
  138.         Vector2 v2 = point - vertex1;
  139.  
  140.         float dot00 = Vector2.Dot(v0, v0);
  141.         float dot01 = Vector2.Dot(v0, v1);
  142.         float dot02 = Vector2.Dot(v0, v2);
  143.         float dot11 = Vector2.Dot(v1, v1);
  144.         float dot12 = Vector2.Dot(v1, v2);
  145.  
  146.         float inverDeno = 1 / (dot00 * dot11 - dot01 * dot01);
  147.  
  148.         float u = (dot11 * dot02 - dot01 * dot12) * inverDeno;
  149.         if (u < 0 || u > 1) 
  150.         {
  151.             return false;
  152.         }
  153.  
  154.         float v = (dot00 * dot12 - dot01 * dot02) * inverDeno;
  155.         if (v < 0 || v > 1) 
  156.         {
  157.             return false;
  158.         }
  159.  
  160.         return u + v <= 1;
  161.     }
  162. }

 

2）PolygonImageEdge

  1. using UnityEngine;
  2. using System.Collections;
  3. using System.Collections.Generic;
  4.  
  5. [System.Serializable]
  6. public class PolygonImageEdge
  7. {
  8.     public int EdgeCount
  9.     {
  10.         get
  11.         {
  12.             if (m_Weights == null)
  13.                 return 0;
  14.             return m_Weights.Count;
  15.         }
  16.     }
  17.  
  18.     public List<float> Weights
  19.     {
  20.         get { return m_Weights; }
  21.     }
  22.  
  23.     [SerializeField] private List<float> m_Weights;
  24.  
  25. }

 

3）PolygonImageEditor

  1. using UnityEngine;
  2. using UnityEditor.UI;
  3. using UnityEditor;
  4. using UnityEditor.UI;
  5. using System.Collections;
  6.  
  7. [CustomEditor(typeof(PolygonImage))]
  8. [CanEditMultipleObjects]
  9. public class PolygonImageEditor : GraphicEditor
  10. {
  11.  
  12.     private SerializedProperty m_Texture;
  13.     private SerializedProperty m_EdgeWeights;
  14.  
  15.     protected override void OnEnable()
  16.     {
  17.         base.OnEnable();
  18.         m_Texture = serializedObject.FindProperty("m_Texture");
  19.         m_EdgeWeights = serializedObject.FindProperty("edgeWeights");
  20.     }
  21.  
  22.     protected override void OnDisable()
  23.     {
  24.         
  25.     }
  26.  
  27.     public override void OnInspectorGUI()
  28.     {
  29.         serializedObject.Update();
  30.  
  31.         EditorGUILayout.PropertyField(m_Texture);
  32.         EditorGUILayout.PropertyField(m_Color);
  33.         EditorGUILayout.PropertyField(m_Material);
  34.         EditorGUILayout.PropertyField(m_RaycastTarget);
  35.         EditorGUILayout.PropertyField(m_EdgeWeights);
  36.  
  37.         serializedObject.ApplyModifiedProperties();
  38.     }
  39. }

 

4）PolygonImageEdgeDrawer

  1. using UnityEngine;
  2. using UnityEditor;
  3. using System.Collections;
  4. using UnityEditorInternal;
  5.  
  6. [CustomPropertyDrawer(typeof(PolygonImageEdge))]
  7. public class PolygonImageEdgeDrawer : PropertyDrawer
  8. {
  9.     private ReorderableList m_ReorderableList;
  10.  
  11.     private void Init(SerializedProperty property)
  12.     {
  13.         if (m_ReorderableList == null)
  14.         {
  15.             m_ReorderableList = new ReorderableList(property.serializedObject,
  16.                 property.FindPropertyRelative("m_Weights"));
  17.             m_ReorderableList.drawElementCallback = DrawEdgeWeight;
  18.             m_ReorderableList.drawHeaderCallback = DrawHeader;
  19.         }
  20.     }
  21.  
  22.     public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
  23.     {
  24.         Init(property);
  25.         var val = EditorGUI.indentLevel;
  26.         EditorGUI.indentLevel = 0;
  27.         m_ReorderableList.DoList(position);
  28.         EditorGUI.indentLevel = val;
  29.     }
  30.  
  31.     public override float GetPropertyHeight(SerializedProperty property, GUIContent label)
  32.     {
  33.         Init(property);
  34.  
  35.         return m_ReorderableList.GetHeight();
  36.     }
  37.  
  38.     private void DrawEdgeWeight(Rect rect, int index, bool isActive, bool isFocused)
  39.     {
  40.         SerializedProperty itemData = m_ReorderableList.serializedProperty.GetArrayElementAtIndex(index);
  41.         EditorGUI.Slider(rect, itemData, 0, 1);
  42.     }
  43.  
  44.     private void DrawHeader(Rect rect)
  45.     {
  46.         EditorGUI.LabelField(rect, "边权重");
  47.     }
  48. }

 

六、雷达图 UGUI 案例

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

1、效果图

 

2、Unity 场景布局

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

 

3、关键代码

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

1）Boke_RadarChart（黄色区域雷达图类）

  1. public class Boke_RadarChart : Image
  2. 	
  3. {
  4. 	
  5.     //顶点个数、顶点位置、顶点大小、顶点显示图片、顶点颜色
  6. 	
  7.     [SerializeField]
  8. 	
  9.     private int _pointCount;
  10. 	
  11.     [SerializeField]
  12. 	
  13.     private List<RectTransform> _points;
  14. 	
  15.     [SerializeField]
  16. 	
  17.     private Vector2 _pointSize = new Vector2(10, 10);
  18. 	
  19.     [SerializeField]
  20. 	
  21.     private Sprite _pointSprite;
  22. 	
  23.     [SerializeField]
  24. 	
  25.     private Color _pointColor = Color.white;
  26. 	
  27.  
  28. 	
  29.     //每个方向上各个点的的比例、存储handler
  30. 	
  31.     [SerializeField]
  32. 	
  33.     private float[] _handlerRadio;
  34. 	
  35.     [SerializeField]
  36. 	
  37.     private List<S5RadarChartHandler> _handlers;
  38. 	
  39.  
  40. 	
  41.     private void Update()
  42. 	
  43.     {
  44. 	
  45.         //刷新
  46. 	
  47.         SetVerticesDirty();
  48. 	
  49.     }
  50. 	
  51.  
  52. 	
  53.     protected override void OnPopulateMesh(VertexHelper vh)
  54. 	
  55.     {
  56. 	
  57.         //修改原来的空image，让他填满我们的雷达图。
  58. 	
  59.         //清空原来顶点，自己添加
  60. 	
  61.         vh.Clear();
  62. 	
  63.         AddVerts(vh);
  64. 	
  65.         //AddVertsTemplete(vh);
  66. 	
  67.         AddTriangle(vh);
  68. 	
  69.     }
  70. 	
  71.  
  72. 	
  73.     /// <summary>
  74. 	
  75.     /// 添加顶点
  76. 	
  77.     /// </summary>
  78. 	
  79.     private void AddVerts(VertexHelper vh)
  80. 	
  81.     {
  82. 	
  83.         //添加轴心点
  84. 	
  85.         vh.AddVert(Vector3.zero, color, Vector2.zero);
  86. 	
  87.         foreach (S5RadarChartHandler handler in _handlers)
  88. 	
  89.         {
  90. 	
  91.             vh.AddVert(handler.transform.localPosition, color, Vector2.zero);
  92. 	
  93.         }
  94. 	
  95.     }
  96. 	
  97.  
  98. 	
  99.     /*
  100. 	
  101.     /// <summary>
  102. 	
  103.     /// 如果需要用贴图。就要每个顶点单独设置uv坐标
  104. 	
  105.     /// </summary>
  106. 	
  107.     private void AddVertsTemplete(VertexHelper vh)
  108. 	
  109.     {
  110. 	
  111.         vh.AddVert(_handlers[0].transform.localPosition, color, new Vector2(0.5f, 1));
  112. 	
  113.         vh.AddVert(_handlers[1].transform.localPosition, color, new Vector2(0f, 1));
  114. 	
  115.         vh.AddVert(_handlers[2].transform.localPosition, color, new Vector2(0f, 0));
  116. 	
  117.         vh.AddVert(_handlers[3].transform.localPosition, color, new Vector2(1f, 0));
  118. 	
  119.         vh.AddVert(_handlers[4].transform.localPosition, color, new Vector2(1f, 1));
  120. 	
  121.     }
  122. 	
  123.     */
  124. 	
  125.  
  126. 	
  127.     /// <summary>
  128. 	
  129.     /// 添加三角形
  130. 	
  131.     /// </summary>
  132. 	
  133.     private void AddTriangle(VertexHelper vh)
  134. 	
  135.     {
  136. 	
  137.         //围绕中心点生成5个面
  138. 	
  139.         for (int i = 1; i < _pointCount; i++)
  140. 	
  141.         {
  142. 	
  143.             //用三个顶点组成一个三角面
  144. 	
  145.             //顺时针
  146. 	
  147.             vh.AddTriangle(0, i + 1, i);
  148. 	
  149.         }
  150. 	
  151.         vh.AddTriangle(0, _pointCount, 1);
  152. 	
  153.     }
  154. 	
  155.  
  156. 	
  157.     public void InitPoint()
  158. 	
  159.     {
  160. 	
  161.         ClearPoints();
  162. 	
  163.         _points = new List<RectTransform>();
  164. 	
  165.         SpawnPoint();
  166. 	
  167.         SetPointPos();
  168. 	
  169.     }
  170. 	
  171.  
  172. 	
  173.     private void ClearPoints()
  174. 	
  175.     {
  176. 	
  177.         if (_points == null)
  178. 	
  179.             return;
  180. 	
  181.  
  182. 	
  183.         foreach (RectTransform point in _points)
  184. 	
  185.         {
  186. 	
  187.             if (point != null)
  188. 	
  189.                 //编辑模式下要用这个
  190. 	
  191.                 DestroyImmediate(point);
  192. 	
  193.         }
  194. 	
  195.     }
  196. 	
  197.  
  198. 	
  199.     private void SpawnPoint()
  200. 	
  201.     {
  202. 	
  203.         //5个最边角的顶点
  204. 	
  205.         for (int i = 0; i < _pointCount; i++)
  206. 	
  207.         {
  208. 	
  209.             GameObject point = new GameObject("Point" + i);
  210. 	
  211.             point.transform.SetParent(transform);
  212. 	
  213.             _points.Add(point.AddComponent<RectTransform>());
  214. 	
  215.         }
  216. 	
  217.     }
  218. 	
  219.  
  220. 	
  221.     private void SetPointPos()
  222. 	
  223.     {
  224. 	
  225.         //每个角的弧度
  226. 	
  227.         float radian = 2 * Mathf.PI / _pointCount;
  228. 	
  229.         //半径
  230. 	
  231.         float radius = 100;
  232. 	
  233.  
  234. 	
  235.         //从最上面一个顶点开始算。以中心为原点。
  236. 	
  237.         float curRadian = 2 * Mathf.PI / 4.0f;
  238. 	
  239.         for (int i = 0; i < _pointCount; i++)
  240. 	
  241.         {
  242. 	
  243.             float x = Mathf.Cos(curRadian) * radius;
  244. 	
  245.             float y = Mathf.Sin(curRadian) * radius;
  246. 	
  247.             curRadian += radian;
  248. 	
  249.             _points[i].anchoredPosition = new Vector2(x, y);
  250. 	
  251.         }
  252. 	
  253.     }
  254. 	
  255.  
  256. 	
  257.     public void InitHandlers()
  258. 	
  259.     {
  260. 	
  261.         ClearHandlers();
  262. 	
  263.         _handlers = new List<S5RadarChartHandler>();
  264. 	
  265.         SpawnHandlers();
  266. 	
  267.         SetHandlerPos();
  268. 	
  269.     }
  270. 	
  271.  
  272. 	
  273.     private void ClearHandlers()
  274. 	
  275.     {
  276. 	
  277.         if (_handlers == null)
  278. 	
  279.             return;
  280. 	
  281.  
  282. 	
  283.         foreach (S5RadarChartHandler handler in _handlers)
  284. 	
  285.         {
  286. 	
  287.             if (handler != null)
  288. 	
  289.                 DestroyImmediate(handler.gameObject);
  290. 	
  291.         }
  292. 	
  293.     }
  294. 	
  295.  
  296. 	
  297.     private void SpawnHandlers()
  298. 	
  299.     {
  300. 	
  301.         S5RadarChartHandler handler = null;
  302. 	
  303.         for (int i = 0; i < _pointCount; i++)
  304. 	
  305.         {
  306. 	
  307.             GameObject point = new GameObject("Handler" + i);
  308. 	
  309.             point.AddComponent<RectTransform>();
  310. 	
  311.             point.AddComponent<Image>();
  312. 	
  313.  
  314. 	
  315.             handler = point.AddComponent<S5RadarChartHandler>();
  316. 	
  317.             handler.SetParent(transform);
  318. 	
  319.             handler.ChangeSprite(_pointSprite);
  320. 	
  321.             handler.ChangeColor(_pointColor);
  322. 	
  323.             handler.SetSize(_pointSize);
  324. 	
  325.             handler.SetScale(Vector3.one);
  326. 	
  327.             _handlers.Add(handler);
  328. 	
  329.         }
  330. 	
  331.     }
  332. 	
  333.  
  334. 	
  335.     private void SetHandlerPos()
  336. 	
  337.     {
  338. 	
  339.         //默认的handler位置，就是5项属性全满。
  340. 	
  341.         if (_handlerRadio == null || _handlerRadio.Length != _pointCount)
  342. 	
  343.         {
  344. 	
  345.             for (int i = 0; i < _pointCount; i++)
  346. 	
  347.             {
  348. 	
  349.                 _handlers[i].SetPos(_points[i].anchoredPosition);
  350. 	
  351.             }
  352. 	
  353.         }
  354. 	
  355.         else
  356. 	
  357.         {
  358. 	
  359.             for (int i = 0; i < _pointCount; i++)
  360. 	
  361.             {
  362. 	
  363.                 _handlers[i].SetPos(_points[i].anchoredPosition * _handlerRadio[i]);
  364. 	
  365.             }
  366. 	
  367.         }
  368. 	
  369.     }
  370. 	
  371. }

 

2）Boke_RadarChartHandler（红色顶点类）

  1. public class Boke_RadarChartHandler : MonoBehaviour
  2. 	
  3. {
  4. 	
  5.     private Image _image;
  6. 	
  7.     private Image Image
  8. 	
  9.     {
  10. 	
  11.         get
  12. 	
  13.         {
  14. 	
  15.             if (_image == null)
  16. 	
  17.                 _image = GetComponent<Image>();
  18. 	
  19.  
  20. 	
  21.             return _image;
  22. 	
  23.         }
  24. 	
  25.     }
  26. 	
  27.  
  28. 	
  29.     private RectTransform _rect;
  30. 	
  31.     private RectTransform Rect
  32. 	
  33.     {
  34. 	
  35.         get
  36. 	
  37.         {
  38. 	
  39.             if (_rect == null)
  40. 	
  41.                 _rect = GetComponent<RectTransform>();
  42. 	
  43.  
  44. 	
  45.             return _rect;
  46. 	
  47.         }
  48. 	
  49.     }
  50. 	
  51.  
  52. 	
  53.     #region 封装一层
  54. 	
  55.     public void SetParent(Transform parent)
  56. 	
  57.     {
  58. 	
  59.         transform.SetParent(parent);
  60. 	
  61.     }
  62. 	
  63.     public void ChangeSprite(Sprite sprite)
  64. 	
  65.     {
  66. 	
  67.         Image.sprite = sprite;
  68. 	
  69.     }
  70. 	
  71.     public void ChangeColor(Color color)
  72. 	
  73.     {
  74. 	
  75.         Image.color = color;
  76. 	
  77.     }
  78. 	
  79.     public void SetPos(Vector2 pos)
  80. 	
  81.     {
  82. 	
  83.         Rect.anchoredPosition = pos;
  84. 	
  85.     }
  86. 	
  87.     public void SetSize(Vector2 size)
  88. 	
  89.     {
  90. 	
  91.         Rect.sizeDelta = size;
  92. 	
  93.     }
  94. 	
  95.     public void SetScale(Vector3 scale)
  96. 	
  97.     {
  98. 	
  99.         Rect.localScale = scale;
  100. 	
  101.     }
  102. 	
  103.     private float GetScale()
  104. 	
  105.     {
  106. 	
  107.         return Rect.lossyScale.x;
  108. 	
  109.     }
  110. 	
  111.     #endregion
  112. 	
  113. }

 

3）Boke_RadarChartEditor

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

  1. using System.Collections;
  2. 	
  3. using System.Collections.Generic;
  4. 	
  5. using UnityEngine;
  6. 	
  7. using UnityEditor;
  8. 	
  9.  
  10. 	
  11. [CustomEditor(typeof(Boke_RadarChart), true)]
  12. 	
  13. [CanEditMultipleObjects]
  14. 	
  15. public class Boke_RadarChartEditor : UnityEditor.UI.ImageEditor
  16. 	
  17. {
  18. 	
  19.     SerializedProperty _pointCount;
  20. 	
  21.     SerializedProperty _pointSprite;
  22. 	
  23.     SerializedProperty _pointColor;
  24. 	
  25.     SerializedProperty _pointSize;
  26. 	
  27.     SerializedProperty _handlerRadio;
  28. 	
  29.  
  30. 	
  31.     protected override void OnEnable()
  32. 	
  33.     {
  34. 	
  35.         base.OnEnable();
  36. 	
  37.         _pointCount = serializedObject.FindProperty("_pointCount");
  38. 	
  39.         _pointSprite = serializedObject.FindProperty("_pointSprite");
  40. 	
  41.         _pointColor = serializedObject.FindProperty("_pointColor");
  42. 	
  43.         _pointSize = serializedObject.FindProperty("_pointSize");
  44. 	
  45.         _handlerRadio = serializedObject.FindProperty("_handlerRadio");
  46. 	
  47.     }
  48. 	
  49.  
  50. 	
  51.     public override void OnInspectorGUI()
  52. 	
  53.     {
  54. 	
  55.         base.OnInspectorGUI();
  56. 	
  57.  
  58. 	
  59.         serializedObject.Update();
  60. 	
  61.         
  62. 	
  63.         EditorGUILayout.PropertyField(_pointCount);
  64. 	
  65.         EditorGUILayout.PropertyField(_pointSprite);
  66. 	
  67.         EditorGUILayout.PropertyField(_pointColor);
  68. 	
  69.         EditorGUILayout.PropertyField(_pointSize);
  70. 	
  71.         EditorGUILayout.PropertyField(_handlerRadio,true);
  72. 	
  73.  
  74. 	
  75.         Boke_RadarChart radar = target as Boke_RadarChart;
  76. 	
  77.         if (radar != null)
  78. 	
  79.         {
  80. 	
  81.             if (GUILayout.Button("生成雷达图顶点"))
  82. 	
  83.             {
  84. 	
  85.                 radar.InitPoint();
  86. 	
  87.             }
  88. 	
  89.  
  90. 	
  91.             if (GUILayout.Button("生成内部可操作顶点"))
  92. 	
  93.             {
  94. 	
  95.                 radar.InitHandlers();
  96. 	
  97.             }
  98. 	
  99.         }
  100. 	
  101.         serializedObject.ApplyModifiedProperties();
  102. 	
  103.         if (GUI.changed)
  104. 	
  105.         {
  106. 	
  107.             EditorUtility.SetDirty(target);
  108. 	
  109.         }
  110. 	
  111.  
  112. 	
  113.     }
  114. 	
  115. }

 

最后，感谢各位博主。

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/881900
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号