UGUI-- Image图像控件_ugui image-优快云博客

本文链接：https://blog.youkuaiyun.com/Go_Accepted/article/details/124283945

本文介绍了Unity的UGUI系统中的Image组件，用于显示精灵图片。内容包括Image的用途、参数解析，如Source Image、Color、Material、Raycast Target等，并详细讲解了Image Type的四种模式：Simple、Sliced、Tiled和Filled，以及它们的应用场景和配置细节。此外，还提及了代码控制Image的方法。

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

1、Image是什么

Image是图像控件，是UGUI中用于显示精灵图片的关键组件，除了背景等大图，一般都是用Image来显示UI中的图片元素

2、Image参数

（1）Source Image：图片来源（图片类型必须是精灵Sprite类型）

如果在Canvas中存在多个Image，越往后（位置在下面）的Image的渲染次序越靠后，即显示越靠前

（2）Color：图像的颜色

（3）Material：图像的材质（一般不修改，会使用UI的默认材质）

（4）Raycast Target：是否作为射线检测的目标（如果不勾选将不会响应射线检测）

例如：一个button显示在image后面，如果勾选，那么点击image时后面的button不会响应

（5）Maskabe：是否能被遮罩

（6）Image Type：图片类型

Simple：普通模式，均匀缩放整个图片，通常应用于不对原图片进行缩放的情况

Sliced：切片模式，九宫格拉伸，只拉伸中央十字区域

通常应用于面板背景图片，即只拉伸中间区域，边框部分不进行拉伸。进行此操作需要设置边框：

图片的 Inspector 窗口中点击 Sprite Editor（需要先引用 2D Sprite 包，在Window->Pacakge Manager中引用），通过四条边将图片进行类似九宫格的划分后Apply，在拉伸的时候只会对中央的十字区域进行拉伸，四角不会拉伸，避免拉伸变形

—— Pixels Per UnitMultiplier：每单位像素乘数，越小像素越宽

——Fill Center：中心填充（若取消，九宫格中心