VUE+antvx6实现拖拽自定义流程图

最近公司需要做一个流程图， 看了看antv/X6感觉挺合适，就研究了半个月。 网上也没什么资料，又怕自己忘，就自己记录一下用到得一些事件方法，方便以后再用到可以查阅。

一：实现流程图最重要得就是画布了，官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。

首先最重要得就是下载依赖了， x6在vue中下载得话需要下载两个依赖；

npm install @antv/x6 --save
npm install @antv/x6-vue-shape
把这两个依赖下载好就可以在vue中使用X6了  


首先在页面引入依赖
import "@antv/x6-vue-shape";
import { Graph } from '@antv/x6';

下面开始写代码


在methods里定义一个initX6方法， 然后拿到mounted里调用

initX6() {
      this.graph = new Graph({
        container: document.getElementById("containerChart"), //这是画布需要挂载得ID名字
        width：1000,  //画布宽度
        height: 500, //画布高度
        grid: this.grid, //画布样式， 在modou层自己定义用this调用
        autoResize: true, //跟随窗口自动变化大小
      }); 
    },

需要定义画布背景网格得话可以自己定义， 下面是我自己定义得一个背景网格，直接在grid后面使用this.名字调用就可以。

data(){
    return{
        grid: {
            // 网格设置
            size: 20, // 网格大小 10px
            visible: true, // 渲染网格背景
            type: "mesh",
            args: {
              color: "#D0D0D0",
              thickness: 1, // 网格线宽度/网格点大小
              factor: 10,
            },
          },
        }
    }

这个时候在css里给你的挂载容器定义一个宽高你就可以在页面上看到一个画布了。 给他调整一个位置就开始写节点吧。

新建一个JS文件， 用来定义节点和写拖拽代码。

import '@antv/x6-vue-shape';
import { Addon} from '@antv/x6';
// 拖拽生成四边形
export const startDragToGraph  = (graph,type,e) =>{
    const node = 
    graph.createNode({
    width: 100,  //节点的宽度
    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
  })
    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',
          },