简介

图片（Image）控件类型向玩家显示非交互式图片或动态 精灵序列（Sprite Clip）。此图片类型的 UI 对象（UI Object）可用于装饰或显示图标之类的用途，还可以从脚本更改图片以便反映其他控件或逻辑的交互。

【UIEditor_Image001.png】

默认图片控件类型实例化的 UI 对象效果。

属性

图片（Image）控件类型的 UI 对象可以在 2D 纹理（Texture 2D）属性下将2D 贴图资产（Texture 2D Asset）或 图集资产（Texture Atlas）中的图片纹理引用于 UI 对象，并可在 颜色（Color）属性中设置该 UI 对象的叠加颜色等特有的基础属性。

【UIEditor_Image002.png】

名称	描述
纹理类型（Texture Type）	纹理类型属性可选择该 UI 对象的纹理类型属于 2D 纹理（Texture 2D）还是 图集纹理（Texture Atlas）。即引用的图片纹理是 2D 贴图资产（Texture 2D Asset）还是 图集资产（Texture Atlas）中的图片纹理。
2D 纹理 / 图集纹理（Texture 2D / Set Atlas）	如果 纹理类型（Texture Type）属性选择 2D 纹理（Texture 2D），此属性为 2D 纹理（Texture 2D）属性；如果选择 图集纹理（Texture Atlas），此属性为 设置图集（Set Atlas）属性： · 2D 纹理（Texture 2D）属性可用于从 项目窗口（Project）将 以下资产拖入，或点击打开列表选择以下资产用以分配给此 UI 对象：  - 2D 贴图资产，2D 纹理属性支持 PNG，JPG，TGA 格式图片导入而生成的 2D 贴图资产，具体导入方法和限制请参阅 2D 贴图 章节。  - Sprite（精灵）资产，关于 Sprite（精灵）资产的作用和相关内容请参阅 Sprite（精灵）资产 章节。  - 精灵序列（Sprite Clip）资产，可让图片控件类型的 UI 对象显示动态精灵序列，关于精灵序列资产的创建方法，请参阅 精灵序列资产 章节。 · 设置图集（Set Atlas）属性可用于在图集资产中选择分配给此 UI 对象的图片纹理，点击此属性的 设置图集（Set Atlas）按钮，即可选择此项目的图集资产以及选择在图集中分配给此 UI 对象的图片纹理。关于图集资产的创建和使用方法，请参阅 图集 章节。
颜色（Color）	设置图片或 Sprite（精灵）或精灵序列（Sprite Clip）的叠加颜色。
射线投射目标（Raycast Target）	编辑此文本类型的 UI 对象能否被点击或与其他射线交互。 勾选，表示此 UI 对象可以被点击或与其他射线交互。 不勾选，表示此 UI 对象不可被点击或其他射线交互。
射线范围拓展（Raycast Padding）	编辑此文本类型的 UI 对象能被点击或其他射线交互的范围。 属性值是对应边距占宽高的比例，输入的值范围为 0 至 1 的浮点数，且如果与对边边距相加大于 1，属性值会自动调整对边的边距比例至相加的值等于 1。 值得注意的是，需要 射线投射目标 属性勾选了这里的设置才会生效。

除了基础的属性，图片（Image）控件类型的 UI 对象还会根据不同的 图片类型（Image Type）有不同的 高级属性（Advanced）。图片类型属性可定义应用的图片纹理的显示方式，包括：普通（Simple）、切片（Sliced）、平铺（Tiled）、填充（Filled）。

• 普通（Simple）图片类型下，图片控件类型的 UI 对象缩放的时候，会均匀缩放整个被引用的图片纹理。

【UIEditor_Image003.gif】

普通（Simple）图片类型下还包含以下可设置属性。

【UIEditor_Image004.png】

名称	描述
保持纵横比（Preserve Aspect）	设置 UI 对象引用的图片纹理显示是否保持其原有的宽高比例。 勾选，UI 对象引用的图片纹理保持原有宽高比例等比例缩放，不随 UI 对象拉伸。 不勾选，UI 对象引用的图片纹理根据 UI 对象 矩形变换（Rect Transform）的拉伸而拉伸。
原始大小（Native Size）	点击该属性的 原始大小（Native Size）按钮，将该 UI 对象的尺寸重置为引用的图片纹理以像素为单位的尺寸。 此属性改变的尺寸为暂时的，如果此 UI 对象的父级对象的尺寸或屏幕尺寸发生了变化，此 UI 对象的尺寸将不一定会保持其所引用的图片纹理的尺寸。

• 切片（Sliced）图片类型下，使用 3 x 3 图片纹理分区，确保尺寸大小调整不会让角点扭曲变形，而是仅拉伸中心部分。

【UIEditor_Image005.gif】

其中图片纹理分区遵循以下规律：

【UIEditor_Image006.png】

• UI 对象的尺寸发生了在 X 轴或 Y 轴的变换，1、3、7、9 区域都不会拉伸或扭曲。

• UI 对象的尺寸发生了在 Y 轴的变换，2、8 区域不会拉伸，但是如果 UI 对象的尺寸发生了在 X 轴的变换，2、8 区域则会沿 X 轴拉伸。

• UI 对象的尺寸发生了在 X 轴的变换，4、6 区域不会拉伸，但是如果 UI 对象的尺寸发生了在 Y 轴的变换，4、6 区域则会沿 Y 轴拉伸。

