图形样式属性 Shape Attr

阅读时间约 7 分钟

图形是组成图上一个元素（节点/边）的基本单位。节点/边的 style 属性即对应了各自 keyShape（关键图形）的图形属性。节点或边上标签 labelCfg 中的 style 属性对应了 text 图形的图形属性。除一些通用属性外，不同图形有各自的特殊属性。

group.addShape('rect', {
  attrs: {
    fill: 'red',
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowColor: 'blue',
    shadowBlur: 10,
    opacity: 0.8,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'rect-shape',
});

G6 支持以下图形：

circle：圆；
rect：矩形；
ellipse：椭圆；
polygon：多边形；
image：图片；
marker：标记；
path：路径；
text：文本；
dom(svg)：DOM（图渲染方式 renderer 为 'svg' 时可用）。

通用属性

name

String required

图形名称标识，G6 3.3 版本以上必须配置。

fill

String optional

设置用于填充绘画的颜色(RGB 或 16 进制)、渐变或模式，对应 Canvas 属性 fillStyle 。取值示例：rgb(18, 150, 231)，#c193af，l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff， r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff。

stroke

String optional

设置用于笔触的颜色(RGB 或 16 进制)、渐变或模式，对应 Canvas 属性 strokeStyle。取值示例：rgb(18, 150, 231)，#c193af，l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff， r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff。

lineWidth

Number optional

描边宽度。

lineDash

Number | Number[] optional

描边虚线，Number[] 类型中数组元素分别代表实、虚长度。

shadowColor

String optional

设置用于阴影的颜色。

shadowBlur

Number optional

设置用于阴影的模糊级别，数值越大，越模糊。

shadowOffsetX

Number optional

设置阴影距形状的水平距离。

shadowOffsetY

Number optional

设置阴影距形状的垂直距离。

opacity

Number optional

设置绘图的当前 alpha 或透明值，范围 [0, 1]，对应 Canvas 属性 globalAlpha。

fillOpacity

Number optional

设置填充的 alpha 或透明值，优先级高于 opacity，范围 [0, 1]。

strokeOpacity

Number optional

设置描边的 alpha 或透明值，优先级高于 opacity，范围 [0, 1]。

cursor

String optional

鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持。

圆图形 Circle

group.addShape('circle', {
  attrs: {
    x: 100,
    y: 100,
    r: 50,
    fill: 'blue',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'circle-shape',
});

x

Number optional

圆心的 x 坐标。

y

Number optional

圆心的 y 坐标。

r

Number optional

圆的半径。

椭圆图形 Ellipse

group.addShape('ellipse', {
  attrs: {
    x: 100,
    y: 100,
    rx: 50,
    ry: 50,
    fill: 'blue',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'ellipse-shape',
});

x

Number optional

圆心的 x 坐标。

y

Number optional

圆心的 y 坐标。

rx

Number optional

水平半径。

ry

Number optional

垂直半径。

图片图形 Image

group.addShape('image', {
  attrs: {
    x: 0,
    y: 0,
    img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'image-shape',
});

x

Number optional

图片左上角的 x 坐标。

y

Number optional

图片左上角的 y 坐标。

width

Number optional

图片宽度。

height

Number optional

图片高度。

img

String optional

图片源，G6 支持多种格式的图片：url，ImageData，Image，canvas。

标记图形 Marker

// 使用内置 symbol
group.addShape('marker', {
  attrs: {
    x: 10,
    y: 10,
    r: 10,
    symbol: 'triangle-down',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'marker-shape',
});

// 使用路径自定义 symbol
group.addShape('marker', {
  attrs: {
    x: 10,
    y: 10,
    r: 10,
    symbol: function (x, y, r) {
      return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']];
    },
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'marker-shape',
});

x

Number optional

标记图形左上角的 x 坐标。

y

Number optional

标记图形左上角的 y 坐标。

r

Number optional

形状半径。

symbol

String | Function optional

指定形状。我们已经内置了一些常用形状，如圆形 'circle'，矩形 'square'，菱形 'diamond'，三角形 'triangle'，倒三角形 'triangle-down'，这些内置形状只需要直接将响应 String 赋值给 symbol。也可以是自定义的 path 路径的函数。

多边形图形 Polygon

points

group.addShape('polygon', {
  attrs: {
    points: [
      [30, 30],
      [40, 20],
      [30, 50],
      [60, 100],
    ],
    fill: 'red',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'polygon-shape',
});

points

Array optional

多边形的所有端点坐标。

矩形图形 Rect

group.addShape('rect', {
  attrs: {
    x: 150,
    y: 150,
    width: 150,
    height: 150,
    stroke: 'black',
    radius: [2, 4],
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'rect-shape',
});

x

Number optional

矩形左上角的 x 坐标。

y

Number optional

矩形左上角的 y 坐标。

width

Number optional

矩形的宽度。

height

Number optional

矩形的高度。

radius

Number | Number[] optional

定义圆角。支持整数或数组形式，分别对应左上、右上、右下、左下角的半径：
- radius 缩写为 1 或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
。

线条 Path

⚠️ 注意: 当边太细交互不易命中时，请设置 lineAppendWidth 属性值。

group.addShape('path', {
  attrs: {
    startArrow: {
      // 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
      path: 'M 0,0 L 20,10 L 20,-10 Z',
      // 箭头的偏移量，负值代表向 x 轴正方向移动
      // d: -10,
    },
    endArrow: {
      // 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
      path: 'M 0,0 L 20,10 L 20,-10 Z',
      // 箭头的偏移量，负值代表向 x 轴正方向移动
      // d: -10,
    },
    path: [
      ['M', 100, 100],
      ['L', 200, 200],
    ],
    stroke: '#000',
    lineWidth: 8,
    lineAppendWidth: 5,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'path-shape',
});

path

String | Array optional

线条路径，可以是 String 形式，也可以是线段的数组。格式参考：SVG path。

startArrow

Boolean | Object optional

起始端的箭头，为 true 时为默认的箭头效果，也可以是一个自定义箭头。

endArrow

Boolean | Object optional

末尾端的箭头，为 true 时为默认的箭头效果，也可以是一个自定义箭头。

lineAppendWidth

Number optional

边的击中范围。提升边的击中范围，扩展响应范围，数值越大，响应范围越广。

lineCap

String optional

设置线条的结束端点样式。可选：
- 'bevel': 斜角
- 'round': 圆角
- 'miter': 尖角 (默认)。

lineJoin

String optional

设置两条线相交时，所创建的拐角形状。可选：
- 'bevel': 斜角
- 'round': 圆角
- 'miter': 尖角 (默认)。

lineWidth

Number optional

设置当前的线条宽度。

miterLimit

Number optional

设置最大斜接长度。

lineDash

Number | Number[] optional

设置线的虚线样式，可以指定一个数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。可参考setLineDash。

文本 Text

group.addShape('text', {
  attrs: {
    text: 'test text',
    fill: 'red',
    fontWeight: 400,
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowColor: 'blue',
    shadowBlur: 10,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you wantPath
  name: 'text-shape',
});

textAlign

String optional

设置文本内容的当前对齐方式。支持的属性：center / end / left / right / start，默认值为 start。

textBaseline

String optional

设置在绘制文本时使用的当前文本基线。支持的属性:
top / middle / bottom / alphabetic / hanging。默认值为 bottom。

fontStyle

String optional

字体样式。对应 font-style。

fontVariant

String optional

设置为小型大写字母字体。对应 font-variant。

fontWeight

Number optional

字体粗细。对应 font-weight。

fontFamily

String optional

字体系列。对应 font-family。

lineHeight

Number optional

行高。对应 line-height。

DOM (svg)

仅在 Graph 的 renderer 为 'svg' 时可以使用。

⚠️ 注意:

只支持原生 HTML DOM，不支持各类 react、vue 组件；
使用 'dom' 进行自定义的节点或边，不支持 G6 的交互事件，请使用原生 DOM 的交互事件。

group.addShape('dom', {
  attrs: {
    width: cfg.size[0],
    height: cfg.size[1],
    // DOM's html
    html: `
    <div style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${
      cfg.size[0] - 5
    }px; height: ${cfg.size[1] - 5}px; display: flex;">
      <div style="height: 100%; width: 33%; background-color: #CDDDFD">
        <img alt="img" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />  
      </div>
      <span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
    </div>
      `,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'dom-shape',
  draggable: true,
});

html

String optional

DOM 的 HTML 值。

G2可视化引擎

F2移动可视化方案

G6图可视化引擎

X6图编辑引擎

L7地理空间数据可视化

G2Plot开箱即用的图表库

F2Native移动可视化方案

Graphin

AVA

ChartCube图表魔方

墨者学院

BizCharts

Viser

图形样式属性 Shape Attr

通用属性

name

fill

stroke

lineWidth

lineDash

shadowColor

shadowBlur

shadowOffsetX

shadowOffsetY

opacity

fillOpacity

strokeOpacity

cursor

圆图形 Circle

x

y

r

椭圆图形 Ellipse

x

y

rx

ry

图片图形 Image

x

y

width

height

img

标记图形 Marker

x

y

r

symbol

多边形图形 Polygon

points

points

矩形图形 Rect

x

y

width

height

radius

线条 Path

path

startArrow

endArrow

lineAppendWidth

lineCap

lineJoin

lineWidth

miterLimit

lineDash

文本 Text

textAlign

textBaseline

fontStyle

fontVariant

fontWeight

fontSize

fontFamily

lineHeight

DOM (svg)

html