- 定义
LRadarChart是一个雷达图组件,在游戏中常用于显示人物各项属性的权重,让玩家容易比较和理解。 - LRadarChart效果展示
雷达图效果 - 实现原理
unity的图形都是由一个个三角形拼起来的,unity已经提供了接口——只需你提供3个坐标和坐标绘制的顺序,就可以绘制一个三角形(需要按坐标绘制顺序的顺时针方向才能看到三角形) - 扩展练习
知道了上面的接口,各种图形的绘制都比较简单,比如下面的正方形,圆形,圆环,雷达图
不止于此,立方体也可以绘制,需要的只不过是绘制坐标从二维变为三维,比如下面的正方体,八面体,球体
untiy还提供接口可以设置三角形贴图的内容(uv),下面是一些带贴图的例子
UGUI画雷达图关键代码,重写OnPopulateMesh方法,重新输入绘制的顶点和顺序。代码对顶点颜色的处理只不过是为了展示需要,具体情况具体处理。
protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); if(_valueArray != null && _valueArray.Length != 0) { Rect rect = GetPixelAdjustedRect(); Vector3 origin = new Vector3(rect.x + rect.width * 0.5f, rect.y + rect.height * 0.5f, 100f); Color32 originColor; if(_randomColor) { originColor = new Color32((byte)Random.Range(0, 256), (byte)Random.Range(0, 256), (byte)Random.Range(0, 256), 255); } else { originColor = _color; } vh.AddVert(origin, _color, Vector2.zero); int segment = _valueArray.Length; float delta = 360 / segment; for(int i = 0; i < segment; i++) { float radian = Mathf.Deg2Rad * (90 + i * delta); float x = Mathf.Cos(radian) * _radius * _valueArray[i]; float y = Mathf.Sin(radian) * _radius * _valueArray[i]; Color32 color; if(_randomColor) { color = new Color32((byte)Random.Range(0, 256), (byte)Random.Range(0, 256), (byte)Random.Range(0, 256), 255); } else { color = _color; } vh.AddVert(origin + new Vector3(x, y), color, Vector2.zero); } for(int i = 0; i < (segment - 1); i++) { vh.AddTriangle(0, i + 2, i + 1); } vh.AddTriangle(0, 1, segment); } }
- 关于Mesh画图的详细原理,可以跳转到下面的地址
详细教程地址 - 关于上面的代码,可以查看下面的地址(Demo中的LRadarChart以及Test中的LMeshTest)
github地址
Unity版本:5.6.6
利用Unity+Slua实现游戏常用UI组件(五)LRadarChart——雷达图
猜你喜欢
转载自blog.csdn.net/lahmiley/article/details/82433179
今日推荐
周排行