版本:Unity 6 (6000.0)
语言:English
UXML 元素 IMGUIContainer
UXML 元素 InspectorElement

UXML 元素 Image

使用 Image 元素可将图形资源添加到您的应用程序中。它是一个用途广泛且功能强大的工具,用于在您的UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 词汇表
(例如图片库、产品列表、渲染预览和用户资料)中显示视觉内容。

创建图像

您必须使用 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 元素添加交互性,例如允许用户单击或点击图像以触发操作。您可以将样式应用于 Image 元素和图像本身,例如调整不透明度或应用颜色滤镜。

Image 与 VisualElement.style.backgroundImage

您可以同时使用 Image 元素和 VisualElement.style.backgroundImage 属性向您的 UI 添加视觉内容。两者之间的选择取决于应用程序的具体用法和需求。

Image 元素通常用于在 UI 的特定区域(例如图片库或用户资料中的头像用于将动画从一个骨骼绑定重新定向到另一个骨骼绑定的接口。 更多信息
参见 词汇表
)中显示图像。它提供了对图像外观的更细粒度的控制,包括调整大小、缩放和裁剪选项。当您希望图像的大小驱动布局中元素的大小时,请使用 Image。您还可以向 Image 元素添加其他元素以创建叠加层或添加交互性。但是,出于性能原因,如果您使用许多 Image 实例,请指定固定宽度和高度。

VisualElement.style.backgroundImage 属性用于将图像设置为 UI 元素的背景。当您想向元素添加视觉效果而又不影响 UI 的主要内容或功能时,这很有用。VisualElement.style.backgroundImage 属性还允许方便地使用 USS 更改许多不同元素的源图像。

通常,建议在您需要更多控制图像的外观和布局时使用 Image 元素;当您只想向 UI 元素添加背景图像时,使用 VisualElement.style.backgroundImage 属性。但是,这两种方法都是有效的,如果需要,您可以在同一个 UI 中一起使用它们。

注意:

  • Image 元素也支持 style.backgroundImage 属性。如果 Image 元素已设置图像源且不透明,则背景图像将不可见。
  • UI Builder 部分支持 Image 元素。它读取和写入 UXML,并允许作为标准视觉元素视觉树的节点,实例化或派生自 C# VisualElement 类。您可以设置外观样式、定义行为并在屏幕上显示它作为 UI 的一部分。 更多信息
    参见 词汇表
    进行基本创作。大多数 Image 特定设置都定义为 USS 自定义属性,在 UI Builder 检查器一个 Unity 窗口,显示有关当前选定游戏对象、资源或项目设置的信息,允许您检查和编辑值。 更多信息
    参见 词汇表
    的“属性”部分不可见。

C# 基类和命名空间

C# 类Image
命名空间UnityEngine.UIElements
基类VisualElement

继承的 UXML 属性

此元素从其基类继承以下属性

名称 类型 描述
focusable 布尔值 如果元素可以聚焦,则为真。
tabindex 整数 用于在焦点环中对可聚焦元素进行排序的整数。必须大于或等于零。

此元素还从VisualElement继承以下属性

名称 类型 描述
content-container 字符串 子元素添加到其中,通常与元素本身相同。
data-source 对象 为该 VisualElement 分配数据源,该数据源覆盖任何继承的数据源。此数据源由所有子元素继承。
data-source-path 字符串 从数据源到值的路径。
data-source-type System.Type 可以分配给此 VisualElement 的数据源的可能类型。

此信息仅由 UI Builder 用作提示,以便在设计时无法指定有效数据源时为数据源路径字段提供一些自动完成。
language-direction UIElements.LanguageDirection 指示元素文本的方向性。该值将传播到元素的子元素。

将 languageDirection 设置为 RTL 通过反转文本并适当地处理换行和自动换行来添加对从右到左 (RTL) 的基本支持。但是,它不提供全面的 RTL 支持,因为这需要文本整形,包括字符的重新排序和 OpenType 字体功能支持。全面的 RTL 支持计划在未来的更新中提供,这将涉及其他 API 来处理语言、脚本和字体功能规范。

为了增强此属性的 RTL 功能,用户可以探索 Unity Asset Store 中提供的第三方插件并使用 ITextElementExperimentalFeatures.renderedText
name 字符串 此 VisualElement 的名称。

使用此属性编写针对特定元素的 USS 选择器。标准做法是为元素指定唯一名称。
picking-mode UIElements.PickingMode 确定此元素是否可以在鼠标事件或 IPanel.Pick 查询期间被选中。
style 字符串 设置 VisualElement 样式值。
tooltip 字符串 在用户将鼠标悬停在元素上一段时间后,在信息框内显示的文本。这仅在编辑器 UI 中受支持。
usage-hints UIElements.UsageHints 指定 VisualElement 高级预期使用模式的提示值组合。仅当 VisualElement 尚未成为 Panel 的一部分时,才能设置此属性。一旦成为 Panel 的一部分,此属性实际上就成为只读属性,尝试更改它将引发异常。正确 UsageHints 的规范驱动系统做出更好的决策,关于如何根据预期的使用模式处理或加速某些操作。请注意,这些提示不会影响行为或视觉结果,而只会影响面板及其内部元素的整体性能。建议始终考虑指定正确的 UsageHints,但请记住,在某些情况下,某些 UsageHints 可能会在内部被忽略(例如,由于目标平台上的硬件限制)。
view-data-key 字符串 用于视图数据持久性,例如树展开状态、滚动位置或缩放级别。

此键用于从视图数据存储中保存和加载视图数据。如果您不设置此键,则相关 VisualElement 的持久性将被禁用。有关更多信息,请参阅视图数据持久性

USS 类

下表列出了所有 C# 公共属性名称及其相关的 USS 选择器。

C# 属性 USS 选择器 描述
ussClassName .unity-image 此类型元素的 USS 类名称。
disabledUssClassName .unity-disabled 本地禁用元素的 USS 类名称。

USS 自定义属性

下表概述了在 USS 中仅适用于 Image 元素的自定义属性

属性 类型 描述
--unity-image 字符串 图像文件的源。有关如何引用图像资源的信息,请参阅资源可在游戏中或项目中使用的任何媒体或数据。资源可能来自在 Unity 外部创建的文件,例如 3D 模型、音频文件或图像。您也可以在 Unity 中创建某些资源类型,例如动画控制器、音频混音器或渲染纹理。 更多信息
参见 词汇表
--unity-image-size 字符串 图像缩放模式。可用值为 stretch-to-fillscale-and-cropscale-to-fit
--unity-image-tint-color 字符串 图像色调颜色。

其他资源

UXML 元素 IMGUIContainer
UXML 元素 InspectorElement