UGUI系列——Image应用

科技前沿 • 2025-03-13 09:47 • 阅读 87

大家好，我是讯享网，很高兴认识大家。

UGUI系列其他博文，可通过导航帖查看

在这里插入图片描述
讯享网
Image就是UI中最常用的了

1.Seource Image

它的类型是Sprite，是unity内的图片格式
在这里插入图片描述

2.Image Type

图片类型，在Source Image赋值后出现

1）Simple

默认选项，就是Image显示为一张图片，图片会在rect范围内显示，恢复图片的默认尺寸，直接按下 Set Native Size
在这里插入图片描述

2）Sliced

切图需要设置图片的属性
首先，需要编辑图片，按下 Sprite Editor
在这里插入图片描述
你可以看到边上的小点吧，那个是用于九宫格切图的线，你把鼠标停在边上就能拖出一条绿色的线

像这样

在这里插入图片描述
1,3,7,9四个区域不会被拉伸
Image Type选成Sliced，就会显示成这个样子，除了四个角，其余部分都被压缩了

这个时候还有一个属性 Fill Center，它是控制图片是否显示切图编号5那块的内容，也就是不勾选的化，图片就是个空心的
在这里插入图片描述

3）Tiled

这个模式很好理解，就是平铺的
在这里插入图片描述
但是，它的Souece Image赋值成一个用九宫格切过的图的时候，样子就比较有意思了

这个时候它同样有Fill Center这个属性，它可以用于制作只需要边缘平铺的情况

4）Filled

它这个填充的模式比较有意思
在这里插入图片描述
Fill Method:用来选择实现效果的方式
　　Horizontal:水平
　　Vertical：垂直
　　Radial 90：以图片某一角为圆心
　　Radial 180：以图片某一边中心点为圆心
　　Radial 360：以图片中心点为圆心
Fill Origin:用来选择实现效果的起点
　　Bottom Left：左下角
　　Top Left ：左上角
　　Top Right：右上角
　　Botttom Right:右下角
Fill Amount:这个填充量就是图片按照上面选项实现出来的覆盖率，这个一看效果就明白了
Fill Amount = 0.8
在这里插入图片描述
Fill Amount = 0.4

特别是Radial 360可以用来实现技能CD的效果