Unity中圆环图的实现

这篇具有很好参考价值的文章主要介绍了Unity中圆环图的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

unity 圆环,unity,游戏引擎,c#

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

  1. 首先需要多张圆环作为单个数据颜色,并把Image的属性设置为按数值转换为角度铺满,再把实际数据所占百分比与Image中的FillAmout同步
    unity 圆环,unity,游戏引擎,c#
    每一个圆环都根据数值变化改变后unity 圆环,unity,游戏引擎,c#
  2. 虽然每一个圆环都已经根据数值展示对应的大小,还需要把这些扇环组装为一个完整的圆环,就需要给他们添加上一个旋转 旋转角度 == -1 * 自身扇环起点所对应的角度 == -1 * 前方所有扇环的角度和 (因为是反的)
    unity 圆环,unity,游戏引擎,c#

具体代码:

    /// <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. 制作圆角(也可以使用已经做好的图片),在这里用做出半个圆形(如果扇环图片不是渐变可以直接用圆,我这里因为是颜色渐变所以还需要动态获取这个圆角的颜色)
    unity 圆环,unity,游戏引擎,c#

  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);				//因为是接到开头去

unity 圆环,unity,游戏引擎,c#

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

全部代码:文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity vs Godot :哪个游戏引擎更适合你?

    游戏引擎的选择对开发过程和最终产品质量有着重大影响。近年来,Godot和Unity这两款引擎受到广泛关注。本文将从多个维度对两者进行比较,以期为开发者提供正确的选择建议。 Godot和Unity都有各自的优势,没有绝对的好坏之分。Godot开源免费,上手简单,更适合2D和小型游戏

    2024年01月23日
    浏览(93)
  • 30分钟了解所有引擎组件,132个Unity 游戏引擎组件速通!【收藏 == 学会】

    🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN 🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游戏制作 🌲Unity实战100例专栏推荐:Unity 实战100例 教程 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📆 未来很长

    2024年02月11日
    浏览(69)
  • Unity Physics2D 2d物理引擎游戏 笔记

    2d 材质 里面可以设置 摩擦力 和 弹力 Simulated:是否在当前的物理环境中模拟,取消勾选该框类似于Disable Rigidbody,但使用这个参数更加高效,因为Disable会销毁内部产生的GameObject,而取消勾选Simulated只是禁用。 Kinematic 动力学刚体 动力学刚体不受重力和力的影响,而受用户的

    2023年04月24日
    浏览(121)
  • GODOT游戏引擎简介,包含与unity性能对比测试,以及选型建议

    GODOT,是一个免费开源的3D引擎。本文以unity作对比,简述两者区别和选型建议。由于是很久以前写的ppt,技术原因视频和部分章节丢失了。建议当做业务参考。 GODOT目前为止遇到3个比较重大的机遇,第一个是oprea的合作奖,第二个是用支持c#换来的微软的投资,第三个是虚幻

    2024年02月14日
    浏览(79)
  • Unity和UE4两大游戏引擎,你该如何选择?

    目录 游戏引擎 2 —— 难易区别 编程语言 3 —— 游戏产品 UE4制作的游戏产品  Unity制作的游戏产品  产品类型 5 —— 资源商店 6 —— 人才需求 平均薪资 总结      Unity和UE4都是游戏引擎,所谓游戏引擎就是集成了复杂功能的游戏开发软件,他们帮我们实现了复杂的底层逻

    2023年04月08日
    浏览(69)
  • QChart实现ui界面上指定位置饼状图、圆环图的绘制

    近期开发遇上了绘制饼图的需求,笔者前期使用QCustomPlot图形库进行一些图形组件的开发是非常方便的,但是这个库没有实现饼图的绘制,所以后面是使用QChart来实现饼状图的开发。本文主要讲述了使用Qt下的Charts 模块来进行饼图的绘制,并结合Qt Creator里面的示例,在这里编

    2024年02月08日
    浏览(74)
  • Unity 开发人员转CGE(castle Game engine)城堡游戏引擎指导手册

    一、简介 2. Unity相当于什么GameObject? 3. 如何设计一个由多种资产、生物等组成的关卡? 4. 在哪里放置特定角色的代码(例如生物、物品)?Unity 中“向 GameObject 添加 MonoBehaviour”相当于什么? 5.Unity子目录相当于什么Assets? 6. 支持哪些模型格式? 7. 支持FBX模型格式吗? 8.

    2024年02月07日
    浏览(76)
  • SuperMap Hi-Fi 3D SDK for Unity制作游戏引擎材质

    kele     在交通,电力,规划等行业中,有的对象常常具有很强的质感,比如金属质感的 钢轨,电力塔;陶瓷材质的绝缘子;玻璃材质的建筑幕墙等,但常规方式的表现效果 往往差强人意。     游戏引擎(Unity3D)中已有丰富的材质资源库,比如玻璃,金属等材质,这

    2024年02月09日
    浏览(84)
  • 吐槽laya:H5小游戏开发应该用什么引擎好?laya、cocos还是unity?

    我看有人推荐laya,放在H5小游戏的前三排名,这压根不靠谱。 laya只能算个半成品,整体非常垃圾,如果是首次选择游戏引擎,至少转去cocos,实在选laya,那也没办法了。 下面说说laya有什么问题,如果只是一些简单的bug什么的,我是不会花这个时间吐槽的,但是如下的问题实

    2024年02月13日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包