Antv X6画布缩放

首先在官网上查到关于画布缩放的知识，如下截图所示：

接下来画布缩放这边，我是写了两个按钮，按钮点击时进行相应的放大和缩小

代码布局如下：

 主要代码：

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

zoomInFn () { // 放大
  this.graph.zoom(0.2)
},
zoomOutFn () { // 缩小
  this.graph.zoom(-0.2)
},

效果如下图：

完整代码：

<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({
        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>