unity，制作一个环状滑动条

比眉伴天荒 2023-09-26 20:38 104阅读 0赞

## 介绍 ##

unity，制作一个环状滑动条

![在这里插入图片描述][795ab094402d4a1d9adb34470a952383.png]

--------------------

## 方法 ##

1.导入png图片素材

![在这里插入图片描述][6b8e507077d746c78d0bc115d7a5c075.png]

2.新建一个滑动条，两者图片都设置为图片

![在这里插入图片描述][a3fbc9c96a534fcb9b80864ec25983bc.png]

3.调节slider的参数

![在这里插入图片描述][7b7a4f98d1954cf29b7543c4766f830f.png]

4.调节backgroud的参数

![在这里插入图片描述][4b54998234de42f5a9c1067814b8c7ef.png]

5.fill area、fill的参数同上。
    得到两个叠加的圆环。

![在这里插入图片描述][5c6167328bfa4c1fbd3253fcd1fcdcc4.png]

6.设置fill的背景颜色为红色

![在这里插入图片描述][6baacb39a97b441b88ed53c26f06307f.png]

7.设置fill填充方式，“平铺”

![在这里插入图片描述][e35b2dd7dd6e488e82bbd9a8e7d03a58.png]

8.滑动“填充总数”即可

![在这里插入图片描述][8c07fde6a92c4a7aa86d1df42cf641d7.png]

![在这里插入图片描述][946d3aab8ad3402590963512e3b7f947.png]

--------------------

[795ab094402d4a1d9adb34470a952383.png]: https://img-blog.csdnimg.cn/795ab094402d4a1d9adb34470a952383.png
[6b8e507077d746c78d0bc115d7a5c075.png]: https://img-blog.csdnimg.cn/6b8e507077d746c78d0bc115d7a5c075.png
[a3fbc9c96a534fcb9b80864ec25983bc.png]: https://img-blog.csdnimg.cn/a3fbc9c96a534fcb9b80864ec25983bc.png
[7b7a4f98d1954cf29b7543c4766f830f.png]: https://img-blog.csdnimg.cn/7b7a4f98d1954cf29b7543c4766f830f.png
[4b54998234de42f5a9c1067814b8c7ef.png]: https://img-blog.csdnimg.cn/4b54998234de42f5a9c1067814b8c7ef.png
[5c6167328bfa4c1fbd3253fcd1fcdcc4.png]: https://img-blog.csdnimg.cn/5c6167328bfa4c1fbd3253fcd1fcdcc4.png
[6baacb39a97b441b88ed53c26f06307f.png]: https://img-blog.csdnimg.cn/6baacb39a97b441b88ed53c26f06307f.png
[e35b2dd7dd6e488e82bbd9a8e7d03a58.png]: https://img-blog.csdnimg.cn/e35b2dd7dd6e488e82bbd9a8e7d03a58.png
[8c07fde6a92c4a7aa86d1df42cf641d7.png]: https://img-blog.csdnimg.cn/8c07fde6a92c4a7aa86d1df42cf641d7.png
[946d3aab8ad3402590963512e3b7f947.png]: https://img-blog.csdnimg.cn/946d3aab8ad3402590963512e3b7f947.png