mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 13:18:40 +08:00
2.3 KiB
2.3 KiB
title | order |
---|---|
Properties of Text | 2 |
Properties
Name | Description | Remark |
---|---|---|
fill | The color or gradient color for filling. | The corresponding property in canvas is fillStyle . |
stroke | The color, gradient color, or pattern for stroke. | The corresponding property in canvas is strokeStyle . |
shadowColor | The color for shadow. | |
shadowBlur | The blur level for shadow. | Larger the value, more blur. |
shadowOffsetX | The horizontal offset of the shadow. | |
shadowOffsetY | The vertical offset of the shadow. | |
opacity | The opacity (alpha value) of the shape. | The corresponding property in canvas is globalAlpha . |
font | The font of the text. | |
textAlign | The align way of the text. | Options: 'center' / 'end' / 'left' / 'right' / 'start' . 'start' by default. |
textBaseline | The base line of the text. | Options: 'top' / 'middle' / 'bottom' / 'alphabetic' / 'hanging' . 'bottom' by default. |
fontStyle | The font style of the text. | The corresponding property in css is font-style |
fontVariant | The font variant of the text. | The corresponding property in css is font-variant |
fontWeight | The font weight of the text. | The corresponding property in css is font-weight |
fontSize | The font size of the text. | The corresponding property in css is font-size |
fontFamily | The font family of the text. | The corresponding property in css is font-family |
autoRotate | Wheter rotate the text according to the edge automatically if it is a label of an edge. |
Case
const data = {
nodes: [
{
id: 'node1',
x: 100,
y: 100,
shape: 'rect',
label: 'rect'
}
]
}
const graph = new G6.Graph({
container: 'mountNode',
width: 500,
height: 500
});
graph.data(data);
graph.render();
const node = graph.findById('node1')
graph.update(node, {
style: {
stroke: 'blue'
},
labelCfg: {
style: {
fill: 'red',
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowColor: 'blue',
shadowBlur: 10
}
}
})
Modify the style of text of node as the code above, and we get the result: