在Vue2中使用antV x6画个图

在vue2中使用antv x6

概述

X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，能快速搭建流程图、DAG 图、ER 图等图应用。最近项目上用到这个画流水线，大致记录一下。

在vue2项目中使用antv x6

npm 下载软件包

npm install @antv/x6 --save

#在vue中使用antv需要安装 x6-vue-shape
npm install @antv/x6-vue-shape

# 安装 @vue/composition-api
npm install @vue/composition-api

package.json

目前antv x6.2版本好像没有完成动画部分，所以这里用的是1x的版本。

"dependencies": {
  "@antv/x6": "^1.34.3",
  "@antv/x6-vue-shape": "^1.2.10",
  "@vue/composition-api": "^1.7.1",
  "core-js": "^3.8.3",
  "vue": "^2.6.14"
}

画一个流程图

创建一张画布

1. 需要创建一个用于容纳X6的绘图容器，一个id=”container”的标签
2. 需要在项目中引入 antv/@x6 import { Graph } from '@antv/x6';
3. 在data里定义graph,在vue生命周期mounted的时候创建画布。

 <template>
     <div id="container"></div>
 </template>
 
 <script>
 import { Graph } from '@antv/x6';
 export default ({
     data(){
         return{
             graph:null,
         }
     },
     mounted() {
         this.graph = new Graph({
             container: document.getElementById('container'), 
             width: 800, // 宽度
             height: 600,  // 高度
             background: {
                 color: '#fffbe6', // 设置画布背景颜色
             },
             grid: {
                 size: 10,      // 网格大小 10px
                 visible: true, // 渲染网格背景
             },
             interacting: {
                 nodeMovable: false  // 设置node不能被拖动
             }       
         });
     }
 })
 </script>

添加节点和边

添加节点

graph.addNode({
  id: 'node1',  //节点id
  shape: 'rect', // 使用 rect 渲染
  x: 40, // x坐标
  y: 50,  // y坐标
  width: 80,  // 宽度
  height: 40,
  label: 'hello',
})

graph.addNode({
  id: 'node2',
  shape: 'rect', 
  x: 90,
  y: 200,
  width: 80,
  height: 40,
  label: 'world',
})

添加边

this.graph.addEdge({
  shape:'edge',   // 边的形状
  source:'node1', // 从哪里
  target:'node2' // 到哪里
})

实现一个流程图

举个例子，我们需要实现的流程图，将节点和边的数据都保存在本地。这里用电能量从市电到用电器的例子。

1. 将要显示的节点都先写好，并用node_map来保存node对象

 nodes: [
     { "id": "1", name: "node1", x: 50, y: 200, image: 'power-plant.png' },
     { "id": "2", name: "node2", x: 200, y: 200, image: 'home.png' },
     { "id": "3", name: "node3", x: 280, y: 200, image: 'plug.png' },
     { "id": "4", name: "node4", x: 370, y: 50, image: 'smartphone.png' },
     { "id": "5", name: "node5", x: 370, y: 150, image: 'smart-tv.png' },
     { "id": "6", name: "node6", x: 370, y: 250, image: 'macbook-pro.png' },
     { "id": "7", name: "node7", x: 370, y: 350, image: 'rice-cooker.png' },
 ],
  node_map:{}

2. 用一个函数将这些节点都添加到graph中，并将这些节点保存起来方便一会加入边使用。

 AddNodes: function (graph, node) {
     const tempnode =  graph.addNode({
         shape: "image",  // 类型修改为image
         x: node.x,
         y: node.y,
         width: 50,
         height: 50,
         attrs:{
             image:{
                 refX:0,
                 refY:0,
                 xlinkHref: require('@/assets/'+node.image)
             }
         }
     })
     this.node_map[node.id] = tempnode   // 将node对象保存到node_map中
 }

3. 将要添加的边先写好，写好添加边的函数AddLines

 lines: [
   { source: "node1", target: "node2" },
   { source: "node2", target: "node3" },
   { source: "node3", target: "node4" },
   { source: "node3", target: "node5" },
   { source: "node3", target: "node6" },
   { source: "node3", target: "node7" },
 ]
 
 AddLines: function (graph, source, target) {
         graph.addEdge({
             shape: 'edge',
             source: source,
             target: target,
             attrs:{
                 line:{
                     targetMarker:'path'  // 修改箭头样式
                 }
             }
             // router:"orth"
         })
     }

4. 添加运动的小球使其运动，这时候要引入 Vector生成小球，以及使用sendToken()方法来触发一个沿边运动的动画。

 sendToken(
   token: SVGElement | string,
   options?:
     | number
     | {
         duration?: number
         reversed?: boolean
         selector?: string
       },
   callback?: () => void,
 ): () => void

this.graph.on('signal', (cell) => {
  if (cell.isEdge()) {
      const view = this.graph.findViewByCell(cell)
      if (view && view.isEdgeView) {
            // 创建一个半径为5的橙色小球   
          const token = Vector.create('circle', { r: 5, fill: '#feb662' })
          const target = cell.getTargetCell()
          setTimeout(() => {
              view.sendToken(token.node, 2000, () => {
                  if (target) {
                      this.graph.trigger('signal', target)
                  }
              })
          }, 300)
      }
  } else {
      const edges = this.graph.model.getConnectedEdges(cell, {
          outgoing: true,
      })
      edges.forEach((edge) => this.graph.trigger('signal', edge))
  }
})

const trigger = () => {
  this.graph.trigger('signal', this.node_map['node1'])
  setTimeout(trigger, 2000)
}

trigger()