• UI 对象的尺寸无论发生 X 轴还是 Y 轴的变换，5 区域（又称中心区域）都会随着 UI 对象一同拉伸。

在 切片（Sliced）图片类型下，您可以通过以下属性编辑图片纹理分区：

【UIEditor_Image007.png】

名称	描述
左侧（Left）	设置左侧图片纹理分区的分割线。输入的值范围为 0 至 1 的浮点数，且遵循以下规则： · 属性值为 0.0 (0%) 对应于左侧，0.5 (50%) 对应于中间，1.0 (100%) 对应于右侧。 · 如果与 右侧（Right）属性的值相加的和大于 1，右侧（Right）属性值会自动调整为 1 减此属性值的差。【UIEditor_Image008.png】
右侧（Right）	设置左侧图片纹理分区的分割线。输入的值范围为 0 至 1 的浮点数，且遵循以下规则： · 属性值为 0.0 (0%) 对应于左侧，0.5 (50%) 对应于中间，1.0 (100%) 对应于右侧。 · 如果与 左侧（Left）属性的值相加的和大于 1，左侧（Left）属性值会自动调整为 1 减此属性值的差。 【UIEditor_Image009.png】
顶部（Top）	设置顶部图片纹理分区的分割线。输入的值范围为 0 至 1 的浮点数，且遵循以下规则： · 属性值为 0.0 (0%) 对应于顶部，0.5 (50%) 对应于中间，1.0 (100%) 对应于底部。 · 如果与 底部（Bottom）属性的值相加的和大于 1，底部（Bottom）属性值会自动调整为 1 减此属性值的差。 【UIEditor_Image010.png】
底部（Bottom）	设置底部图片纹理分区的分割线。输入的值范围为 0 至 1 的浮点数，且遵循以下规则： · 属性值为 0.0 (0%) 对应于底部，0.5 (50%) 对应于中间，1.0 (100%) 对应于顶部。 · 如果与 顶部（Top）属性的值相加的和大于 1，顶部（Top）属性值会自动调整为 1 减此属性值的差。 【UIEditor_Image011.png】
填充中心（Fill Center）	用于设置图片纹理分区的中心区域是否会填充。 勾选，图片纹理分区的中心区域将会填充。 不勾选，图片纹理分区的中心区域将会镂空。

• 平铺（Tiled）图片类型下，当 UI 对象尺寸大于图片纹理的尺寸时，会平铺（重复）图片纹理而不是对其进行拉伸，当 UI 对象尺寸小于图片纹理时会对图片纹理进行裁剪。这通常用于没有边框的图片纹理制作平铺内容。

【UIEditor_Image012.gif】

• 填充（Filled）图片类型下，按照与 普通（Simple）图片类型相同的方式显示和拉伸图片纹理，但不同之处是可以从原点开始使用自定义的方向、方法和填充量填充图片纹理。

【UIEditor_Image013.gif】

填充（Filled）图片类型下还包含以下可设置属性。

【UIEditor_Image014.png】

名称	描述
填充方法（Fill Method）	设置 UI 对象图片纹理的填充方法，有以下填充方法可供设置： · 水平（Horizontal），图片纹理将水平填充。 · 垂直（Vertical），图片纹理将垂直填充。 · 径向90（Radial 90），图片纹理将以 UI 对象矩形的角点之一为径向中心进行径向填充。 径向90（Radial 90），图片纹理将以 UI 对象矩形其中一边的中心为径向中心进行径向填充。 · 径向360（Radial 360），图片纹理将以 UI 对象矩形几何中心为径向中心进行径向填充。
填充起点（Fill Origin）	用于设置图片纹理填充的起始位置，如果 填充方法（Fill Method）属性设置为 径向90（Radial 90）或 径向90（Radial 90），此属性将设置为径向填充的中心。
根据 填充方法（Fill Method）属性中设置了不同的填充方法，填充起点属性可设置的属性值也会有所差异。
填充量（Fill Amount）	设置填充（显示）图片纹理的百分比。可设置 0 至 1 之间的浮点数，属性值为 0.0 (0%) 对应于不填充（完全消失），1.0 (100%) 对应于完全填充（完全显示）。
顺时针方向（Clockwise）	如果填充方法属性设置了 径向90（Radial 90）、径向180（Radial 180）或 径向360（Radial 360），此属性将可以进行设置，否则此属性为不可见且不可设置。 用于设置图片纹理顺时针或逆时针填充。 勾选，图片纹理顺时针填充。 不勾选，图片纹理逆时针填充。
保持纵横比（Preserve Aspect）	设置 UI 对象引用的图片纹理显示是否保持其原有的宽高比例。 勾选，UI 对象引用的图片纹理保持原有宽高比例等比例缩放，不随 UI 对象拉伸。 不勾选，UI 对象引用的图片纹理根据 UI 对象 矩形变换（Rect Transform）的拉伸而拉伸。
原始大小（Native Size）	点击该属性的 原始大小（Native Size）按钮，将该 UI 对象的尺寸重置为引用的图片纹理以像素为单位的尺寸。 此属性改变的尺寸为暂时的，如果此 UI 对象的父级对象的尺寸或屏幕尺寸发生了变化，此 UI 对象的尺寸将不一定会保持其所引用的图片纹理的尺寸。