mirror of
https://github.com/galacean/engine.git
synced 2026-05-19 03:26:11 +08:00
109 lines
2.2 KiB
Plaintext
109 lines
2.2 KiB
Plaintext
---
|
|
order: 2
|
|
title: 架构
|
|
type: UI
|
|
label: UI
|
|
---
|
|
|
|
## 系统设计
|
|
|
|
```mermaid
|
|
---
|
|
title: UI System
|
|
---
|
|
classDiagram
|
|
Component <|-- Transform
|
|
Script <|-- Component
|
|
Transform <|-- UITransform
|
|
Component <|-- Renderer
|
|
Renderer <|-- UIRenderer
|
|
UIRenderer <|-- Image
|
|
UIRenderer <|-- Text
|
|
UICanvas <|-- Component
|
|
UIInteractive <|-- Script
|
|
Button <|-- UIInteractive
|
|
UIGroup <|-- Component
|
|
|
|
class Script {
|
|
+void onUpdate()
|
|
}
|
|
|
|
class Transform{
|
|
+Vector3 position
|
|
+Vector3 rotation
|
|
+Vector3 scale
|
|
...
|
|
}
|
|
|
|
class UITransform{
|
|
<<Added>>
|
|
+Vector2 size
|
|
+Vector2 pivot
|
|
}
|
|
|
|
class Renderer{
|
|
+BoundingBox bounds
|
|
+Material getMaterial()
|
|
+Material setMaterial()
|
|
}
|
|
|
|
class UIRenderer{
|
|
<<Added>>
|
|
+Color color
|
|
+boolean raycastEnabled
|
|
+vec4 raycastPadding
|
|
}
|
|
|
|
class Image{
|
|
<<Added>>
|
|
+Sprite sprite
|
|
+SpriteDrawMode drawMode
|
|
...
|
|
}
|
|
|
|
class Text{
|
|
<<Added>>
|
|
+string text
|
|
+Font font
|
|
...
|
|
}
|
|
|
|
class UICanvas {
|
|
<<Added>>
|
|
+CanvasRenderMode renderMode
|
|
+Camera renderCamera
|
|
...
|
|
}
|
|
|
|
class UIInteractive {
|
|
<<Added>>
|
|
+boolean interactive
|
|
+Transition transitions
|
|
...
|
|
}
|
|
|
|
class Button {
|
|
<<Added>>
|
|
+void addClicked()
|
|
+void removeClicked()
|
|
...
|
|
}
|
|
|
|
class UIGroup {
|
|
<<Added>>
|
|
+boolean interactive
|
|
+number alpha
|
|
+boolean ignoreParentGroup
|
|
}
|
|
```
|
|
|
|
## 模块管理
|
|
|
|
| 包 | 解释 | 相关文档 |
|
|
| :----------------------------------------------------------------------- | :----------- | --------------------- |
|
|
| [@galacean/engine-ui](https://www.npmjs.com/package/@galacean/engine-xr) | 核心架构逻辑 | [API](/apis/galacean) |
|
|
|
|
> `@galacean/engine-ui` 是实现 **UI** 必须引入的依赖
|
|
|
|
> 需遵守[版本依赖规则](/docs/basics/version/#版本依赖)，即 `@galacean/engine-ui` 的版本需与 `@galacean/engine` 保持一致。
|