Unity中圆环图的实现

企业开发 2023-09-29 17:23:30 阅读次数: 0

在这里插入图片描述

一、根据数值变化制作圆环

  1. 首先需要多张圆环作为单个数据颜色，并把Image的属性设置为按数值转换为角度铺满，再把实际数据所占百分比与Image中的FillAmout同步
    在这里插入图片描述
    每一个圆环都根据数值变化改变后圆环根据数值显示不同程度但未旋转
  2. 虽然每一个圆环都已经根据数值展示对应的大小，还需要把这些扇环组装为一个完整的圆环，就需要给他们添加上一个旋转 旋转角度 == -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);
    }

二、为圆环图中的扇环添加圆角

  1. 制作圆角（也可以使用已经做好的图片），在这里用做出半个圆形（如果扇环图片不是渐变可以直接用圆，我这里因为是颜色渐变所以还需要动态获取这个圆角的颜色）
    在这里插入图片描述

  2. 定位圆角位置*（因为圆角是在自身扇环尾端 所以对应角度就是自身扇环所占比重*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;
    }
  1. 确定圆角的旋转角度（由于我做的圆角是上半截，它的上方永远垂直于半径），自身角度 == 垂直于自身扇环的结尾角度 == 垂直于下一个扇环的开始
 		//确定圆环的旋转
        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);				//因为是接到开头去

在这里插入图片描述

  1. 确定圆角颜色（扇环不渐变就不需要），由于我这里扇环是一个渐变颜色的，所以数值越大色差越大需要动态取色。
    由于图片就相当于使用了一维数组存储了 分辨率个数据点，可以把图片看作一个大小为分辨率的二维数组，算出半径然后通过圆的轨迹方程算出角度对应每个点的坐标，再转换成一维数组的坐标就可以提取出目标坐标的颜色。
	
	    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];
    }

全部代码：

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

猜你喜欢

转载自blog.csdn.net/anxious333/article/details/131173977
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022