vue3整合antv x6实现图编辑器快速入门

安装:

bash 复制代码
npm install @antv/x6 --save

如果使用 umd 包,可以使用下面三个 CDN 中的任何一个,默认使用 X6 的最新版:

在页面中创建一个画布容器,然后初始化画布对象,可以通过配置设置画布的样式,比如背景颜色。

js 复制代码
<div id="container"></div>
js 复制代码
import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  background: {
    color: '#F2F7FA',
  },
})

X6 支持 JSON 格式数据,该对象中 nodes 代表节点数据,edges 代表边数据,可以使用 attrs 属性来定制节点和边的样式(可以类比 CSS)。

js 复制代码
const data = {
  nodes: [
    {
      id: 'node1',
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      attrs: {
        // body 是选择器名称,选中的是 rect 元素
        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 是选择器名称,选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}

X6 支持使用 SVG、HTML 来渲染节点内容,在此基础上,我们还可以使用 React、Vue 组件来渲染节点,这样在开发过程中会非常便捷。在拿到设计稿之后,你就需要权衡一下使用哪一种渲染方式,可以参考下面的一些建议:

如果节点内容比较简单,而且需求比较固定,使用 SVG 节点

其他场景,都推荐使用当前项目所使用的框架来渲染节点

例如:在上面节点基础上,我们有一个新的需求:给节点加上右键菜单。如果使用 SVG 来实现会比较复杂,我们直接使用 React 来渲染节点。这里我们使用 X6 配套的 React 渲染包 @antv-x6-react-shape。

js 复制代码
onMounted(() => {
  const graph = new Graph({
    container: document.getElementById('container'),
    width: 800,
    height: 600,
    background: {
      color: '#F2F7FA',
    },
  })
  graph.fromJSON(data) // 渲染元素
  graph.centerContent() // 居中显示

  // 使用插件
  graph.use(
      // 自动对齐
      new Snapline({
        enabled: true,
      }),
  )

  // 数据导出
  console.log(graph.toJSON())
})

最终效果:

最终完整代码:

html 复制代码
<script setup>
import {Graph} from '@antv/x6'
import {onMounted} from "vue";
import {Snapline} from "@antv/x6-plugin-snapline";

const data = {
  nodes: [
    {
      id: 'node1',
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      attrs: {
        // body 是选择器名称,选中的是 rect 元素
        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 是选择器名称,选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById('container'),
    width: 800,
    height: 600,
    background: {
      color: '#F2F7FA',
    },
  })
  graph.fromJSON(data) // 渲染元素
  graph.centerContent() // 居中显示

  // 使用插件
  graph.use(
      // 自动对齐
      new Snapline({
        enabled: true,
      }),
  )

  // 数据导出
  console.log(graph.toJSON())
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>

</style>
相关推荐
死也不注释6 小时前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
许白掰16 小时前
Linux入门篇学习——Linux 帮助手册
linux·运维·服务器·嵌入式硬件·学习·编辑器·vim
NeRF_er20 小时前
使用 VScode Debug加不上断点的原因
ide·vscode·编辑器
MediaTea1 天前
Python 编辑器:Thonny
编辑器
山顶望月川2 天前
并行科技MaaS平台支持文心4.5系列开源模型调用
人工智能·机器学习·编辑器
GDAL2 天前
Node.js REPL 教程
node.js·编辑器·vim
向宇it2 天前
【unity游戏开发——网络】网络游戏通信方案——强联网游戏(Socket长连接)、 弱联网游戏(HTTP短连接)
网络·http·游戏·unity·c#·编辑器·游戏引擎
切韵11 天前
Unity编辑器扩展:UI绑定复制工具
ui·unity·编辑器
F_D_Z12 天前
【vim】通过vim编辑器打开、修改、退出配置文件
linux·编辑器·vim
:-)12 天前
VSCode新窗口背景水印logo修改美化
ide·vscode·编辑器