antv x6一些简单效果的实现总结

本文是对antv x6一个初步使用的简单总结，主要包括以下几点：

1.实现画布的平移拖拽

2.实现画布的layout方法

3.实现画布的放大缩小方法

4.实现画布的居中效果

实现效果如下：

完整代码如下：

<template>
  <div>
    <button @click="zoomInFn">放大</button>
    <button @click="zoomOutFn">缩小</button>
    <div id="container"></div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6'
import { GridLayout } from '@antv/layout' // umd模式下， const { GridLayout } = window.layout
export default {
  name: 'X6',
  mounted () {
    this.initComponent()
  },
  data () {
    return {
      data: {}, // X6 数据
      graph: undefined, // new X6
      gridLayout: undefined, // new GridLayout
      newModel: undefined
    }
  },
  methods: {
    zoomInFn () { // 放大
      this.graph.zoom(0.2)
    },
    zoomOutFn () { // 缩小
      this.graph.zoom(-0.2)
    },
    initComponent () {
      this.data = {
        nodes: [// 节点
          {
            id: 'node1', // String，可选，节点的唯一标识
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'hello' // String，节点标签
          },
          {
            id: 'node2', // String，节点的唯一标识
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'world' // String，节点标签
          }
        ],
        edges: [// 边
          {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2' // String，必须，目标节点 id
          }
        ]
      }
      this.graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        panning: true // 拖拽平移
      })
      this.gridLayout = new GridLayout({ // layout布局
        type: 'grid',
        width: 600,
        height: 400,
        center: [300, 200],
        rows: 4,
        cols: 4
      })
      this.newModel = this.gridLayout.layout(this.data)
      this.graph.fromJSON(this.newModel)
      this.graph.centerContent() // 画布居中
    }

  }
}
</script>

<style scoped>

</style>