节点属性

通用属性

属性

属性名含义备注
fill设置用于填充绘画的颜色、渐变或模式对应canvas属性fillStyle
stroke设置用于笔触的颜色、渐变或模式对应canvas属性strokeStyle
shadowColor设置用于阴影的颜色
shadowBlur设置用于阴影的模糊级别数值越大，越模糊
shadowOffsetX设置阴影距形状的水平距离
shadowOffsetY设置阴影距形状的垂直距离
opacity设置绘图的当前 alpha 或透明值对应canvas属性globalAlpha

用法

  1. group.addShape('rect', {
  2.   attrs: {
  3.     fill: 'red',
  4.     shadowOffsetX: 10,
  5.     shadowOffsetY: 10,
  6.     shadowColor: 'blue',
  7.     shadowBlur: 10,
  8.     opacity: 0.8,
  9.   },
  10. });

圆图形 Circle

属性

属性名含义备注
x圆心的 x 坐标
y圆心的 y 坐标
r圆的半径

用法

  1. group.addShape('circle', {
  2.   attrs: {
  3.     x: 100,
  4.     y: 100,
  5.     r: 50,
  6.     fill: 'blue',
  7.   },
  8. });

椭圆图形 Ellipse

属性

属性名含义备注
x圆心的 x 坐标
y圆心的 y 坐标
rx水平半径
ry垂直半径

用法

  1. group.addShape('ellipse', {
  2.   attrs: {
  3.     x: 100,
  4.     y: 100,
  5.     rx: 50,
  6.     ry: 50,
  7.     fill: 'blue',
  8.   },
  9. });

扇形图形 Fan

属性

属性名含义备注
x扇形圆心的 x 坐标
y扇形圆心的 y 坐标
rs水平半径
re垂直半径
startAngle起点弧度弧度是弧度，即使用Math.PI表示
endAngle终点弧度
clockwise为true时顺时针渲染，为false时逆时针渲染

用法

  1. group.addShape('fan', {
  2.   attrs: {
  3.     x: 50,
  4.     y: 50,
  5.     re: 40,
  6.     rs: 30,
  7.     startAngle: (1 / 2) * Math.PI,
  8.     endAngle: Math.PI,
  9.     clockwise: false,
  10.     fill: '#b7eb8f',
  11.   },
  12. });

图片图形 Image

属性

属性名含义备注
x图片左上角的 x 坐标
y图片左上角的 y 坐标
width图片宽度
height图片高度
img图片源G6支持多种格式的图片：- url- ImageData- Image- canvas

用法

  1. group.addShape('image', {
  2.   attrs: {
  3.     x: 0,
  4.     y: 0,
  5.     img:
  6.       'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
  7.   },
  8. });

标记图形 Marker

属性

属性名含义备注
x中心的 x 坐标
y中心的 y 坐标
r形状半径
symbol指定形状内置了一些常用形状，如圆形circle, 矩形 square, 菱形 diamond,三角形 triangle, 倒三角形triangle-down，也可以是自定义的path路径。

用法

  1. group.addShape('marker', {
  2.   attrs: {
  3.     x: 10,
  4.     y: 10,
  5.     r: 10,
  6.     symbol: function(x, y, r) {
  7.       return [
  8.         [ 'M', x, y ],
  9.         [ 'L', x + r, y + r ],
  10.         [ 'L'，x + r * 2, y ],
  11.         [ 'Z' ]
  12.       ]
  13.     }
  14.   }
  15. });

多边形图形 Polygon

属性

属性名含义备注
points多边形的所有端点坐标数组形式

用法

  1. group.addShape('polygon', {
  2.   attrs: {
  3.     points: [
  4.       [30, 30],
  5.       [40, 20],
  6.       [30, 50],
  7.       [60, 100],
  8.     ],
  9.     fill: 'red',
  10.   },
  11. });

矩形图形 Rect

属性

属性名含义备注
x矩形左上角的 x 坐标
y矩形左上角的 y 坐标
width矩形的宽度
height矩形的高度
radius定义圆角支持整数或数组形式， 分别对应左上、右上、右下、左下角的半径：- radius缩写为 1或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]

用法

  1. group.addShape('rect', {
  2.   attrs: {
  3.     x: 150,
  4.     y: 150,
  5.     width: 150,
  6.     height: 150,
  7.     stroke: 'black',
  8.     radius: [2, 4],
  9.   },
  10. });

[ 上一篇

边属性 ]($aa90d26e3e386192.md)[ 下一篇

文本属性 ]($f244fd06713028b3.md)