文本属性

属性

文本有以下可用的属性。

属性名含义备注
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. };
  12. const graph = new G6.Graph({
  13. container: 'mountNode',
  14. width: 500,
  15. height: 500,
  16. });
  17. graph.data(data);
  18. graph.render();
  19. const node = graph.findById('node1');
  20. graph.update(node, {
  21. style: {
  22. stroke: 'blue',
  23. },
  24. labelCfg: {
  25. style: {
  26. fill: 'red',
  27. shadowOffsetX: 10,
  28. shadowOffsetY: 10,
  29. shadowColor: 'blue',
  30. shadowBlur: 10,
  31. },
  32. },
  33. });

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