# Paint组件
使用Paint组件可以为实体添加自定义面板组件。当前'rect'、'text'、'image'、'apng'四种类型定义面板，由 @tx3d/extension 包提供。
import { VerticalOrigin, HorizontalOrigin } from '@tx3d/core';
import { Paint } from '@tx3d/extension';
// 加载json文件
const dataJson = await loadJson( '../assets/jsons/panel/style空压机系统.json' );
// 创建一个空实体
const entity = engine.createEntity();
const parameters = {
content: dataJson,
height: 4 * 15,
billboard: false,
verticalOrigin: VerticalOrigin.BOTTOM,
horizontalOrigin: HorizontalOrigin.CENTER,
}
// 添加Paint组件
const paint = entity.addComponent(Paint, parameters);
paint.position = [10,0,0]; //设置面板位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
提示
Paint组件初始化参数，详见PaintParameters。
关于面板的大小说明
面板可以通过 width和height属性设置大小
当sizeAttenuation等于false的时候，width和height的单位是三维空间中的单位量，通常是米。
当sizeAttenuation等于true并且billboard等于ture的时候，width和height的单位是像素。
当sizeAttenuation等于true并且billboard等于false的时候，width和height代表的是 当相机在距离面板1米的时候 面板有多少米的宽高。
# 属性
🌏 opacity 透明度
// 获取透明度
const opacity = paint.opacity;
// 设置透明度
paint.opacity = 0.75;
1
2
3
4
5
2
3
4
5
🌏 autoCulling 是否自动遮挡剔除
// 获取是否自动遮挡剔除
const autoCulling = paint.autoCulling;
// 设置是否自动遮挡剔除
paint.autoCulling = true;
1
2
3
4
5
2
3
4
5
🌏 weight 自动遮挡剔除权重
// 获取自动遮挡剔除权重
const weight = paint.weight;
// 获取自动遮挡剔除权重
paint.weight = 1.25;
1
2
3
4
5
2
3
4
5
# 接口
🌏 updateContent 更换面板的配置
paint.updateContent(json);
1
🌏 updateElements 更新面板上的元素
// 定时更新面板
setInterval( () => {
paint.updateElements( {
"用电量": { "text": (Math.random() * 1000).toFixed(2) },
"供暖量": { "text": (Math.random() * 1000).toFixed(2) },
"通风量": { "text": (Math.random() * 1000).toFixed(2) },
"甲烷指数": { "text": (Math.random() * 1000).toFixed(2) }
} );
}, 1000 );
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
🌏 addElementListener 给面板上的某个元素添加鼠标事件
// 给元素名为 空压机图片2 的元素 添加鼠标点击事件
panel.addElementListener( "click", "空压机图片2", intersection => {
intersection // 代表是否点击到
} );
1
2
3
4
2
3
4
# 配置文件示例
const config = {
"width": 647, // canvas图片的宽度
"height": 512, // canvas图片的高度
"anchor":[647/2,512/2] // 设置锚点
// 预处理（生成canvas图片之前的处理）
"preprocessing": [ {
"type": "fontFamily", // 预处理类型 字体
"fontName": "DS-DIGIB", // 字体名称
"fontUrl": "./assets/fonts/DS-DIGIB.TTF" // 字体的资源路径
} ],
// comps是组成面板的元素数组
"comps": [ {
"type": "image", // 类型为图片的元素
"url": "assets/textures/panel/bg1.png", // 图片的资源路径 资源可以是 JPG PNG SVG
"position": [ 0, 0 ], // 位置 X Y 起始点为左上角
// 以下属性是可选属性 一般可以不写
// "width": 75, // 可以不写 不写的话 用的就是图片自身的宽高
// "height": 450, // 可以不写 不写的话 用的就是图片自身的宽高
// "renderWidth": 75, // image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
// "renderHeight": 450, // image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
// "sPosition": [0, 0], // 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
// "sourceWidth": 75, // 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
// "sourceHeight": 450, // 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
// 以下属性也是可选属性 并且是所有元素都可以配置的属性
"name": "用电量", // 元素的名称 用来以后更新元素的内容 （如果不需要改变 可以不用写这行）
"alpha": 1, // 透明度
"rotate": Math.PI, // 旋转（弧度）
"scale": [2, 2], // xy轴缩放
"translate": [10, 10], // 在原来的位置上偏移
"transformCenter": [10, 10],// 旋转缩放 的中心点 0 0 代表组件自身的左上角
},{
"type": "text", // 类型为文字的元素
"text": "888.88", // 文字内容
"color": "rgb(210,168,255)", // 文字颜色0
"font": "48px DS-DIGIB", // 文字大小和字体
"textAlign": "center", // 文本水平对齐方式 默认居中 允许的值： start, end, left, right 或 center (默认).
"textBaseline": "middle", // 文本垂直对齐方式 默认居中 允许的值： top, hanging, middle(默认), alphabetic,ideographic, bottom.
"position": [321, 90] // 文字的位置 文字默认是居中的 这个位置代表中心点位置
},{
"type": "rect", // 类型为矩形
"color": "rgb(84,112,198)", // 矩形填充颜色
"borderColor": "#979797", // 矩形描边颜色
"width": 75, // 矩形宽度
"height": 450, // 矩形高度
"position": [700, 145] // 矩形起始位置 左上角
},{
"type": "apng", // 类型为apng
"url": "assets/textures/panel/thingjs/apng.png",
"position": [ 480, 250 ], // 位置 X Y 起始点为左上角
// "width": 75, // 可以不写 不写的话 用的就是图片自身的宽高
// "height": 450, // 可以不写 不写的话 用的就是图片自身的宽高
} ]
}
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
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
# 配置文件说明
width和height配置说明
| 字段名 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| width | 数字 | 必填 | canvas图片的宽度 |
| height | 数字 | 必填 | canvas图片的宽度 |
{
"width": 647, //canvas图片的宽度
"height": 512, //canvas图片的高度
}
1
2
3
4
2
3
4
anchor配置说明
| 字段名 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| anchor | 数组 2个值（XY坐标） | 必填 | 锚点在canvas中的位置 |
{
"anchor": [647/2, 512/2], // 锚点在canvas中的位置 起点是左上角 单位是像素
}
1
2
3
2
3
preprocessing配置说明
| 字段名 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 字符串 | 必填 | 预处理类型 目前支持 fontFamily |
| fontName | 字符串 | 必填 | 字体名称 自定义 用的时候写上自定义名称 |
| fontUrl | 字符串 | 必填 | 字体的资源路径 ttf类型 |
{
//预处理（生成canvas图片之前的处理）
"preprocessing": [ {
"type": "fontFamily", // 预处理类型 字体
"fontName": "DS-DIGIB", // 字体名称
"fontUrl": "./assets/fonts/DS-DIGIB.TTF" // 字体的资源路径
} ]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
提示
preprocessing是用来配置预处理信息 例如提前加载所需要的字体(目前只有字体处理)。 这个配置可选，可以不填。
comps配置说明
{
"comps": [ {
......
},{
......
},{
......
} ]
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
提示
comps是一个数组，里面包含了组成面板的元素。当前支持'rect'、'text'、'image'、'apng'四种类型。
公共字段配置说明
| 字段名 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| position | 数组 2个值（XY坐标） | 必填 | 元素在面板中的相对位置 起始点是左上角 |
| name | 字符串 | 可选 | 元素的名称 用于后续修改元素其他字段 如果不需要修改元素 可不配置 |
| alpha | 数字 | 可选 | 元素的透明度 |
| translate | 数组 2个值（XY坐标） | 可选 | 元素的平移 在原来的位置上做平移 |
| rotate | 弧度 | 可选 | 元素的旋转 正值顺时针 负值逆时针 |
| scale | 数组 2个值（XY轴缩放值） | 可选 | 元素的xy轴缩放 |
| transformCenter | 数组 2个值（XY坐标） | 可选 | 旋转缩放的中心点 起始点是组件自身的左上角 |
{
"position": [ 0, 0 ], // 位置 X Y 起始点为左上角
"name": "用电量", // 元素的名称 用来以后更新元素的内容 （如果不需要改变 可以不用写这行）
"alpha": 1, // 透明度
"rotate": Math.PI, // 旋转（弧度）
"scale": [ 2, 2 ], // xy轴缩放
"translate": [ 10, 10 ], // 在原来的位置上偏移
"transformCenter": [ 10, 10 ], // 旋转缩放 的中心点 0 0 代表组件自身的左上角
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
提示
公共字段是'rect'、'text'、'image'、'apng'的通用配置的字段
图片元素配置说明
| 字段名 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 字符串 | 必填 | 类型 这里是 image |
| position | 数组 2个值（XY坐标） | 必填 | 元素在canvas中的位置 |
| url | 字符串 | 必填 | 图片的资源路径 资源可以是 JPG PNG SVG |
| width | 数字 | 可选 | 自定义图片宽度 默认是图片自身的宽度 |
| height | 数字 | 可选 | 自定义图片高度 默认是图片自身的高度 |
| renderWidth | 数字 | 可选 | image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。 |
| renderHeight | 数字 | 可选 | image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。 |
| position | 数组 2个值（XY坐标） | 可选 | 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。 |
| sourceWidth | 数字 | 可选 | 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。 |
| sourceHeight | 数字 | 可选 | 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。 |
{
"type": "image", // 类型为图片的元素
"position": [ 0, 0 ], // 位置 X Y 起始点为左上角
"url": "assets/textures/panel/bg1.png", // 图片的资源路径 资源可以是 JPG PNG SVG
// 以下属性是可选属性 一般可以不写
// "width": 75, // 可以不写 不写的话 用的就是图片自身的宽高
// "height": 450, // 可以不写 不写的话 用的就是图片自身的宽高
// "renderWidth": 75, // image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
// "renderHeight": 450, // image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
// "sPosition": [0, 0], // 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
// "sourceWidth": 75, // 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
// "sourceHeight": 450, // 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
文字元素配置说明
| 字段名 | 参数类型 | 默 认 值 | 说明 |
|---|---|---|---|
| type | 字符串 | 必填 | 类型 这里是 text |
| position | 数组 2个值（XY坐标） | 必填 | 元素在canvas中的位置 |
| text | 字符串 | 必填 | 文本内容 |
| color | 字符串 | 必填 | 文本颜色 |
| font | 字符串 | 必填 | 字体大小和类型 |
| textAlign | 字符串 | 可选 | 文本水平对齐方式 默认居中 允许的值： start, end, left, right 或 center (默认). |
| textBaseline | 字符串 | 可选 | 文本垂直对齐方式 默认居中 允许的值： top, hanging, middle(默认), alphabetic,ideographic, bottom. |
{
"type": "text", // 类型为文字的元素
"text": "888.88", // 文字内容
"color": "rgb(210,168,255)", // 文字颜色0
"font": "48px DS-DIGIB", // 文字大小和字体
"textAlign": "center", // 文本水平对齐方式 默认居中 允许的值： start, end, left, right 或 center (默认).
"textBaseline": "middle", // 文本垂直对齐方式 默认居中 允许的值： top, hanging, middle(默认), alphabetic,ideographic, bottom.
"position": [ 321, 90 ] // 文字的位置 文字默认是居中的 这个位置代表中心点位置
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
矩形元素配置说明
| 字段名 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 字符串 | 必填 | 类型 这里是 rect |
| position | 数组 2个值（XY坐标） | 必填 | 元素在canvas中的位置 |
| color | 字符串 | 必填 | 矩形颜色 |
| borderColor | 字符串 | 必填 | 矩形边框颜色 |
| width | 数字 | 必填 | 矩形宽度 |
| height | 数字 | 必填 | 矩形高度 |
{
"type": "rect", // 类型为矩形
"color": "rgb(84,112,198)", // 矩形填充颜色
"borderColor": "#979797", // 矩形描边颜色
"width": 75, // 矩形宽度
"height": 450, // 矩形高度
"position": [ 700, 145 ] // 矩形起始位置 左上角
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
APNG元素配置说明
| 字段名 | 参数类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 字符串 | 必填 | 类型 这里是 apng |
| url | 字符串 | 必填 | 资源路径 |
| width | 数字 | 可选 | 宽度 |
| height | 数字 | 可选 | 高度 |
{
"type": "apng", // 类型为apng
"url": "assets/textures/panel/thingjs/apng.png",
"position": [ 480, 250 ], // 位置 X Y 起始点为左上角
// "width": 75, // 可以不写 不写的话 用的就是图片自身的宽高
// "height": 450, // 可以不写 不写的话 用的就是图片自身的宽高
}
1
2
3
4
5
6
7
2
3
4
5
6
7