UGUI雷达图《三》--- 圆形Image

fwalker · 发表于 2021-4-19 17:32

今天我们来实现一个圆形Image，如下图。

圆形Icon.png

实现步骤

因为我们是在原Image上进行修改。所以这里新建一个脚本PolygonImage继承至Image.
为啥不叫CirecleImage(圆形Image)，而是叫PolygonImage(多边形Image)呢。因为我们其实是把一个正方形分成正多边形，当边数越多，其实就越趋近圆。比如到正50边形就很圆了..
接着我们定义两个属性：半径和边数

//边数 public int lineCount = 5; //半径 public float radius = 100;

取宽和高较小的一边的一半，作为半径
这里因为Image及其基类并不是继承至UnityEngine.Object。lineCount属性无法在Inspector显示。
所以这里在update()里让lineCount等于z坐标。所以相当于也可以在Inspector里改变边数了。这里只是方便演示，实际使用可以注释掉。

protected void Update() { //取边长小的一边作为半径 radius = Mathf.Min(rectTransform.rect.width,rectTransform.rect.height)/2; //因为基类Image不继承UnityEngine.Object, //所以lineCount无法序列化,所以这里通过lineCount等于z坐标的方式。来间接实现在Inspector面板修改边数的功能 lineCount = Mathf.Max(3,(int)transform.localPosition.z); SetAllDirty(); }
4.添加顶点和三角形
这里添加顶点和三角形和之前讲的一样。唯一不同的就是加入了UV，UV的范围是0~1。所以这里我们可以用x坐标和宽度的比值，y坐标和高度的比值，再加上0.5偏移。即可算出UV
protected override void OnPopulateMesh(VertexHelper vh) { //添加顶点 AddAllVert(vh); //添加三角形 AddTriangle(vh); } private void AddAllVert(VertexHelper vh) { vh.Clear(); //计算每个角的弧度 float baseRad = (float)Math.PI * 2 / lineCount; for (int i = 0; i < lineCount; i++) { //计算当前的弧度 var rad = i * baseRad; //根据弧度换算坐标 var x = Mathf.Sin(rad) * radius; var y = Mathf.Cos(rad) * radius; Vector2 pos = new Vector2(x,y); //根据坐标计算UV var uvX = x / rectTransform.rect.width + 0.5f; var uvY = y / rectTransform.rect.height + 0.5f; var uv = new Vector2(uvX,uvY); AddVert(vh,pos,uv); } } private void AddVert(VertexHelper vh,Vector2 pos,Vector2 uv) { vh.AddVert(pos,color,uv); } private void AddTriangle(VertexHelper vh) { for (int i = 0; i < lineCount-1; i++) { vh.AddTriangle(0,i,i+1); } }
这样就OK了。回到Unity,新建一个UI空物体，挂上该脚本，给上图标。修改Z坐标，即可出现多边形Image,边数越多就越圆。如下图

多边形.gif

最后，附上完整代码

using System;namespace UnityEngine.UI{ public class PolygonImage : Image { //边数 public int lineCount = 5; //半径 public float radius = 100; protected void Update() { //取边长小的一边作为半径 radius = Mathf.Min(rectTransform.rect.width,rectTransform.rect.height)/2; //因为基类Image不继承UnityEngine.Object, //所以lineCount无法序列化,所以这里通过等于z坐标的方式。来间接实现在Inspector面板修改边数的功能 lineCount = Mathf.Max(3,(int)transform.localPosition.z); SetAllDirty(); } protected override void OnPopulateMesh(VertexHelper vh) { //添加顶点 AddAllVert(vh); //添加三角形 AddTriangle(vh); } private void AddAllVert(VertexHelper vh) { vh.Clear(); //计算每个角的弧度 float baseRad = (float)Math.PI * 2 / lineCount; for (int i = 0; i < lineCount; i++) { //计算当前的弧度 var rad = i * baseRad; //根据弧度换算坐标 var x = Mathf.Sin(rad) * radius; var y = Mathf.Cos(rad) * radius; Vector2 pos = new Vector2(x,y); //根据坐标计算UV var uvX = x / rectTransform.rect.width + 0.5f; var uvY = y / rectTransform.rect.height + 0.5f; var uv = new Vector2(uvX,uvY); AddVert(vh,pos,uv); } } private void AddVert(VertexHelper vh,Vector2 pos,Vector2 uv) { vh.AddVert(pos,color,uv); } private void AddTriangle(VertexHelper vh) { for (int i = 0; i < lineCount-1; i++) { vh.AddTriangle(0,i,i+1); } } }}
好，这次就到这里了~

		自动登录	找回密码
密码			立即注册

UGUI雷达图《三》--- 圆形Image

本帖子中包含更多资源