antv G6 开发踩坑记录

1、通过键盘 + 鼠标拖拽创建边

根据官方实例，在画布上创建边基本都是点击端点构建边，或者固定端点后拖拽创建边，但是倘若有个这样的需求：“键盘按住ctrl后，鼠标从一个端点拖拽出边到另一个端点来创建边” 改如何应对呢？，本着文档没有看源码的操作，最终还是被我找到了；

文档方法

在这里插入图片描述

源码方案

根据源码提供代码可知官方是提供了对应方法的，只是文档未写，所以我们可以这样修改：
1、G6 配置项

  modes: {default: ['drag-node', 'drag-canvas', 'zoom-canvas', {type: 'create-edge',key: 'control', // 配置创建边按键操作, options: 'shift', 'control', 'ctrl', 'meta', 'alt'trigger: 'drag', // 修改创建边模式 }],},

2、监听节点上鼠标事件

  // 监听节点鼠标按下时是否按住 ctrl 键来控制节点拖拽锁定graph.on('node:mousedown', (evt: IG6GraphEvent) => {const mouseEvent = evt.originalEvent as MouseEvent;if (mouseEvent.ctrlKey) {evt.item?.lock();}});// 监听节点鼠标抬起时是否按住 ctrl 键来控制节点拖拽锁定graph.on('node:mouseup', (evt: IG6GraphEvent) => {const mouseEvent = evt.originalEvent as MouseEvent;if (mouseEvent.ctrlKey) {evt.item?.unlock();}});

3、可监听边创建完成后的事件回调

 // 监听创建边完成graph.on('aftercreateedge', (e: IG6GraphEvent) => {// do   
})

2、自定义边箭头样式

  style: {lineWidth: 2,lineAppendWidth: 5,stroke: '#BDBEBF',endArrow: {path: G6.Arrow.triangle(5, 5, 5), // 依次为箭头宽度（默认 10）、长度（默认 15）、偏移量（默认为 0，与 d 对应）d: 5,fill: '#BDBEBF',},},