{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-521b2f925d4d7910a117e677405d72a8-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

文本属性

\n

文本有以下可用的属性。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
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是否自动旋转
\n

案例

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 100,\n      y: 100,\n      shape: 'rect',\n      label: 'rect',\n    },\n  ],\n};\n\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n});\ngraph.data(data);\ngraph.render();\n\nconst node = graph.findById('node1');\ngraph.update(node, {\n  style: {\n    stroke: 'blue',\n  },\n  labelCfg: {\n    style: {\n      fill: 'red',\n      shadowOffsetX: 10,\n      shadowOffsetY: 10,\n      shadowColor: 'blue',\n      shadowBlur: 10,\n    },\n  },\n});\n
\n

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

\n

\"image.png\"

"}