mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
e08c299a69
* docs: remove readme and navigation in site * docs: remove v4 core concept docs * docs: update history and lod plugin docs * chore: update dumirc config * docs: add api shape overview doc * docs: update manual docs * docs: update manual and tutorial docs * chore: update dumirc * docs: remove design sector * docs: update docs meta data * docs: update api docs
1.3 KiB
1.3 KiB
| title | order |
|---|---|
| 自定义交互 | 3 |
交互是 G6 中的一个重要概念，它是指用户与画布或图形进行交互的过程。G6 内置了一些交互，例如拖拽、缩放、框选、鼠标 hover 等。同时，G6 也支持用户自定义交互。
通过继承 Behavior 类来自定义交互。
import { Behavior } from '@antv/g6';
class CustomBehavior extends Behavior {
// 覆写方法
// 类方法
}
覆写方法
getEvents 必选
类型：() => { [key in string]: string }
获取交互的事件监听器
示例
这里给出一个自定义交互例子，当鼠标双击画布时，将画布内容缩放到合适大小。
import { Graph as BaseGraph, Behavior, extend } from '@antv/g6';
class ClickFitView extends Behavior {
getEvents() {
return {
'canvas:dblclick': this.fitView,
};
}
fitView() {
this.graph.fitView();
}
}
const Graph = extend(BaseGraph, {
behaviors: {
clickFitView: ClickFitView,
},
});
const graph = new Graph({
container: 'container',
width: 500,
height: 500,
// 启用 clickFitView 交互
modes: {
default: ['clickFitView'],
},
});