Unity__UGUI__Image四种显示及其妙用(进度条)

本文详细解析了img组件的sliced、tilled和filled三种填充方式,通过实例展示了不同参数如何影响图片展示效果。fillcenter参数决定是否填充中心,pixelsperunit系数影响图片切割比例。tilled类型则是图片平铺,系数改变影响平铺密度。filled类型可用于创建进度条,通过fillAmount参数调整进度。这些技巧可用于丰富UI设计和动态效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
img组件有四种基本的类型:
分别是simple,sliced,tilled,filled四种

首先我们跳过simple,直接开始sliced,按字面意思为切割,自然填充方式就是切割。

切割逻辑如下,将图片切割成九宫格,当你选中会出现两种情况:
在这里插入图片描述
该图片没有边界,以及:
在这里插入图片描述
上面是状态,下面是九宫格模式,先不讲参数意义,我们先看参数变化,导致的结果,通过他来引导
fill center参数
子如起名:
在这里插入图片描述
前面是未选,后面是选中,就是是否填充中心
pixels per unit
我将他分别设置成0.01,0.1,1,10
在这里插入图片描述
在细看一下最后一个图片的边界发现:
在这里插入图片描述
因此我们可以看出他的填充方式大概就是边界分别有九宫格四角填充,普通边界由九宫格上下左右图填充,所有非边界由中间图填充
系数则表示,一种对应关系,系数越大则表示填充该img所使用的图片每快(九块)所占的比例越低,简单说就是系数越大,就会使用越多的快填充。系数大可以达到一个按钮看起来月完美的感觉。
tilled平铺,如图
在这里插入图片描述
将值分别设置为1,2
在这里插入图片描述
类似就不多说了

下面将最后一个filled
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
看了三种情况我想你已经明白了使用

下面看他的妙用与进度条
我们使用两张图片,一张做背景,一张做进度条,
在这里插入图片描述
背景图片设置为普通就行了,但是进入图片设置为水平填充,通过调节fill Amount参数就可以模拟进度条了。
进度条还有很多模拟方式,例如slider组件模拟

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值