mirror of
https://github.com/galacean/engine.git
synced 2026-05-14 14:36:41 +08:00
63 lines
2.6 KiB
Plaintext
63 lines
2.6 KiB
Plaintext
---
|
|
order: 0
|
|
title: 创建根画布
|
|
type: UI
|
|
label: UI
|
|
---
|
|
|
|
根画布是 UI 的基础，但不是所有的 `UICanvas` 都是根画布，接下来为大家演示如何在场景中创建根画布。
|
|
|
|
## 编辑器使用
|
|
|
|
### 添加 UICanvas 节点
|
|
|
|
在 **[层级面板](/docs/interface/hierarchy/)** 添加 Canvas 节点
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ZFO6Q7P7NwQAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
|
|
|
### 设置属性
|
|
|
|
选中添加了 `Canvas` 组件的节点，可以在 **[检查器面板](/docs/interface/inspector)** 设置相关的属性
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*4nbARKclT8sAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
|
|
|
### 根画布
|
|
|
|
如果新添加的画布节点的父亲或祖先节点已经包含激活的 `UICanvas` 组件，那么此画布不包含任何渲染与交互的功能。
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9CxZQ5t6GVEAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
|
|
|
## 属性
|
|
|
|
| 属性名 | 描述 |
|
|
| :--------------------------- | :------------------------------------------------------------ |
|
|
| `renderMode` | 画布的渲染模式 |
|
|
| `renderCamera` | 当画布设置为 `ScreenSpaceCamera` 模式时，对应的渲染相机 |
|
|
| `distance` | 当画布设置为 `ScreenSpaceCamera` 模式时，画布相较于相机的距离 |
|
|
| `resolutionAdaptationMode` | 画布的适配模式，可以按需选择宽度适配或者高度适配等模式 |
|
|
| `referenceResolution` | 画布在做尺寸适配时，依据的设计分辨率 |
|
|
| `referenceResolutionPerUnit` | 画布中的单位与世界空间中单位的比例关系 |
|
|
| `sortOrder` | 画布的渲染排序优先级 |
|
|
|
|
## 脚本开发
|
|
|
|
```typescript
|
|
// Add camera
|
|
const cameraEntity = root.createChild("Camera");
|
|
const camera = cameraEntity.addComponent(Camera);
|
|
|
|
// Add UICanvas
|
|
const canvasEntity = root.createChild("canvas");
|
|
const canvas = canvasEntity.addComponent(UICanvas);
|
|
|
|
// Set renderMode to `ScreenSpaceOverlay`
|
|
canvas.renderMode = CanvasRenderMode.ScreenSpaceOverlay;
|
|
// Set renderMode to `ScreenSpaceCamera`
|
|
canvas.renderMode = CanvasRenderMode.ScreenSpaceCamera;
|
|
canvas.renderCamera = camera;
|
|
// Set Reference Resolution
|
|
canvas.referenceResolution.set(750, 1624);
|
|
// Set Adaptation Mode
|
|
canvas.resolutionAdaptationMode = ResolutionAdaptationMode.WidthAdaptation;
|
|
```
|