在AntV G6中,可以通过在stateStyles中进行配置来指定不同状态下的labelCfg。我们可以为每个状态指定一个不同的labelCfg设置,从而为每个状态下的元素提供不同的文本显示效果。例如,可以通过以下方式为选中状态的节点添加红色字体并加粗处理:
const node = graph.addItem('node', {
id: 'node1',
label: 'AntV G6',
x: 100,
y: 100
});
const stateStyles = {
selected: {
labelCfg: {
style: {
fill: '#f00',
fontWeight: 'bold'
}
}
}
};
graph.setStateStyles(stateStyles);
graph.on('node:click', (event) => {
graph.setItemState(node, 'selected', true);
});
通过上述代码,当用户点击节点时,节点的状态将变为selected,文本的颜色和样式也将随之变化。需要注意的是,在为元素添加状态时,需要先使用addItem方法添加元素,并将返回值保存到一个变量中,以便稍后在setItemState方法中使用。此外,在设置labelCfg时,也可以使用更多的属性来配置文本的显示效果,比如fontSize、textBaseline、textAlign等属性。