-
今天我们来实现一个圆形Image，如下图。（哈，这次其实不是画雷达图了，而是画圆形Icon，不过其原理和之前的雷达图是一样的，而且这里用到了前2篇没讲到的UV。所以这里列为这个系列的第三篇!）
圆形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);
}
}
}
}
好，这次就到这里了~
