g6/docs/api/properties/TextProperties.en.md
2019-12-02 19:58:02 +08:00

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: