Vue3+TypeScript+AntVX6实现Web组态（从技术层面与实现层面进行分析）内含实际案例教学

时间：2024-12-18 13:14:00

摘要

用Vue3+TypeScript+AntVX6实现Web组态（从技术层面与实现层面进行分析），包含画布创建、节点设计、拖拽实现（实际案例）、节点连线、交互功能，后续文章持续更新。

注：本文章可以根据目录进行导航

文档支持

AntVX6使用文档

https://x6.antv.antgroup.com/tutorial/getting-started

AntVX6接口参数文档

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

SVG基础文档

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Introduction

大致描述

个人认为以下图片为AntVX6的一些基础关键（详细请见官方文档）

1.提供了画布的参数修改=>方便面板的构建

2.提供了节点的修改=>可以对节点进行增、删、改，并且可以定制化操作（增代表增加节点、删代表删除节点、改代表修改节点的属性）

3.元素式Cell是节点Node、边Edge的基类，也就是Node、Edge继承于Cell（Cell有的属性Node、Edge都有）

元素、节点、边对应参数截图（节点的学习关键是学习元素的参数，详细见API文档）：

具体实现

步骤一：绘制画布

完整代码如下（使用Vue3+TypeScript构建）
<div id="container"></div>


const graph = ref<Graph | null>(null);
onMounted(() => {
  graph.value = new Graph({
    width: 1800,
    height: 1200,
    panning:true,
    mousewheel:true,
    background: {
      color: '#F2F7FA',
    },
    container: document.getElementById('container')!, // 断言该值不为 null
    grid: {
      visible: true,
      type: 'doubleMesh',
      args: [
        {
          color: '#eee', // 主网格线颜色
          thickness: 1, // 主网格线宽度
        },
        {
          color: '#ddd', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4, // 主次网格线间隔
        },
      ],
    },
  });
});
代码解释：

1.我把graph画布单独定义出来，这样就可以定义更多的自定义属性（要记住单独定义完以后要通过graph.value才可以访问里面的属性）。

2.设置画布的大小width、height（官方提供了自动大小autoResize属性，但是在我代码上一直有一些小bug所以就用自定义的宽和高，没有用自动设置的这个参数，需要的可自行研究）

3.Graph 中通过panning和mousewheel配置来实现缩放与平移，鼠标按下画布后移动时会拖拽画布，滚动鼠标滚轮会缩放画布。

4.background为背景色（官方提供自定义背景，并且可以放置图片）

5.配置绘制画布对应的页面区域，并且加上！断言不为空（解决TS报可能为空的错误）

container: document.getElementById('container')!, // 断言该值不为 null

6.设置网格grid（可以直接复制，目前已知作用是让画布更好看）

7.附上对画布尺寸、位置进行操作一些常用的 API

最终的画布效果

步骤二：节点设计

节点本身构造

节点本身构造难点：markup与attrs两个参数，所以我们重点分析。

以下为官方对markup与attrs的解释：

以下是作者本人对这两个参数的理解：

1.首先两者关系是：attrsmarkup（attrs包含于markup，也就是首先要记住attrs是markup中的属性）

2.举个形象的例子来说明 attrs 和 markup 的作用，可以想象你正在搭建一个房子，而这个房子的结构（墙壁、窗户、门等）就是 markup，而你为这些结构上色、装饰的细节（颜色、边框、材质等）就是 attrs。

  • markup：定义了房子的组成部分，比如墙、窗户、门等。你可以通过它告诉 X6：房子有哪些部分，每个部分是什么类型（是矩形？是图片？是文本？）。
  • attrs：用来决定这些部分的样子。你可以为墙刷上白色油漆、为窗户加上边框、为门安装一个红色的把手。

3.其实简单理解就是：markup就是定义当前节点或边具有哪些部分，attrs就是改的markup中的对应部分。

4.注意：若加上了markup参数，在 AntV X6 中，markup 是用来定义节点的结构和内容的，控制着节点渲染时使用的 SVG 或 HTML 元素。如果你在 markup 中传递了空数组（[]），X6 不会自动生成任何内容，因此即使你定义了 shape 和 imageUrl，也不会有任何元素被渲染出来。

      attrs: {

      },
      markup: [
      ],

以下代码则正确显示节点。若移除 markup： 如果你移除 markup 属性，X6 将使用默认的标记来渲染节点，这样 shape: ‘image’ 和 imageUrl 的配置会生效，图像将会被渲染出来。

相关文章