使用 Image 元素可将图形资源添加到应用程序中。这是一个多功能且性能强大的工具,用于在__ UI__(即用户界面,User Interface)让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary 中显示视觉内容,例如图像库、产品列表、渲染预览和用户配置文件。
必须使用 UXML 或 C# 代码在 UI 中添加 Image 元素,并将图像源提供给 --unity-image USS 自定义属性。
您可以使用 --unity-image-size USS 自定义属性设置图像缩放模式。还可以使用 --unity-image-tint-color USS 自定义属性设置图像色调颜色。
以下 UXML 示例将使用内联样式添加图像源:
<ui:Image style="--unity-image: url('path/to/image');"/>
可以设置 Image 元素的大小和布局,以及元素中图像的大小和布局。这样可以控制图像在 UI 中的显示方式,例如调整图像大小以适应特定区域或将其与其他 UI 元素对齐。还可以为图像元素添加交互性,例如允许用户单击或点击图像以触发操作。您可以将样式应用于 Image 元素和图像本身,例如调整不透明度或应用滤色器。
VisualElement.style.backgroundImage
您可以使用 Image 元素和 VisualElement.style.backgroundImage 属性向 UI 添加视觉内容。在两者之间如何选择要取决于应用程序的具体用途和要求。
Image 元素通常用于显示 UI 特定区域内(例如图像库或用户配置文件中的__ Avatar__用于将动画从一个骨架重定向到另一个骨架的接口。更多信息
See in Glossary)的图像。它提供了更细粒度的控制图像外观的功能,包括调整大小、缩放和裁剪的选项。如果要让图像的大小决定布局中元素的大小,请使用 Image 元素。还可以向 Image 元素添加其他元素来创建覆盖层或添加交互性。但是,出于性能原因,如果使用多个 Image 实例,请指定固定宽度和高度。
VisualElement.style.backgroundImage 属性用于将图像设置为 UI 元素的背景。如果要为元素增加视觉吸引力,而又不影响 UI 的主要内容或功能,这会非常有用。VisualElement.style.backgroundImage 属性还允许使用 USS 为许多不同元素更改源图像。
通常情况下,当您需要更多地控制图像的外观和布局时,建议使用 Image 元素;当您只想将背景图像添加到 UI 元素时,建议使用 VisualElement.style.backgroundImage 属性。但是,这两种方法都有效,如果需要,可以在同一个 UI 中一起使用。
注意:
style.backgroundImage 属性。如果 Image 元素设置了图像源并且不透明,则背景图像将不可见。
C# 类:Image
命名空间:UnityEngine.UIElements
基类:VisualElement
此元素从其基类继承以下属性:
| 名称 | 类型 | 描述 |
|---|---|---|
focusable |
boolean |
如果元素可以获得焦点,则为 true。 |
tabindex |
int |
用于对焦点环中可获得焦点的元素排序的整数。必须大于或等于零。 |
此元素还从 VisualElement 继承以下属性:
| 名称 | 类型 | 描述 | ||||
|---|---|---|---|---|---|---|
content-container |
string |
向其添加子元素,通常与元素本身相同。 | ||||
data-source |
Object |
为此 VisualElement 分配一个数据源,此数据源将覆盖任何已继承的数据源。此数据源由所有子项继承。 | ||||
data-source-path |
string |
从数据源到值的路径。 | ||||
data-source-type |
System.Type |
可分配给此 VisualElement 的可能数据源的类型。 仅当在设计时无法指定有效数据源时,UI Builder 才使用此信息作为补全数据源路径字段的提示。 |
||||
language-direction |
UIElements.LanguageDirection |
指示元素文本的方向性。该值将传播到元素的子项。 将 languageDirection 设置为 RTL,即可通过反转文本、处理换行和单词自动换行的方式,提供对从右到左 (RTL) 语言的基本支持。但是,它不提供全面的 RTL 支持,因为这需要文本整形(包括字符重新排序)和 OpenType 字体功能支持。未来更新计划提供全面的 RTL 支持,这将涉及额外的 API 来处理语言、脚本和字体功能规范。 要增强此属性的 RTL 功能,用户可以在 Unity 资源商店中探索可用的第三方插件,并使用 ITextElementExperimentalFeatures.renderedText
|
name |
string |
此 VisualElement 的名称。 使用此属性可编写针对特定元素的 USS 选择器。标准做法是为元素指定唯一名称。 |
|
picking-mode |
UIElements.PickingMode |
确定是否可以在 mouseEvents 或 IPanel.Pick 查询期间选择此元素。 |
||||
style |
string |
设置 VisualElement 样式值。 |
||||
tooltip |
string |
用户将光标悬停在元素上一小段时间后信息框内显示的文本。仅在编辑器 UI 中受支持。 | ||||
usage-hints |
UIElements.UsageHints |
用于指定 VisualElement 高级预期使用模式的提示值组合。仅当 VisualElement 还不属于 Panel 的一部分时,才能设置此属性。一旦成为 Panel 的一部分,此属性实际上就变为只读,尝试更改此属性将显示异常。适当的 UsageHints 规范会促使系统根据预期的使用模式,做出更好的决策,以处理或加速某些操作。请注意,这些提示不会影响行为或视觉效果,只会影响面板及其元素的整体性能。建议始终考虑指定适当的 UsageHints,但请记住,在某些情况下(例如,由于目标平台上的硬件限制),某些 UsageHints 可能会在内部被忽略。 |
||||
view-data-key |
string |
用于 View Data 持久性,例如树展开状态、滚动位置或缩放级别。 此键用于保存和加载 View Data 存储中的视图数据。如果未设置此键,则会对关联的 VisualElement 禁用持久性。有关更多信息,请参阅 View Data 持久性。 |
||||
下表列出了所有 C# 公共属性名称及其相关的 USS 选择器。
| C# 属性 | USS 选择器 | 描述 |
|---|---|---|
ussClassName |
.unity-image |
此类型元素的 USS 类名称。 |
disabledUssClassName |
.unity-disabled |
本地被禁用元素的 USS 类名称。 |
下表概述了 USS 中专用于 Image 元素的自定义属性:
| 属性 | Type | 描述 |
|---|---|---|
--unity-image |
string | 图像文件的来源。有关如何引用图像资源的信息,请参阅资源。 |
--unity-image-size |
string | 图像缩放模式。可用值有 stretch-to-fill、scale-and-crop 和 scale-to-fit。 |
--unity-image-tint-color |
string | 图像色调颜色。 |