# Panel组件
使用Panel组件可以为实体添加信息面板。当前支持'text'、'canvas'、'video'三种类型信息面板。
1️⃣ 'text'类型Panel组件
import { Panel } from '@tx3d/core';
// 创建实体
const entity = engine.createEntity();
// 添加Panel组件
const panel = entity.addComponent( Tx3d.Panel, {
type: 'text',
content: '乳化液泵站是用来向综采工作的液压支架或\n' +
'普采工作面的单体液压支柱的动力设备。它\n' +
'主要由乳化液箱和乳化液泵组(两组)及液压\n' +
'控制系统组成.',
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2️⃣ 'canvas'类型Panel组件
import { Panel } from '@tx3d/core';
import echarts from 'echarts';
// 创建echars表格
const { charts, dom, context, options } = createEcharts();
// 创建实体
const entity = engine.createEntity();
// 添加Panel组件
const panel = entity.addComponent( Tx3d.Panel, {
type: 'canvas',
content: context.canvas
} );
// 创建Echarts表格
function createEcharts() {
const dom = document.createElement( 'div' );
dom.style.width = '512px';
dom.style.height = '341px';
const charts = echarts.init( dom );
const options = {
series: [
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
splitNumber: 12,
itemStyle: {
color: '#FFAB91'
},
progress: {
show: true,
width: 30
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 30
}
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
splitLine: {
distance: -52,
length: 14,
lineStyle: {
width: 3,
color: '#999'
}
},
axisLabel: {
distance: -20,
color: '#999',
fontSize: 20
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, '-15%'],
fontSize: 60,
fontWeight: 'bolder',
formatter: '{value} °C',
color: 'auto'
},
data: [
{
value: 20
}
]
},
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
itemStyle: {
color: '#FD7347'
},
progress: {
show: true,
width: 8
},
pointer: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
},
data: [
{
value: 20
}
]
}
]
};
charts.setOption( options );
const context = dom.getElementsByTagName( 'canvas' )[ 0 ].getContext( '2d' );
context.clearRect( 0, 0, context.canvas.width, context.canvas.height ); // 初始化一定要清空 直接往上画会卡
return { charts, dom, context, options };
}
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
3️⃣ 'video'类型Panel组件
<video id="video" loop crossOrigin="anonymous" webkit-playsinline style="display:none">
<source src='./assets/textures/sintel.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='./assets/textures/sintel.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
1
2
3
4
2
3
4
import { Panel } from '@tx3d/core';
// 创建实体
const entity = engine.createEntity();
// 播放视频
const video = document.getElementById( 'video' );
video.play();
// 添加Panel组件
const panel = entity.addComponent( Tx3d.Panel, {
type: 'video',
width: 4,
height: 3,
content: video
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
提示
Panel组件初始化参数，详见PanelParameters。
# 属性
🌏 type 类型，只读。
// 获取类型
const type = panel.type;
1
2
2
🌏 content 内容
// 获取内容
const content = panel.content;
// 设置内容
panel.content = '华夏天信';
1
2
3
4
5
2
3
4
5
🌏 billboard 是否启用公告板模式
// 获取是否启用公告板模式
const billboard = panel.billboard;
// 设置是否启用公告板模式
panel.billboard = false;
1
2
3
4
5
2
3
4
5
🌏 sizeAttenuation 是否尺寸衰减
// 获取是否尺寸衰减
const sizeAttenuation = panel.sizeAttenuation;
// 设置是否尺寸衰减
panel.sizeAttenuation = false;
1
2
3
4
5
2
3
4
5
🌏 opacity
// 获取透明度
const opacity = panel.opacity;
// 设置透明度
panel.opacity = 0.75;
1
2
3
4
5
2
3
4
5
🌏 color 混合颜色
// 获取混合颜色
const color = panel.color;
// 设置混合颜色
panel.color = '#ff00ff';
1
2
3
4
5
2
3
4
5
🌏 autoCulling 是否自动遮挡剔除
// 获取是否自动遮挡剔除
const autoCulling = panel.autoCulling;
// 设置是否自动遮挡剔除
panel.autoCulling = true;
1
2
3
4
5
2
3
4
5
🌏 weight 自动遮挡剔除权重
// 获取自动遮挡剔除权重
const weight = panel.weight;
// 获取自动遮挡剔除权重
panel.weight = 1.25;
1
2
3
4
5
2
3
4
5