UIButton
UIButton 继承自 UIInteractive(可交互组件), 实现基本的按钮功能。 按钮组件内部封装有 UIImage
用于显示背景图,集成自可交互组件 UIInteractive
,使用内置的 UITransform
描述的方形区域作为感应热区。
组件贴图
组件有多种状态 UIInteractiveStyle,每种状态对应一个贴图
upTexture
- 默认状态对应的贴图downTexture
- 鼠标按下时对应的贴图overTexture
- 鼠标 over 时对应的贴图disableTexture
- 组件被禁用时的贴图
我们可以设置组件各种状态下对应的背景图,即可获得按钮随状态切换变换样式的效果。
组件交互
我们可以使用事件监听器,监听组件的 object3D
对象的GUI
系列事件,即可获得用户操作响应函数回调:
PointerEvent3D.PICK_CLICK_GUI
:鼠标点击PointerEvent3D.PICK_OVER_GUI
:鼠标滑入PointerEvent3D.PICK_OUT_GUI
:鼠标移除PointerEvent3D.PICK_UP_GUI
:鼠标抬起PointerEvent3D.PICK_DOWN_GUI
:鼠标按下
启用/禁用
设置组件是否有效:
true
- 按钮会响应鼠标事件false
- 不响应鼠标事件,并且呈现disableTexture
的贴图
ts
image.enable = true; //false
1
ts
import {
Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, ViewPanel, UIButton, DirectLight, HoverCameraController, Color, PointerEvent3D
} from "@orillusion/core";
export class Sample_button {
async run() {
// initializa engine
await Engine3D.init();
// create new scene as root node
let scene3D: Scene3D = new Scene3D();
// create camera
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
// set camera controller
let controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(0, -20, 15);
// add camera node
scene3D.addChild(cameraObj);
// create light
let light: Object3D = new Object3D();
// add direct light component
let component: DirectLight = light.addComponent(DirectLight);
// adjust lighting
light.rotationX = 45;
light.rotationY = 30;
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 1;
// add light object
scene3D.addChild(light);
await Engine3D.res.loadAtlas('https://cdn.orillusion.com/atlas/UI_atlas.json');
// create new forward rendering job
let renderJob: ForwardRenderJob = new ForwardRenderJob(scene3D);
// start rendering
Engine3D.startRender(renderJob);
// create panel root
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
renderJob.guiCanvas.addGUIChild(panelRoot);
// create button node
let buttonQuad = new Object3D();
panelRoot.addChild(buttonQuad);
// create button component
let button: UIButton = buttonQuad.addComponent(UIButton);
// set button size
button.uiTransform.resize(180, 60);
button.upTexture = Engine3D.res.getSubTexture('button-up');
button.downTexture = Engine3D.res.getSubTexture('button-down');
button.overTexture = Engine3D.res.getSubTexture('button-over');
button.disableTexture = Engine3D.res.getSubTexture('button-disable');
// add listener
buttonQuad.addEventListener(PointerEvent3D.PICK_CLICK_GUI, this.onClick, this);
buttonQuad.addEventListener(PointerEvent3D.PICK_OUT_GUI, this.onOut, this);
buttonQuad.addEventListener(PointerEvent3D.PICK_OVER_GUI, this.onOver, this);
buttonQuad.addEventListener(PointerEvent3D.PICK_DOWN_GUI, this.onDown, this);
}
private onClick() {
}
private onOut() {
}
private onOver() {
}
private onDown() {
alert('clicked me!')
}
}
new Sample_button().run();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83