一、根据数值变化制作圆环
- 首先需要多张圆环作为单个数据颜色，并把Image的属性设置为按数值转换为角度铺满，再把实际数据所占百分比与Image中的FillAmout同步
每一个圆环都根据数值变化改变后
- 虽然每一个圆环都已经根据数值展示对应的大小，还需要把这些扇环组装为一个完整的圆环，就需要给他们添加上一个旋转
旋转角度 == -1 * 自身扇环起点所对应的角度 == -1 * 前方所有扇环的角度和（因为是反的）
具体代码:
/// <summary>
/// 更新圆环图内的图标位置
/// </summary>
/// <param name="n1">数据一</param>
/// <param name="n2">数据二</param>
/// <param name="n3">数据三</param>
/// <param name="n4">数据四</param>
public void UpdatePercent(float n1,float n2,float n3,float n4)
{
//偏移角度（确定开始位置） 原本是逆时针 后面换回顺时针
var offsetRoation = 180;
float sum = n1 + n2 + n3 + n4;
float p1 = n1 / sum;
float p2 = n2 / sum;!
float p3 = n3 / sum;
float p4 = n4 / sum;
a.fillAmount = p1;
a.transform.localEulerAngles = new Vector3(0, 0, offsetRoation);
b.fillAmount = p2;
var angleB = offsetRoation - (360 * p1); //直接加offsetRoation就可以做一个偏移
b.transform.localEulerAngles = new Vector3(0, 0, angleB);
c.fillAmount = p3;
var angleC = offsetRoation - (360 * (p1 + p2));
c.transform.localEulerAngles = new Vector3(0, 0, angleC);
d.fillAmount = p4;
var angleD = offsetRoation - (360 * (p1 + p2 + p3));
d.transform.localEulerAngles = new Vector3(0, 0, angleD);
t1.text = string.Format("{0:f2}%", p1 * 100);
t2.text = string.Format("{0:f2}%", p2 * 100);
t3.text = string.Format("{0:f2}%", p3 * 100);
t4.text = string.Format("{0:f2}%", p4 * 100);
}
二、为圆环图中的扇环添加圆角
-
制作圆角（也可以使用已经做好的图片），在这里用做出半个圆形（如果扇环图片不是渐变可以直接用圆，我这里因为是颜色渐变所以还需要动态获取这个圆角的颜色）
-
定位圆角位置*（因为圆角是在自身扇环尾端 所以对应角度就是自身扇环所占比重*360）
圆点坐标：(x,y) 半径：r 角度：θ
则圆上任一点为：（a,b）
a = x + r * cos(θ)
b = y + r * sin(θ)
//定位圆环的尾部
Fillet1.position = CalculateCoordinates(p1 * 360, radius, a.transform.position);
Fillet2.position = CalculateCoordinates(360 * (p1 + p2), radius, b.transform.position);
Fillet3.position = CalculateCoordinates(360 * (p1 + p2 + p3), radius, c.transform.position);
Fillet4.position = CalculateCoordinates(360, radius, d.transform.position);
/// <summary>
/// 计算圆角位置
/// </summary>
/// <param name="angle">当前角度</param>
/// <param name="radius">圆环半径</param>
/// <param name="initialPos">当前坐标（偏移量）</param>
/// <returns>返回相对于当前坐标的坐标</returns>
private Vector3 CalculateCoordinates(float angle, float radius , Vector3 initialPos)
{
//圆上的每一个点的坐标为 (sin x,cos x) x为所在点的角度
//Mathf.Sin 的参数不是角度 是弧度 所以需要转一下
Vector3 pos = new Vector3(Mathf.Sin(angle* Mathf.Deg2Rad), Mathf.Cos(angle* Mathf.Deg2Rad),0) * radius + initialPos;
//Debug.Log(pos);
return pos;
}
- 确定圆角的旋转角度（由于我做的圆角是上半截，它的上方永远垂直于半径），自身角度 == 垂直于自身扇环的结尾角度 == 垂直于下一个扇环的开始
//确定圆环的旋转
Fillet1.localEulerAngles = new Vector3(0, 0, angleB + 90);
Fillet2.localEulerAngles = new Vector3(0, 0, angleC+90);
Fillet3.localEulerAngles = new Vector3(0, 0, angleD+90);
Fillet4.localEulerAngles = new Vector3(0, 0, 270); //因为是接到开头去
文章来源：https://www.toymoban.com/news/detail-728126.html
- 确定圆角颜色（扇环不渐变就不需要），由于我这里扇环是一个渐变颜色的，所以数值越大色差越大需要动态取色。
由于图片就相当于使用了一维数组存储了 分辨率个数据点，可以把图片看作一个大小为分辨率的二维数组，算出半径然后通过圆的轨迹方程算出角度对应每个点的坐标，再转换成一维数组的坐标就可以提取出目标坐标的颜色。
filletImage1.color = GetRingColor(a.sprite.texture, 348, p1 * -360);
filletImage2.color = GetRingColor(b.sprite.texture, 348, p2 * -360);
filletImage3.color = GetRingColor(c.sprite.texture, 348, p3 * -360);
filletImage4.color = GetRingColor(d.sprite.texture, 348, p4 * -360);
/// <summary>
/// 根据图片获取圆环对应位置的颜色
/// </summary>
/// <param name="texture">目标图片</param>
/// <param name="picSize">目标图片的尺寸</param>
/// <param name="colorAngle">对应的角度</param>
/// <returns>返回对应角度</returns>
private Color GetRingColor(Texture2D texture, int picSize,float colorAngle)
{
Color[] textureCol = texture.GetPixels();
int offset = picSize / 2;
int radius_Color = picSize / 2 - 20;
int x = offset + (int)(radius_Color * Mathf.Sin(colorAngle * Mathf.Deg2Rad));
int y = offset + (int)(radius_Color * Mathf.Cos(colorAngle * Mathf.Deg2Rad)) - 1;
return textureCol[x + y * picSize];
}
全部代码：文章来源地址https://www.toymoban.com/news/detail-728126.html
using UnityEngine;
using UnityEngine.UI;
public class ThreePercent : MonoBehaviour
{
[Range(0,100)]
public float no1;
[Range(0,100)]
public float no2, no3, no4;
public Image a, b, c, d;
public Text t1, t2, t3, t4;
[Header("圆角")]
public RectTransform Fillet1, Fillet2, Fillet3, Fillet4;
private Image filletImage1, filletImage2, filletImage3, filletImage4;
//圆角半径
private float radius = 50.1f;
private void Start()
{
filletImage1 = Fillet1.GetComponent<Image>();
filletImage2 = Fillet2.GetComponent<Image>();
filletImage3 = Fillet3.GetComponent<Image>();
filletImage4 = Fillet4.GetComponent<Image>();
//圆环要根据值进行一个排序
}
// Update is called once per frame
void Update()
{
UpdatePercent(no1,no2,no3, no4);
// A + r*sin x
}
/// <summary>
/// 更新圆环图内的图标位置
/// </summary>
/// <param name="n1">数据一</param>
/// <param name="n2">数据二</param>
/// <param name="n3">数据三</param>
/// <param name="n4">数据四</param>
public void UpdatePercent(float n1,float n2,float n3,float n4)
{
//偏移角度
var offsetRoation = 180;
float sum = n1 + n2 + n3 + n4;
float p1 = n1 / sum;
float p2 = n2 / sum;
float p3 = n3 / sum;
float p4 = n4 / sum;
//限制住 免得太难看
if (p1 < 0.02 && p1 >= 0)
Fillet1.gameObject.SetActive(false);
else if(!Fillet1.gameObject.activeSelf)
Fillet1.gameObject.SetActive(true);
a.fillAmount = p1;
a.transform.localEulerAngles = new Vector3(0, 0, offsetRoation);
b.fillAmount = p2;
var angleB = offsetRoation - (360 * p1);
b.transform.localEulerAngles = new Vector3(0, 0, angleB);
c.fillAmount = p3;
var angleC = offsetRoation - (360 * (p1 + p2));
c.transform.localEulerAngles = new Vector3(0, 0, angleC);
d.fillAmount = p4;
var angleD = offsetRoation - (360 * (p1 + p2 + p3));
d.transform.localEulerAngles = new Vector3(0, 0, angleD);
//定位圆环的尾部
Fillet1.position = CalculateCoordinates(p1 * 360, radius, a.transform.position);
Fillet2.position = CalculateCoordinates(360 * (p1 + p2), radius, b.transform.position);
Fillet3.position = CalculateCoordinates(360 * (p1 + p2 + p3), radius, c.transform.position);
Fillet4.position = CalculateCoordinates(360, radius, d.transform.position);
//确定圆环的旋转
Fillet1.localEulerAngles = new Vector3(0, 0, angleB + 90);
Fillet2.localEulerAngles = new Vector3(0, 0, angleC+90);
Fillet3.localEulerAngles = new Vector3(0, 0, angleD+90);
Fillet4.localEulerAngles = new Vector3(0, 0, 270);
//确定圆环的渐变颜色 348是图片的分辨率
filletImage1.color = GetRingColor(a.sprite.texture, 348, p1 * -360);
filletImage2.color = GetRingColor(b.sprite.texture, 348, p2 * -360);
filletImage3.color = GetRingColor(c.sprite.texture, 348, p3 * -360);
filletImage4.color = GetRingColor(d.sprite.texture, 348, p4 * -360);
t1.text = string.Format("{0:f2}%", p1 * 100);
t2.text = string.Format("{0:f2}%", p2 * 100);
t3.text = string.Format("{0:f2}%", p3 * 100);
t4.text = string.Format("{0:f2}%", p4 * 100);
}
/// <summary>
/// 计算圆角位置
/// </summary>
/// <param name="angle">当前角度</param>
/// <param name="radius">圆环半径</param>
/// <param name="initialPos">当前坐标（偏移量）</param>
/// <returns>返回相对于当前坐标的坐标</returns>
private Vector3 CalculateCoordinates(float angle, float radius , Vector3 initialPos)
{
//圆上的每一个点的坐标为 (sin x,cos x) x为所在点的角度
//Mathf.Sin 的参数不是角度 是弧度 所以需要转一下
Vector3 pos = new Vector3(Mathf.Sin(angle* Mathf.Deg2Rad), Mathf.Cos(angle* Mathf.Deg2Rad),0) * radius + initialPos;
//Debug.Log(pos);
return pos;
}
/// <summary>
/// 获取圆环对应位置的颜色
/// </summary>
/// <param name="texture">目标图片</param>
/// <param name="picSize">目标图片的尺寸</param>
/// <param name="colorAngle">对应的角度</param>
/// <returns>返回对应角度</returns>
private Color GetRingColor(Texture2D texture, int picSize,float colorAngle)
{
Color[] textureCol = texture.GetPixels();
int offset = picSize / 2;
int radius_Color = picSize / 2 - 20;
int x = offset + (int)(radius_Color * Mathf.Sin(colorAngle * Mathf.Deg2Rad));
int y = offset + (int)(radius_Color * Mathf.Cos(colorAngle * Mathf.Deg2Rad)) - 1;
return textureCol[x + y * picSize];
}
}
到了这里，关于Unity中圆环图的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![游戏开发常用引擎工具介绍对比区别（UE4,Unity,Cocos,LayaAir,[egret-白鹭]）](https://imgs.yssmx.com/Uploads/2024/02/640262-1.png)
