使用antv/G6，实现自定义节点流程图

实现可拖拽的流程图

效果图： 

第一排小图标是可拖拽的

第二排图标是第一排拖拽出来的

// 引入antv-G6
import G6 from '@antv/g6';

html代码

<template><a-card :bordered="false"><div class="identification-img"><img src="../assets/images/1.jpg" alt="工序" class="CONTINUE_PROCESS" title="连续工序" @dragend="drag" /><img src="../assets/images/2.jpg" alt="开始" class="START_PROCESS" title="开始" @dragend="drag" /><img src="../assets/images/3.jpg" alt="结束" class="END_PROCESS" title="结束" @dragend="drag" /></div><div class="main-content-box"><!-- 画布 --><div id="container"></div></div></a-card>
</template>

添加事件，让图片可拖拽

drag(e){let model = {id: (Math.random().toFixed(9) + '').split('.')[1], //节点id，不能重复img: e.target.currentSrc, //自定义节点的小图标type: 'image',   //节点类型label: e.target.alt, //节点标签x: e.offsetX,  //节点水平方向坐标y: e.offsetY - 50, //节点竖直方向坐标//style 节点的样式，用于设置节点的外观，可以包括填充颜色、边框颜色、线宽等style: {stroke: '#000', //边框颜色，用于定义节点的边框颜色。fill: '#C6E5FF',  //节点类型},// labelCfg 用于定义标签文本的样式和位置，可以包括字体大小、颜色、位置偏移等labelCfg: {style: {fontSize: 16,//标签文本的字体大小},position: 'bottom', //标签文本的字的位置},}// 增加节点this.graph.addItem('node', model)},

初始化的图数据，是一个包括 nodes （节点）数组和 edges （线）数组的对象。

getInit() {const width = container.scrollWidthconst height = container.scrollHeight || 500let sourceAnchorIdx, targetAnchorIdx, sourceItem, targetItemthis.graph = new G6.Graph({container: 'container',width, //画布宽height,//画布高// plugins: [contextMenu], //右击菜单自定义modes: {// 拖拽节点和连线default: ['drag-node',{type: 'create-edge',// 线的链接（开始）shouldBegin: (e) => {// avoid beginning at other shapes on the nodeif (e.target && e.target.get('name') !== 'anchor-point') return falsesourceItem = e.itemsourceAnchorIdx = e.target.get('anchorPointIdx')e.target.set('links', e.target.get('links') + 1) // cache the number of edge connected to this anchor-point circlereturn true},// 线的链接（结束）shouldEnd: (e) => {// avoid ending at other shapes on the nodeif (e.target && e.target.get('name') !== 'anchor-point') return falsetargetItem = e.itemtargetAnchorIdx = e.target.get('anchorPointIdx')e.target.set('links', e.target.get('links') + 1) // cache the number of edge connected to this anchor-point circlereturn true// if (this.checkEdge(sourceItem, targetItem)) {//   if (e.target) {//     targetAnchorIdx = e.target.get('anchorPointIdx')//     e.target.set('links', e.target.get('links') + 1) // cache the number of edge connected to this anchor-point circle//     return true//   }//   targetAnchorIdx = undefined//   return false// }return false},},],},defaultNode: {size: [60, 60],type: 'image',img: require('../assets/images/start.jpeg'),color: '#ffffff',style: {// lineWidth: 20,stroke: '#000',fill: '#C6E5FF',// radius: 5},labelCfg: {style: {fontSize: 16,},position: 'bottom',},anchorPoints: [[0.5, 0],[1, 0.5],[0.5, 1],[0, 0.5],],},defaultEdge: {type: 'polyline',size: 3, //工序间的线的粗细color: '#c8c8c8',style: {endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z',fill: '#c8c8c8',},lineAppendWidth: 2, //边的击中范围lineWidth: 3, //边阴影大小radius: 5,},},})this.graph.render()G6.registerNode('image',{// draw anchor-point circles according to the anchorPoints in afterDrawafterDraw(cfg, group) {const bbox = group.getBBox()bbox.height = 60const anchorPoints = this.getAnchorPoints(cfg)anchorPoints.forEach((anchorPos, i) => {group.addShape('circle', {attrs: {r: 7, //工序之间连接点的大小x: bbox.x + bbox.width * anchorPos[0],y: bbox.y + bbox.height * anchorPos[1],fill: '#fff',stroke: '#5F95FF',},name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point')anchorPointIdx: i, // flag the idx of the anchor-point circlelinks: 0, // cache the number of edges connected to this shapevisible: false, // invisible by default, shows up when links > 1 or the node is in showAnchors state})})},getAnchorPoints(cfg) {return (cfg.anchorPoints || [[0, 0.5],[0.33, 0],[0.66, 0],[1, 0.5],[0.33, 1],[0.66, 1],])},// response the state changes and show/hide the link-point circlessetState(name, value, item) {if (name === 'showAnchors') {const anchorPoints = item.getContainer().findAll((ele) => ele.get('name') === 'anchor-point')anchorPoints.forEach((point) => {if (value || point.get('links') > 0) point.show()else point.hide()})}},},'image')// 鼠标移入显示连接线的四个点this.graph.on('node:mouseenter', (e) => {this.graph.setItemState(e.item, 'showAnchors', true)})// 鼠标移出隐藏连接线的四个点this.graph.on('node:mouseleave', (e) => {this.graph.setItemState(e.item, 'showAnchors', false)})},

如图所示

图一是鼠标移出隐藏连接点，图二是鼠标移入显示连接点

  // 鼠标移入显示连接线的四个点this.graph.on('node:mouseenter', (e) => {this.graph.setItemState(e.item, 'showAnchors', true)})// 鼠标移出隐藏连接线的四个点this.graph.on('node:mouseleave', (e) => {this.graph.setItemState(e.item, 'showAnchors', false)})