圆角环形进度条_UGUI如何制作一个环形进度条，还带圆角的那种？

最新推荐文章于 2024-08-09 11:56:13 发布

Barrrrrry

最新推荐文章于 2024-08-09 11:56:13 发布

阅读量450

点赞数

文章标签：圆角环形进度条

本文链接：https://blog.csdn.net/weixin_36127981/article/details/112740155

版权

本文介绍如何在Unity的UGUI中创建带有圆角的环形进度条。作者首先分享了与美术沟通的需求，然后尝试了AssetStore的解决方案，最后决定使用遮罩技术并修改CircleImage组件，成功实现效果，解决了锯齿问题。

摘要由CSDN通过智能技术生成

先祭上美术为难我的效果图？？？

我：进度条头尾那个弧形也要？美术：是的

我：。。。。。。。。。。。。。（然后就开始挖新的坑）

作为一个ctrl+c &ctrl+v 的“优秀”程序员，第一件事显示找有没有做好了的。然后我在AssetStore找到了这货【Circular Timer】$5，欸算了放弃吧。

突然灵光一闪 “是不是可以用遮罩实现呢” 然后做出来了这货它由两个遮罩三张地图做成一共有8个子节点

细节是这样的

过了一周后还是总觉得哪里不太对，想起了之前的项目用的CircleImage 他是直接修改顶点数据完成的，于是我开始做新的尝试。

强迫症得到了治疗！！！！

正文

本次代码基于修改完成CircleImage，感谢大佬给的轮子！！！

使用时外围可以让美术留点几个像素空白避免外圈被裁剪出现的锯齿问题

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Sprites;

[ExecuteInEditMode]
public class CircleProgress: CircleImage
{
    [SerializeField, Range(5,20), Tooltip("弧形顶点个数")]
    private int _scSegments = 9;
    public int SemiSegments
    {
        set
        {
            _scSegments = value;
            SetVerticesDirty();
        }
        get
        {
            return _scSegments;
        }
    }
    [SerializeField, Tooltip("是否围绕StartAngle 旋转")]
    private bool _surround = false;
    public bool Surround
    {
        set
        {
            _surround = value;
            SetVerticesDirty();
        }
        get
        {
            return _surround;
        }
    }

    [SerializeField, Range(-360,360), Tooltip("设置进度条起始点位置")]
    private int _startAngle = 0;
    public int StartAngle
    {
        set
        {
            _startAngle = value;
            SetVerticesDirty();
        }
        get
        {
            return StartAngle;
        }