mirror of
https://gitee.com/antv/g6.git
synced 2024-12-10 07:38:18 +08:00
107 lines
3.2 KiB
Markdown
107 lines
3.2 KiB
Markdown
---
|
||
title: Shape
|
||
order: 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)`](/zh/docs/api/Graph/#setitemstateitem-state-enabled) 时，该函数作出相关响应。主要是交互状态，业务状态请在 `draw()` 方法中实现。单图形的节点仅考虑 `'selected'` 、`'active'` 状态，有其他状态需求的用户可以复写该方法。
|
||
|
||
**参数**
|
||
|
||
| 名称 | 类型 | 是否必选 | 描述 |
|
||
| --- | --- | --- | --- |
|
||
| name | String | true | 状态名称 |
|
||
| value | Boolean | true | 状态是否可用，为 `true` 时可用，否则不可用 |
|
||
| item | G6.Item | true | 节点或边的实例 |
|