g6/docs/api/Shape.zh.md

title	order
Shape	7

本文介绍的 Shape 相关方法是在自定义节点（registerNode）或自定义边（registerEdge）的过程中需要部分实现或复写的方法。

**友情提示：**以下属性和 API 方法，全部用于自定义节点和边时候使用，即作为 G6.registerNode / G6.registerEdge 的第二个参数中的方法使用。

用法

import G6 from '@antv/g6'
G6.registerNode('nodeName', {
  draw(cfg, group) {
    // 定义的其他方法，都可以在draw里面调用， 如 drawShape、drawLabel 等。
    this.drawShape()
    const labelStyle = this.getLabelStyle(cfg)
    // ...
  },
  drawShape(cfg, group) {
    // 
  },
  getLabelStyle(cfg) {
    // 根据业务返回 label 的样式
    return {}
  },
  update(cfg, item) {
    // 更新绘制的元素

  }
}, 'circle')

属性

itemType

元素类型，目前支持 'node'、'edge'，后续可能会支持 'group'。

labelPosition

文本相对于图形的位置，默认值为 'center'。

• 当 itemType 为 'node' 时，labelPosition 值包括：'top'、'bottom'、'left'、'right' 和 'center'；
• 当 itemType 为 'edge' 时，labelPosition 值包括：'start'、'end' 和 'center'。

labelAutoRotate

只有在 registerEdge 时有用。

文本是否跟着线自动旋转，默认值为 false。

提示：edge特有。

绘制

绘制部分四个 API 的参数完全相同，参数说明部分参考 draw() 方法。

draw(cfg, group)

绘制节点和边，包括节点和边上的文本，返回图形的 keyShape。

参数

名称	类型	是否必选	描述
cfg	Object	true	节点或边的配置项
group	G.Group	true	节点或边的容器

afterDraw(cfg, group)

绘制完成以后的操作，用户可继承现有的节点或边，在 afterDraw() 方法中扩展图形或添加动画。

更新

update(cfg, item)

更新节点或边，包括节点或边上的文本。

参数

名称	类型	是否必选	描述
cfg	Object	true	节点或边的配置项
item	G6.Item	true	节点或边的实例

afterUpdate(cfg, item)

更新完以后的操作，如扩展图形或添加动画。

shouldUpdate(type)

是否允许更新。

参数

名称	类型	是否必选	描述
type	String	true	元素类型，'node' 或 'edge'

返回值

• 返回值类型：Boolean；
• 返回 true，则允许更新，否则不允许更新。

setState(name, value, item)

用于响应外部对元素状态的改变。当外部调用 graph.setItemState(item, state, value) 时，该函数作出相关响应。主要是交互状态，业务状态请在 draw() 方法中实现。单图形的节点仅考虑 'selected' 、'active' 状态，有其他状态需求的用户可以复写该方法。

参数

名称	类型	是否必选	描述
name	String	true	状态名称
value	Boolean	true	状态是否可用，为 true 时可用，否则不可用
item	G6.Item	true	节点或边的实例