文本属性

文本属性

文本有以下可用的属性。

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

案例

  1. const data = {
  2.   nodes: [
  3.     {
  4.       id: 'node1',
  5.       x: 100,
  6.       y: 100,
  7.       shape: 'rect',
  8.       label: 'rect',
  9.     },
  10.   ],
  11. };
  13. const graph = new G6.Graph({
  14.   container: 'mountNode',
  15.   width: 500,
  16.   height: 500,
  17. });
  18. graph.data(data);
  19. graph.render();
  21. const node = graph.findById('node1');
  22. graph.update(node, {
  23.   style: {
  24.     stroke: 'blue',
  25.   },
  26.   labelCfg: {
  27.     style: {
  28.       fill: 'red',
  29.       shadowOffsetX: 10,
  30.       shadowOffsetY: 10,
  31.       shadowColor: 'blue',
  32.       shadowBlur: 10,
  33.     },
  34.   },
  35. });

通过以上代码修改node中文本的样式，效果如下图： 文本属性 - 图1