用法

import React from 'react';
import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
const data = Utils.mock(10)
.random()
.graphin();
const { DragCanvas, ZoomCanvas, DragNode, ActivateRelations } = Behaviors;
export default () => {
return (
<div>
<Graphin data={data}>
<ZoomCanvas enableOptimize />
<DragNode />
<ActivateRelations trigger="click" />
</Graphin>
</div>
);
};

DragCanvas 拖拽画布

API

属性名描述类型默认值
direction允许拖拽方向,支持'x','y','both',默认方向为 'both';string--
enableOptimize是否开启优化,开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分,默认关闭;boolean--
scalableRangedrag-canvas 可拖动的扩展范围,默认为 0,即最多可以拖动一屏的位置 当设置的值大于 0 时,即拖动可以超过一屏 当设置的值小于 0 时,相当于缩小了可拖动范围 具体实例可参考:https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IFfoS67_HssAAAAAAAAAAAAAARQnAQnumber--
shouldBegin是否允许触发该操作;() => boolean--
disabled是否禁用该功能boolean--

ZoomCanvas 缩放画布

API

属性名描述类型默认值
sensitivity缩放灵敏度,支持 1-10 的数值,默认灵敏度为 5;number--
minZoom最小缩放比例any--
maxZoom最大缩放比例any--
enableOptimize是否开启性能优化,默认为 false,设置为 true 开启,开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShapeboolean--
optimizeZoom当 enableOptimize 为 true 时起作用,默认值为 0.7,表示当缩放到哪个比例时开始隐藏非 keyShape;number--
fixSelectedItems在缩小画布时是否固定选定元素的描边粗细、文本大小、整体大小等,fixSelectedItems 是一个对象,有以下变量:{ fixAll: boolean; fixLineWidth: boolean; fixLabel: boolean; fixState: string; }--
disabled是否禁用该功能boolean--
animate--boolean--
animateCfg--{ duration: number; }--

BrushSelect 圈选画布

API

属性名描述类型默认值
disabled是否禁用该功能boolean--
brushStyle拖动框选框的样式,包括 fill、fillOpacity、stroke 和 lineWidth 四个属性;{ fill: string; fillOpacity: number; stroke: string; lineWidth: number; }--
onSelect选中节点时的回调,参数 nodes 表示选中的节点;() => void--
onDeselect取消选中节点时的回调,参数 nodes 表示取消选中的节点;() => void--
selectedState选中的状态,默认值为 'selected'string--
trigger触发框选的动作,默认为 'shift',即用户按住 Shift 键拖动就可以进行框选操作,可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ,不区分大小写string--
includeEdges框选过程中是否选中边,默认为 true,用户配置为 false 时,则不选中边;boolean--

LassoSelect 拉索画布

API

属性名描述类型默认值
disabled是否禁用该功能boolean--
delegateStyle拖动框选框的样式,包括 fill、fillOpacity、stroke 和 lineWidth 四个属性;{ fill: string; fillOpacity: number; stroke: string; lineWidth: number; }--
onSelect选中节点时的回调,参数 nodes 表示选中的节点;() => void--
onDeselect取消选中节点时的回调,参数 nodes 表示取消选中的节点;() => void--
selectedState选中的状态,默认值为 'selected'string--
trigger触发框选的动作,默认为 'shift',即用户按住 Shift 键拖动就可以进行框选操作,可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ,不区分大小写string--
includeEdges框选过程中是否选中边,默认为 true,用户配置为 false 时,则不选中边;boolean--

ResizeCanvas Resize 画布

API

属性名描述类型默认值
graphDOM--HTMLDivElement(必选)