Antv X6 canvas zoom

First, I found the knowledge about canvas scaling on the official website , As shown in the screenshot below ：

Next, zoom the canvas here , I wrote two buttons , Click the button to zoom in and out accordingly

The code layout is as follows ：

  Main code ：

<div>
  <button @click="zoomInFn"> Zoom in </button>
  <button @click="zoomOutFn"> narrow </button>
  <div id="container"></div>
</div>

zoomInFn () { //  Zoom in 
  this.graph.zoom(0.2)
},
zoomOutFn () { //  narrow 
  this.graph.zoom(-0.2)
},

The effect is as follows ：

Complete code ：

<template>
  <div>
    <button @click="zoomInFn"> Zoom in </button>
    <button @click="zoomOutFn"> narrow </button>
    <div id="container"></div>
  </div>
</template>


<script>
import { Graph } from '@antv/x6'
import { GridLayout } from '@antv/layout' // umd In mode , const { GridLayout } = window.layout
export default {
  name: 'X6',
  mounted () {
    this.initComponent()
  },
  data () {
    return {
      data: {}, // X6  data 
      graph: undefined, // new X6
      gridLayout: undefined, // new GridLayout
      newModel: undefined
    }
  },
  methods: {
    zoomInFn () { //  Zoom in 
      this.graph.zoom(0.2)
    },
    zoomOutFn () { //  narrow 
      this.graph.zoom(-0.2)
    },
    initComponent () {
      this.data = {
        nodes: [//  node 
          {
            id: 'node1', // String, Optional , Unique identification of the node 
            width: 80, // Number, Optional , Node size  width  value 
            height: 40, // Number, Optional , Node size  height  value 
            label: 'hello' // String, Node labels 
          },
          {
            id: 'node2', // String, Unique identification of the node 
            width: 80, // Number, Optional , Node size  width  value 
            height: 40, // Number, Optional , Node size  height  value 
            label: 'world' // String, Node labels 
          }
        ],
        edges: [//  edge 
          {
            source: 'node1', // String, must , Start node  id
            target: 'node2' // String, must , The target node  id
          }
        ]
      }
      this.graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        panning: true //  Drag translation 
      })
      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() //  Center the canvas 
    }


  }
}
</script>


<style scoped>


</style>