mirror of
https://github.com/galacean/engine.git
synced 2026-05-08 07:55:23 +08:00
45 lines
2.1 KiB
Plaintext
45 lines
2.1 KiB
Plaintext
---
|
|
order: 2
|
|
title: Image
|
|
type: UI
|
|
label: UI
|
|
---
|
|
|
|
The `Image` component is used to display images within a `UICanvas`.
|
|
|
|
## Editor Usage
|
|
|
|
### Add Image Node
|
|
|
|
Add an `Image` node in the **[Hierarchy Panel](/en/docs/interface/hierarchy/)**.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9SCNTZNglo0AAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
|
|
|
> If the parent or ancestor node does not have a Canvas component, a root canvas node will be automatically added.
|
|
|
|
### Set Sprite
|
|
|
|
The content displayed by the `Image` depends on the selected [Sprite asset](). Select the node with the `Image` component, and in the **[Inspector Panel](/en/docs/interface/inspector)**, choose the corresponding sprite asset in the Sprite property to change the displayed content.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*aztPTKxnkHEAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
|
|
|
### Modify Draw Mode
|
|
|
|
The `Image` component currently provides three draw modes: Normal, Nine-Patch, and Tiled (the default is Normal). You can visually feel the rendering differences between modes by modifying the width and height in each mode.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*z6iPRb0U9FUAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
|
|
|
### Adjust Size
|
|
|
|
For adjusting the size of UI elements, refer to [Quickly Adjust UI Element Size](/en/docs/UI/quickStart/transform).
|
|
|
|
## Properties
|
|
|
|
| Property Name | Description |
|
|
| :----------------- | :-------------------------------------------------- |
|
|
| `sprite` | The sprite to render |
|
|
| `color` | The color of the sprite |
|
|
| `drawMode` | The draw mode, supports Normal, Nine-Patch, and Tiled modes |
|
|
| `raycastEnabled` | Whether the image can be detected by raycasting |
|
|
| `raycastPadding` | Custom padding for raycasting, representing the distance from the edges of the collision area. This is a normalized value, where X, Y, Z, and W represent the distances from the left, bottom, right, and top edges respectively. |
|