节点属性

    用法

    圆图形 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. });

    属性

    用法

    扇形图形 Fan

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

    用法

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

    属性

    用法

    标记图形 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) {
    8.         [ 'L', x + r, y + r ],
    9.         [ 'L'，x + r * 2, y ],
    10.         [ 'Z' ]
    11.       ]
    12.     }
    13.   }
    14. });

    用法

    矩形图形 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.   },

    [ 上一篇

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