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

笑到世界都狼狈

已于 2022-11-09 08:51:56 修改

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Antv X6 文章标签： antv x6画布平移 x6 layout布局 x6画布居中 x6画布缩放 antv x6使用

于 2022-04-20 20:07:11 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/124305778

Antv X6 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用AntV X6库进行画布操作，包括平移拖拽、布局设置、放大缩小及内容居中。通过示例代码展示了如何创建并配置Graph实例，应用GridLayout布局，以及实现画布的缩放和平移功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是对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>