Antv X6-初次使用（安装&引入、简单配置）

最新推荐文章于 2024-06-20 14:08:50 发布

灵如尘

最新推荐文章于 2024-06-20 14:08:50 发布

阅读量7.5k

点赞数 5

分类专栏： Antv X6 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_50911095/article/details/131431480

版权

Antv X6 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

本文介绍了AntVX6的安装和引入方法，展示了如何创建和配置画布，包括添加节点和边、设置网格线、控制画布的缩放和平移功能，以及利用Snapline插件实现对齐线功能。

摘要由CSDN通过智能技术生成

官网地址：https://x6.antv.antgroup.com/

1.安装&引入

(1).安装

通过 npm 或 yarn 命令安装 X6。命令如下：

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

效果如下图所示：

(2).引入

使用import在组件中引入，然后在页面中创建一个画布容器，初始化画布对象，可设置样式。

import { Graph } from '@antv/x6'

代码如下：

页面效果：打开浏览器，发现画布被渲染出来了。如下所示：

2.简单配置

(1).添加节点和边

代码如下：

(2).增加画布网格线，详细配置方法参考：https://x6.antv.antgroup.com/api/graph/grid

代码如下：

效果图如下所示：

(3). 控制画布的缩放与平移，详细配置方法参考：

https://x6.antv.antgroup.com/api/graph/panning

https://x6.antv.antgroup.com/api/graph/mousewheel

代码如下：

(3). 使用插件，增加人为对齐线，详细配置方法参考：

https://x6.antv.antgroup.com/tutorial/plugins/snapline

通过 npm 或 yarn 命令安装对齐线插件。命令如下：

# npm
$ npm install @antv/x6-plugin-snapline --save

# yarn
$ yarn add @antv/x6-plugin-snapline

效果图如下所示：

完整代码：

<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph } from '@antv/x6'
import { Snapline } from '@antv/x6-plugin-snapline'
export default {
  data() {
    return {
      graph: null,
      // 节点
      nodes: [
        {
          id: 'node1',
          shape: 'rect',
          x: 40,
          y: 40,
          width: 100,
          height: 40,
          label: 'hello',
          attrs: {
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
              rx: 6,
              ry: 6,
            },
          },
        },
        {
          id: 'node2',
          shape: 'rect',
          x: 160,
          y: 180,
          width: 100,
          height: 40,
          label: 'world',
          attrs: {
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
              rx: 6,
              ry: 6,
            },
          },
        },
      ],
      // 边
      edges: [
        {
          shape: 'edge',
          source: 'node1',
          target: 'node2',
          label: 'x6',
          attrs: {
            line: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
            },
          },
        },
      ],
    }
  },
  mounted() {
    this.graph = new Graph({
      container: document.getElementById('container'),
      width: 800,
      height: 600,
      background: {
        color: '#F2F7FA',
      },
      // 网格线设置
      grid: {
        visible: true,
        type: 'doubleMesh',
        args: [
          {
            color: '#eee', // 主网格线颜色
            thickness: 1, // 主网格线宽度
          },
          {
            color: '#ddd', // 次网格线颜色
            thickness: 1, // 次网格线宽度
            factor: 4, // 主次网格线间隔
          },
        ],
      },
      // 缩放与平移
      mousewheel: true, //使用滚轮控制缩放
      panning: {
        enabled: true,
        //触发键盘事件进行平移：'alt' | 'ctrl' | 'meta' | 'shift'
        modifiers: [],
        //触发鼠标事件进行平移：'leftMouseDown' | 'rightMouseDown' | 'mouseWheel'
        eventTypes: ['leftMouseDown'],
      },
    })
    // 渲染节点和边
    this.graph.fromJSON({
      nodes: this.nodes,
      edges: this.edges,
    })
    // 实现画布内容居中
    this.graph.centerContent()
    //增加对齐线
    this.graph.use(
      new Snapline({
        enabled: true,
      })
    )
  },
  methods: {},
}
</script>
<style scoped>
</style>