初识antvX6

最新推荐文章于 2026-05-02 10:29:30 发布

原创

最新推荐文章于 2026-05-02 10:29:30 发布 · 8.9k 阅读

标签

#vue #前端

本文介绍了如何使用X6图编辑引擎创建定制化DAG图等，包括安装、基本功能如调整分辨率、预览、保存、侧边栏元素拖放、图形操作（撤销、重做、节点操作）以及右键菜单和导出功能的实现。

1.简介

X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。官方文档链接:https://x6.antv.antgroup.com/

2.快速上手并实现一些基本的功能

安装

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

# yarn
$ yarn add @antv/x6

需要完成的效果大概如下图。1.点击分辨率切换画布的尺寸。2.点击预览就渲染一张全屏的图片，只能看不能修改。3.点保存生成JSON提交给后端然后在其它端使用。4.toptool里面有撤销跟重做功能。5.拖动侧边栏里面的元素生成不同的节点渲染到画布上。6.对节点做一些操作，例如:拖拽移动节点，伸缩旋转节点，右键节点出现菜单可以删除节点，修改颜色之类的。

3.开搞

需求1，创建画布并响应上面选择框的尺寸改变

graph.value = new Graph({
    container: document.getElementById("graph"), // 在这个id为graph的元素上渲染画布
    width: 1920,
    height: 1080,
    embedding: {
      enabled: true,  // 将一个节点拖动到另一个节点成为一个组合
    },
    grid: {
      type: "mesh", 
      size: 8, // 网格大小，即每次移动元素至少8px
      visible: true, // 渲染网格背景
    },
  });

画布创建好之后，点击下拉选择框改变分辨率，触发change事件并触发画布的大小改变

// 分辨率的枚举
const pixelOptions = [
  { label: "2560*1440", value: 0 },
  { label: "1920*1080", value: 1 },
  { label: "1680*1050", value: 2 },
  { label: "1366*768", value: 3 },
  { label: "1280*960", value: 4 },
  { label: "800*600",

最低0.47元/天解锁文章