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、关键代码

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、效果预览

3、实现步骤

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

(其中:UIPolygonRawImageInspector 脚本是对 UIPolygonRawImage  变量显示的调整,放在 Editor 目录下即可 )

(UIPolygonRawImageInspector  可以根据需要可要可不要,不影响功能)

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

(跟使用 RawImage差不多,只是多了个边数)

3)调整边数,实现多边形 UI

4、关键代码

参考博文: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_EDITORUnityEditor.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、效果预览

3、实现步骤

1)编写脚本,实现类雷达图的功能

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

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

4、关键代码

参考博文: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;elsesize = 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/

1、功能介绍

1)可以添加图线

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

2、效果预览

3、实现步骤

1)编写脚本 PolygonImage 等,实现功能

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

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

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

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案例学习---雷达图

1、效果图

2、Unity 场景布局

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

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);}}}

最后,感谢各位博主。

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

  1. WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)

    原文:WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆) 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布,但务必保 ...

  2. Unity UGUI 的锚点Anchor与轴心点Pivot生成相对位置的UI

    UGUI是什么 UGUI 是Unity 官方推出的最新UI系统.它从 Unity 4.6 开始,被集成到 Unity 的编辑器中.相较于旧的 UI 系统,它绝对属于一个巨大的飞跃!因为只要有过旧 UI ...

  3. Selenium之定位元素常用的8种方法整理(第一篇)

    在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下 ...

  4. 【100个 Unity实用技能】☀️ | Unity中 检查当前设备网络状态 的几种方法整理

    Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 . 包括游戏开发.美术.建筑.汽车设计.影视在内的所有创作者,借助 Unity 将创意 ...

  5. 【100个 Unity实用技能】☀️ | C# 中 Sort() 对List中的数据排序的几种方法 整理总结

    Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 . 包括游戏开发.美术.建筑.汽车设计.影视在内的所有创作者,借助 Unity 将创意 ...

  6. Unity3D-高通AR-《狼来了》-5编程实现音效播放和界面UI元素的动态显示

    Unity3D-高通AR-<狼来了>-5编程实现音效播放和界面UI元素的动态显示 1. 实现音效播放和界面UI元素的动态显示 1.1 实现要求和思路 1.2 自定义默认的跟踪触发处理脚本 ...

  7. 怎么在html中去掉空白,5种方法去掉HTML中Inline-Block元素之间的空白

    5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能. 当需要在"inline&qu ...

  8. Unity中实现雷达图

    一:效果演示 二:实现思路 --描边思路:一开始觉得这很简单,就直接绘制一个比当前大一圈的雷达图就可以了,试了试发现并没有那么简单 当每个顶点的权重都相同时,也就是雷达图为正多边形时绘制出来的描边是等 ...

  9. 菱角图形输出c语言,CDR将多边形/图形的角度变圆?CDR制作圆角图形的三种方法

    在CorelDRAW中如何将多边形/图形的角度变圆.可能在以早的版本中,都没有直接实现圆角多边形的功能,直到后来较高版本中提及的圆角/扇形角/倒棱角功能的出现,才很好的解决了这个问题,其实方法也不止是 ...

最新文章

  1. Blender从头到尾创建一个低多边形场景学习教程
  2. 通过事件同步两个窗体之间的数据
  3. vue通信方法EventBus的实现
  4. 通过“四大行为”对WCF的扩展[原理篇]
  5. 【干货】女性社区应该如何抵御垃圾男
  6. gRPC快速入门记录
  7. 深度佳能MP4视频恢复软件 v8.1.0
  8. JavaScript的初步探索(JS的入坑笔录)
  9. 动态规划解决约瑟夫环问题
  10. APP兼容性测试如何测试?
  11. 字节游戏测试开发面试题
  12. 通过使用第三方开源jar包sigar.jar我们可以获得本地的信息
  13. 怎么引入oracle驱动包,Maven引入oracle驱动包
  14. 粗糙集,邻域粗糙集与实域粗糙集概述
  15. Neo4j 学习笔记 1:属性图
  16. 爬虫实战教程:采集微信公众号文章
  17. Jacoco代码覆盖率报告详解
  18. 递归算法求n个数字的全排列
  19. 静下心来好好看书,好好学习。
  20. 生成 HashCode 一致的字符串

热门文章

  1. Oracle 11g默认用户名,密码解锁
  2. mexFunction
  3. Word2Vec中文词向量
  4. 发明专利申请的常见问题
  5. 翔云平台编程实现两张图片的人脸识别
  6. 图神经网络入门 (GNN, GCN)
  7. 全球及中国水性固化剂行业研究及十四五规划分析报告
  8. 【岗位又增了】蚂蚁金服云原生团队招聘~欢迎加入我们
  9. Vue小案例——图书列表
  10. hitcon2014_stkof