antv x6 实现拖拽

单独封装了一个js文件，方便调用

import '@antv/x6-vue-shape'
import { Addon, Graph } from '@antv/x6'
// 拖拽生成四边形
export const startDragToGraph = (graph, type, e) => {
  var node = null
  if (type === '矩形') {
    node = graph.createNode({
      width: 100, // 节点的宽度
      height: 40, // 节点的高度
      attrs: {
        label: {
          text: type,    
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -10,
            height: -10,
            ellipsis: true
          }
        },
        body: {
          stroke: '#000000',
          strokeWidth: 1,
          fill: '#ffffff'
        }
      },
      ports: ports
    })
  } else if (type === '正方形') {
    node = graph.createNode({
      width: 60, // 节点的宽度
      height: 60, // 节点的高度
      attrs: {
        label: {
          text: type,    
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -10,
            height: -10,
            ellipsis: true
          }
        },
        body: {
          stroke: '#000000',
          strokeWidth: 1,
          fill: '#ffffff'
        }
      },
      ports: ports
    })
  } else if (type === '圆') {
    node = graph.createNode({
      // position: 'top',
      attrs: {
        width: 60,
        height: 60,
        label: {
          text: type,    
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -10,
            height: -10,
            ellipsis: true
          }
        },
        circle: {
          r: 4,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 2,
          fill: '#fff'
        }
      },
      ports: ports
    })
  } else if (type === '自定义') {
    node = graph.createNode({
      width: 80,
      height: 80,
      attrs: {
        // 节点里面具有的数据结构以及样式
        body: {
          // stroke: 'rgba(95,148,255,0.0)',
          stroke: '#5f95ff',
          strokeWidth: 1,
          fill: 'rgba(95,148,255,0.0)'
        },
        image: {
          'xlink:href': require('../../assets/img/sc.png'),
          // 自定义格式里面图片的样式要这样引入
          width: 50,
          height: 50,
          x: 12,
          y: 12
          // 定义一个组合节点的每一个元素的大小和位置
        },
        // title: {
        //   text: '标题',
        //   fill: '#eee',
        //   sontSize: 20,
        //   x: 40,
        //   y: 14
        // },
        text: {
          text: '水厂符号',
          x: 0,
          y: 32
        }
      },
      markup: [
      // 定义渲染节点/边使用的SVG/html片段
        {
          tagName: 'rect',
          // 渲染出来一个rect的svg元素
          selector: 'body'
          // svg元素的唯一标识,通过该唯一标识为该元素置定属性样式
        }, {
          tagName: 'image',
          // 渲染一个image的svg元素
          selector: 'image'
        },
        // {
        //     tagName: 'text',
        //     // 渲染一个text元素
        //     selector: 'title'
        // },
        {
          tagName: 'text',
          selector: 'text'
        }
      ],
      ports: ports
    })
  }
  const dnd = new Addon.Dnd({ target: graph })
  dnd.start(node, e)
}
// 下面是锚点的代码。 知道就行了 我就不一一写了。
const ports = {
    groups: {
      // 输入链接桩群组定义
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      },
      // 输出链接桩群组定义
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      }
    },
    items: [
      {
        id: 'port1',
        group: 'top'
      },
      {
        id: 'port2',
        group: 'bottom'
      },
      {
        id: 'port3',
        group: 'left'
      },
      {
        id: 'port4',
        group: 'right'
      }
    ]
}

前端html页面

调用方法

import { startDragToGraph } from '../components/antv/Drag'

startDrag(node, e) {
   startDragToGraph(this.graph, node.data.name, e)
},

拖拽左边即可拖到画布