如图 我添加了一个矩形 然后在矩形里面设置了label 然后我又添加了一个黄色框框并且定位x，y在右上方了 要在黄色框框里面显示文字 但是怎么配置都不行呀 我配置了label 也不行
G6.registerNode(
'nodeName',
{
/**
* 绘制节点，包含文本
* @param {Object} cfg 节点的配置项
* @param {G.Group} group 图形分组，节点中图形对象的容器
* @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
* 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
*/
draw (cfg, group) {
console.log('cfg', cfg.label == '第二')
if (cfg.id == '1-4-4') {
const keyShape = group.addShape('path', {
attrs: {
path: [['M', 60, -16], ['L', 60, 17], ['L', -60, 17], ['L', -60, -16], ['Z']],
stroke: '#fff', // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
// 节点填充色
fill: '#f2f2f2',
radius: 4,
cursor: 'pointer'
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
name: 'path-shape',
// 设置 draggable 以允许响应鼠标的图拽事件
draggable: true
})
const label = group.addShape('text', {
attrs: {
x: 0, // 居中
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: '#535D79',
fontSize: 14
},
name: 'text-shape',
draggable: true
})
return keyShape
}
if (cfg.id == '1') {
return {
labelCfg: {
style: {
fill: '#fff',
opacity: 0
}
},
type: 'diamond',
size: [50, 50],
style: {
fill: '#fd9b30',
border: '10px solid red',
stroke: '#fec88d',
lineWidth: 5
}
}
}
const keyShape = group.addShape('path', {
attrs: {
path: [['M', 60, -16], ['L', 60, 17], ['L', -60, 17], ['L', -60, -16], ['Z']],
stroke: '#008aeb', // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
// 节点填充色
fill: '#fff',
radius: 4,
cursor: 'pointer'
},
name: 'path-shape',
// 设置 draggable 以允许响应鼠标的图拽事件
draggable: true
})
// group.addShape('rect', {
// attrs: {
// stroke: '#008aeb', // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
// // 节点填充色
// fill: '#fff',
// width: 120,
// height: 34,
// radius: 4,
// cursor: 'pointer'
// },
// // must be assigned in G6 3.3 and later versions. it can be any value you want
// name: 'path-shape',
// // 设置 draggable 以允许响应鼠标的图拽事件
// draggable: true
// })
group.addShape('rect', {
attrs: {
fill: '#fff849',
width: 10,
height: 10,
x: 45,
y: -20,
shadowColor: '#000',
shadowBlur: 1,
// radius: 7.5,
cursor: 'pointer',
label: '1',
labelCfg: {
style: {
fill: '#666',
fontSize: 14
}
}
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
name: 'path-shape',
// 设置 draggable 以允许响应鼠标的图拽事件
draggable: true
})
if (cfg.label) {
// 如果有文本
// 如果需要复杂的文本配置项，可以通过 labeCfg 传入
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}
style.text = cfg.label
group.addShape('text', {
attrs: {
x: 0, // 居中
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
// 文本颜色
fill: '#535D79',
// 文本字体大小
fontSize: 14
},
name: 'text-shape',
draggable: true
})
}
return keyShape
}
},
// 继承内置节点类型的名字，例如基类 'single-node'，或 'circle', 'rect' 等
// 当不指定该参数则代表不继承任何内置节点类型
'single-node'
)
