标签,自定义dom标签

参数说明:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args |
object | 参数 Properties
|
|||||||||||||||||||||||||||||||||||||||||||||
parameters.fadeIn |
boolean | 是否开启显隐渐变,默认true |
|||||||||||||||||||||||||||||||||||||||||||||
args.openCollision |
boolean | 是否开启屏幕空间碰撞检测,默认false |
|||||||||||||||||||||||||||||||||||||||||||||
args.faceType |
number | icon的面向方向,基于场景空间渲染时有效,0不面向摄像机,1完全面向摄像机,2y轴面向摄像机,3z轴面向摄像机, 默认1 |
|||||||||||||||||||||||||||||||||||||||||||||
args.switchScale |
boolean | icon是否根据距离动态缩放,基于场景空间渲染时有效,默认false |
|||||||||||||||||||||||||||||||||||||||||||||
args.minScale |
number | icon触发动态缩放后,摄像机与icon距离等于minDistance时的缩放比例,基于场景空间渲染时有效,默认0 |
|||||||||||||||||||||||||||||||||||||||||||||
args.maxScale |
number | icon触发动态缩放后,摄像机与icon距离等于maxDistance时的缩放比例,基于场景空间渲染时有效,默认0 |
|||||||||||||||||||||||||||||||||||||||||||||
args.renderNum |
number | 每帧渲染的shape数量,默认10,代表每一帧会渲染10个点位,如果点位太多,会导致渲染性能问题,如果超过20个,则自动启用分帧渲染 |
示例代码
const label = new BasicLabel({
renderScale: 2, // 标签的缩放比例,主要用来提高文字的分辨率,避免模糊
sizeAttenuation: true, // 是否开启大小固定,区分像素大小和空间大小
center: { x: 0, y: 0 }, // 标签的中心点
// 画布样式
style: {
// 宽
width: 200,
// 高
height: 100,
// 背景图
// backgroundImage: 'https://mapdata.bj.bcebos.com/images/guangzhou/q-robocop-info-mini@3x.png',
// 上内边距
paddingTop: 42,
// 左内边距
paddingLeft: 42,
// 背景颜色
backgroundColor: '#333',
// 边框颜色
borderColor: '#fff',
// 边框宽度
borderWidth: 2
},
content: [
// 内容配置
{
// 宽
width: 30,
// 高
height: 30,
// 背景色
backgroundColor: 'green',
// 文字列表
textList: [
{
text: '测试',
fontSize: 12,
color: '#E2EBFA',
position: [8, 3],
textAlign: 'left',
fontFamily: 'FZLTZHK--GBK1-0'
},
{
text: '123',
fontSize: 12,
color: '#E2EBFA',
position: [8, 20],
textAlign: 'left',
fontFamily: 'HyperspaceRace-Bold'
}
]
},
{
// 宽
width: 30,
// 高
height: 30,
// 背景图
backgroundImage: 'https://mapdata.bj.bcebos.com/images/yizhuang/cross-circle.png',
// 右侧空白
marginRight: 2,
// 底侧空白
marginBottom:2,
// 外边框圆弧半径
borderRadius: 4,
// 外边框颜色
borderColor:'#ff0000',
// 外边框宽度
borderWidth:2,
// 背景颜色
backgroundColor:'#333',,
// 起始位置
position:[4,4],
// 文字列表
textList: [
{
// iconfont编号
icon: '',
fontSize: 12,
color: '#E2EBFA',
position: [8, 3],
textAlign: 'left',
// iconfont字体
fontFamily: 'NewIconFont'
}
]
},
]
});
父类
- Object3D
方法
dispose()
内存释放
(async) drawContent(contextList)
重新绘制标签内容
参数说明:
Name | Type | Description |
---|---|---|
contextList |
updateContent(args)
更新标签内容
参数说明:
Name | Type | Description |
---|---|---|
args |
参数对象 |
(static) roundRect(ctx, x, y, w, h, r)
利用canvas绘制矩形框
参数说明:
Name | Type | Description |
---|---|---|
ctx |
Object | canvasContainer |
x |
number | 左侧开始位置 |
y |
number | 上侧开始位置 |
w |
number | 宽度 |
h |
number | 高度 |
r |
number | 圆角半径 |
class: BasicLabel