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

3.7 KiB

title order
Attributes of Text 2

Attributes

文本有以下可用的属性。

Name Description Remark
<<<<<<< HEAD
fill 设置用于填充绘画的颜色、渐变或模式 对应 canvas 属性 fillStyle
stroke 设置用于笔触的颜色、渐变或模式 对应 canvas 属性 strokeStyle
shadowColor 设置用于阴影的颜色
shadowBlur 设置用于阴影的模糊级别 数值越大,越模糊
shadowOffsetX 设置阴影距形状的水平距离
shadowOffsetY 设置阴影距形状的垂直距离
opacity 设置绘图的当前 alpha 或透明值 对应 canvas 属性 globalAlpha
font 设置文本内容的当前字体属性
textAlign 设置文本内容的当前对齐方式 支持的属性:'center' / 'end' / 'left' / 'right' / 'start',默认值为 'start'
textBaseline 设置在绘制文本时使用的当前文本基线 支持的属性:
'top' / 'middle' / 'bottom' / 'alphabetic' / 'hanging'。默认值为'bottom'
fontStyle 字体样式 对应 font-style
fontVariant 设置为小型大写字母字体 对应 font-variant
fontWeight 字体粗细 对应 font-weight
fontSize 字体大小 对应 font-size
fontFamily 字体系列 对应 font-family
autoRotate 是否自动旋转

======= | fill | The color or gradient color for filling. | The corresponding attribute in canvas is fillStyle. | | stroke | The color, gradient color, or pattern for stroke. | The corresponding attribute 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 attribute 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 attribute in css is font-style | | fontVariant | The font variant of the text. | The corresponding attribute in css is font-variant | | fontWeight | The font weight of the text. | The corresponding attribute in css is font-weight | | fontSize | The font size of the text. | The corresponding attribute in css is font-size | | fontFamily | The font family of the text. | The corresponding attribute in css is font-family | | autoRotate | Wheter rotate according to the edge automatically. | |

feat: english version of API

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
    }
  }
})

<<<<<<< HEAD 通过以上代码修改 node 中文本的样式,效果如下图:

Modify the style of text of node as the code above, and we get the result:

feat: english version of API