Изображение

Используйте элемент Image для добавления графических ассетов в ваше приложение. Это универсальный и мощный инструмент для отображения визуального контента в вашем UI, например, галереи изображений, списки продуктов, предварительный просмотр рендеринга и профили пользователей.

Создание образа

Вы можете создать элемент Image в UI Builder, UXML или C#.

Следующий пример создает элемент Image в UXML:

<ui:UXML xmlns:ui="UnityEngine.UIElements" >
    <ui:Image source="Resources/sample-image.png" scale-mode="StretchToFill" tint-color="rgb(49, 49, 49)"/>
</ui:UXML>

Следующий пример создает элемент Image в C#:

var image = new Image();
image.image = Resources.Load<Texture2D>("sample-image");
// Alternative if using sprites.
// image.sprite = Resources.Load<Sprite>("sample-sprite");
image.scaleMode = ScaleMode.StretchToFill;
image.tintColor = Color.white;

Изображение против VisualElement.style.backgroundImage

Вы можете использовать как элемент Image, так и свойство VisualElement.style.backgroundImage для добавления визуального контента в свой UI.. Выбор между ними зависит от конкретного использования и требований вашего приложения.

Элемент Image обычно используется для отображения изображения в определенной области UI, такой как галерея изображений или аватар в профиле пользователя. Он обеспечивает более точное управление внешним видом изображения, включая параметры для изменения размера, масштабирования и обрезки. Используйте Image, когда размер изображения должен определять размер элемента в макете. Вы также можете добавить дополнительные элементы к элементу Image для создания наложений или добавления интерактивности. Однако, по причинам производительности, укажите фиксированную ширину и высоту, если вы используете много экземпляров элемента Image.

Свойство VisualElement.style.backgroundImage используется для того, чтобы установил изображение в качестве фона элемента UI. Это полезно, когда вы хотите добавить визуальный интерес к элементу, не уменьшая главного содержания или функциональности UI.. Свойство VisualElement.style.backgroundImage также позволяет использовать USS для изменения исходного изображения для многих различных элементов.

В целом, рекомендуется использовать элемент Image, когда вам нужно больше контроля над внешним видом и расположением изображения; и использовать свойство VisualElement.style.backgroundImage, когда вы просто хотите добавить фоновое изображение к элементу UI. Однако оба подхода действительны, и вы можете использовать их вместе в одном и том же UI, если это необходимо.

Примечание:

• Элемент Image также поддерживает свойство style.backgroundImage. Изображение фона не будет видно, если в элементе Image установлен источник изображения и оно не прозрачное.
• UI Builder частично поддерживает элемент Image. Он читает из UXML и записывает в него, и позволяет базовую авторскую работу как стандартный визуальный элемент. Большинство параметров, специфичных для Image, определены как пользовательские свойства USS и не видны в разделе Атрибуты UI Builder Inspector.

Базовый класс C# и пространство имён

C# класс: Image
Пространство имен: UnityEngine.UIElements
Базовый класс: VisualElement

Атрибуты члена UXML

Этот элемент имеет следующие атрибуты члена:

Имя	Тип	Описание
scale-mode	ScaleMode	ScaleMode используется для отображения изображения.
tint-color	Color	Цвет тонирования для этого изображения.
uv	Rect	Координаты базовой текстуры изображения относительно нижнего левого угла.

Унаследованные атрибуты UXML

Этот элемент наследует от своего базового класса следующие атрибуты:

Имя	Тип	Описание
focusable	boolean	Если false, то элемент не может быть фокусирован. Элемент может быть фокусирован только в том случае, если его свойство canGrabFocus имеет значение true.
tabindex	int	Целое число, используемое для сортировки фокусируемых элементов в кольце фокуса. Должно быть больше или равно нулю. Установка значения tabIndex меньше 0 (например, −1) удаляет элемент из кольца фокуса и навигации по вкладкам.

Этот элемент также наследует следующие атрибуты от VisualElement:

Имя	Тип	Описание
content-container	string	Логический контейнер, в который добавляются дочерние элементы. Если к этому элементу добавляется дочерний элемент, то он добавляется в контейнер содержимого этого элемента. При итерации над VisualElement.Children При использовании элемента вместо самого элемента используется иерархия контейнера содержимого элемента. Это может привести к неожиданным результатам, например, к игнорированию элементов событиями навигации, если они не находятся непосредственно в иерархической структуре контейнера. См. IFocusRing для больше информации. Если контейнер содержимого совпадает с самим элементом, то дочерние элементы добавляются непосредственно к элементу. Это верно для большинства элементов, но может быть переопределено более сложными типами. ScrollView, например, имеет контейнер содержимого, отличающийся от самого себя. В этом случае дочерние элементы, добавленные к представлению прокрутки, добавляются вместо этого к его элементу контейнера содержа-VisualElement.Hierarchy.parent) дочерних элементов является элементом контейнера содержимого прокрутки, их логическим родителем (VisualElement.parentПоскольку некоторые фокусируемые дочерние объекты представления прокрутки не являются частью его логической иерархии, такие как его Scroller элементов, эти фокусируемые дочерние элементы не рассматриваются по умолчанию при использовании последовательной навигации. Как я могу изменить, какой элемент будет фокусироваться дальше для примера решения, если правила навигации по умолчанию не соответствуют вашим потребностям.
data-source	Object	Назначает источник данных этому VisualElement, который переопределяет любой унаследованный источник данных. Этот источник данных наследуется всеми дочерними объектами.
data-source-path	string	Путь от источника данных к значению.
data-source-type	System.Type	Возможный тип источника данных, присваиваемый этому VisualElement. Эта информация используется UI Builder только как подсказка для определенного заполнения поля пути источника данных, когда эффективный источник данных не может быть указан во время проектирования.
enabled	boolean	Возвращает true, если VisualElement разрешен локально. Этот флаг не изменяется, если VisualElement имплицитно отключен одним из родителей. Чтобы проверить это, используйте enabledInHierarchy.
language-direction	UIElements.LanguageDirection	Указывает направленность текста элемента. Значение будет распространяться на дочерей элемента. Установка languageDirection на RTL может получить только базовую поддержку RTL, такую как инверсия текста. Чтобы получить более полную поддержку RTL, такую как перерыв строки, перенос слов или формирование текста, вы должны включить Усовершенствованный текстовый генератор.
name	string	Имя этого VisualElement. Используйте это свойство для написания селекторов USS, которые нацелены на определенный элемент. Стандартная практика заключается в том, чтобы дать элементу уникальное имя.
picking-mode	UIElements.PickingMode	Определяет, может ли этот элемент быть целью событий указателя или выбран IPanel.Pick запросов. Элементы не могут быть выбраны, если: - Они невидимы. style.display установлен на DisplayStyle.None Элементы с режимом подбора PickingMode.Ignore никогда не получать псевдо-state.
style	string	Задает значения стиля на VisualElement. Возвращаемые данные стиля, рассчитанные из USS файлы или встроенные стили, записанные в этот объект в C#, не представляет полностью разрешенные стили, такие как окончательная высота и ширина VisualElement. Чтобы получить доступ к этим полностью разрешенным стилям, используйте resolvedStyle. Дополнительные сведения об использовании этого свойства и всех поддерживаемых USS свойства, см. Применить стили в C# сценарии и USS ссылка на свойства страницы руководства.
tooltip	string	Текст, который будет отображаться внутри информационного поля после того, как пользователь задержится над элементом небольшое время. Это поддерживается только в Редакторе UI.
usage-hints	UIElements.UsageHints	Комбинация значений подсказки, которые указывают высокоуровневые предполагаемые схемы использования для VisualElement. Это свойство может быть установлено только тогда, когда VisualElement еще не является частью Panel. Как только оно становится частью Panel, это свойство становится эффективно только для чтения, и попытки изменить его будут вызывать исключение. Указание правильного UsageHints заставляет систему принимать более правильные решения о том, как обрабатывать или ускорять определенные операции на основе предполагаемой схемы использования. Обратите внимание, что эти подсказки не влияют на поведение или визуальные результаты, а только влияют на общую производительность панели и элементов внутри нее. Рекомендуется всегда рассматривать возможность указания правильного UsageHints, но помните, что некоторые UsageHints могут быть внутренне проигнорированы при определенных условиях (e.g. из-за аппаратных ограничений на целевой платформе).
view-data-key	string	Используется для устойчивости данных представления, таких как развернутые состояния дерева, положение прокрутки или уровень масштаба. Этот ключ используется для сохранения и загрузки данных представления из хранилища данных представления. Если этот ключ не установлен, устойчивость отключена для связанного VisualElement. Дополнительные сведения см. в разделе Устойчивость данных представления в руководстве Unity.

Классы USS

В таблице ниже перечислены все открытые имена свойств C# и связанные с ними селекторы USS.

C# собственность	USS выбор	Описание
ussClassName	.unity-image	Имя USS-класса для элементов этого типа.
disabledUssClassName	.unity-disabled	Имя USS-класса для локально отключённых элементов.

USS пользовательские свойства

В следующей таблице перечислены настраиваемые свойства, доступные исключительно для элемента Image в USS:

Свойство	Тип	Описание
--unity-image	строка	Источник файла образа. Сведения о том, как ссылаться на ресурс образа, см. в разделе Активы.
--unity-image-size	строка	Режим масштабирования изображения. Доступны следующие значения: stretch-to-fill, scale-and-crop и scale-to-fit.
--unity-image-tint-color	строка	Цвет оттенка изображения.

Дополнительные ресурсы

• Установить фоновые изображения
• Кнопка