mirror of
https://github.com/galacean/engine.git
synced 2026-05-08 07:55:23 +08:00
45 lines
1.7 KiB
Plaintext
45 lines
1.7 KiB
Plaintext
---
|
||
order: 2
|
||
title: 创建图片
|
||
type: UI
|
||
label: UI
|
||
---
|
||
|
||
`Image` 组件用于在 `UICanvas` 中显示图片。
|
||
|
||
## 编辑器使用
|
||
|
||
### 添加 Image 节点
|
||
|
||
在 **[层级面板](/docs/interface/hierarchy/)** 添加 `Image` 节点
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9SCNTZNglo0AAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
> 若父亲或祖先节点没有画布组件，会自动添加上根画布节点。
|
||
|
||
### 设置 Sprite
|
||
|
||
Image 的显示内容取决于设置的 [Sprite 资产]() ，选中添加了 `Image` 组件的节点，在 **[检查器面板](/docs/interface/inspector)** 的 Sprite 属性选择对应的精灵资产即可替换显示内容。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*aztPTKxnkHEAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
### 修改渲染模式
|
||
|
||
`Image` 目前提供三种绘制模式，分别是普通绘制，九宫绘制与平铺绘制（默认为普通绘制），在不同的绘制模式下，修改绘制宽高可以直观地感受到各种模式之间的渲染差异。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*z6iPRb0U9FUAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
### 调整尺寸
|
||
|
||
请参照[快速调整 UI 元素的尺寸](/docs/UI/quickStart/transform)
|
||
|
||
## 属性
|
||
|
||
| 属性名 | 描述 |
|
||
| :-- | :-- |
|
||
| `sprite` | 渲染的精灵 |
|
||
| `color` | 精灵颜色 |
|
||
| `drawMode` | 绘制模式，支持普通，九宫和平铺绘制模式 |
|
||
| `raycastEnabled` | 是否可以被射线检测到 |
|
||
| `raycastPadding` | 射线检测的自定义边界与他的碰撞区域的距离，它是归一化的值并且 X，Y，Z，W 分别代表距离左下右上四条边的距离 |
|