【前端】AntV X6学习笔记

使用 AntV X6 版本 2.x，下面官网地址

Vue 节点 | X6 (antgroup.com)

path 路径节点，通过 svg 的 d 值来显示 svg

svg 在线编辑器_svg 矢量图在线制作工具-易点在线矢量图形编辑器 (wxeditor.com)

使用场景 | X6 (antgroup.com)

拖动一个图标去看它的源码里,复制 d 里面的值，放入 path 节点里的 path 属性值里面

<path id="svg_1" d="m199.50248,160.86426l0.19807,-0.63855l0.80193,-0.28418l0.80193,0.28418l0.19807,0.63855l-0.55497,0.51208l-0.89007,0l-0.55497,-0.51208z" stroke-width="1.5" stroke="#000" fill="#fff"/>

path 节点

          {
            id: "node3",
            shape: "path",
            x: 180,
            y: 150,
            width: 40,
            height: 40,
            label: "svg图",
            path: "m193,160.31151l22.53615,0l6.96384,-19.86229l6.96385,19.86229l22.53615,0l-18.2321,12.27543l6.96421,19.86229l-18.23211,-12.27576l-18.2321,12.27576l6.96421,-19.86229l-18.2321,-12.27543",
            attrs: {
              body: {
                fill: "#efdbff",
                stroke: "#9254de",
              },
            },
          },

核心

引入的插件

import { Graph, Shape } from '@antv/x6' // 导入 @antv/x6 库中的 Graph 和 Shape 类
import { Stencil } from '@antv/x6-plugin-stencil' // 导入拖拽式元素选择插件
import { Transform } from '@antv/x6-plugin-transform' // 导入变换操作插件
import { Selection } from '@antv/x6-plugin-selection' // 导入选元素插件
import { Snapline } from '@antv/x6-plugin-snapline' // 导入图形对齐插件
import { Keyboard } from '@antv/x6-plugin-keyboard' // 导入键盘事件处理插件
import { Clipboard } from '@antv/x6-plugin-clipboard' // 导入复制和粘贴图形元素插件
import insertCss from 'insert-css' // 导入动态插入 CSS 函数
import { History } from '@antv/x6-plugin-history' // 导入图形编辑历史记录插件

第 1 步，绘制画布

initGraph() {
  // 创建一个 Graph 实例，参数是一个配置对象
  this.graph = new Graph({
    container: document.getElementById('container'), // 画布容器
    background: false, // 背景（透明）
    autoResize: true, //自动更新大小

    // 网格配置
    grid: {
      type: 'mesh', // 网格类型为网点（点阵）形式
      size: 10, // 网格大小 10px
      visible: true, // 渲染网格背景
      args: {
        color: '#eeeeee', // 网格线/点颜色
        thickness: 2, // 网格线宽度/网格点大小
      },
    },

    mousewheel: {
      enabled: true, // 启用鼠标滚轮缩放功能
      zoomAtMousePosition: true, // 缩放中心点在鼠标位置
      modifiers: 'ctrl', // 按住 Ctrl 键进行缩放
      minScale: 0.5, // 最小缩放比例
      maxScale: 3, // 最大缩放比例
    },

    panning: {
      enabled: true, // 允许平移功能
      modifiers: 'alt', // 按住 Alt 键进行平移
    },

    // 配置连线规则
    connecting: {
      router: 'manhattan', // 连线的默认路由器为曼哈顿算法
      connector: {
        name: 'rounded', // 连接器形状为圆角
        args: {
          radius: 8, // 圆角半径
        },
      },
      anchor: 'center', // 连线默认锚点为中心点
      connectionPoint: 'anchor', // 连线默认连接点为锚点
      allowBlank: false, // 不允许空连接
      snap: {
        radius: 20, // 连接吸附的半径范围
      },
      createEdge() {
        // 创建连线时返回一个新的 Edge 对象
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#A2B1C3', // 连线颜色
              strokeWidth: 2, // 连线宽度
              targetMarker: {
                name: 'block', // 目标箭头形状为方块
                width: 12, // 箭头宽度
                height: 8, // 箭头高度
              },
            },
          },
          zIndex: 0, // 层级设置为 0
        });
      },
      validateConnection({ targetMagnet }) {
        // 验证连接是否有效，目标连接点必须存在
        return !!targetMagnet;
      },

    },

    highlighting: {
      magnetAdsorbed: {
        name: 'stroke', // 线条描边样式为高亮
        args: {
          attrs: {
            fill: '#5F95FF', // 线条填充颜色
            stroke: '#5F95FF', // 线条描边颜色
          },
        },
      },
    },
  });

  // 使用插件
  this.graph
    .use(
      new Transform({
        // 平移、缩放、旋转等变换操作
        resizing: true, // 允许调整大小
        rotating: true, // 允许旋转
      })
    )
    .use(
      new Selection({
        // 选择和操纵图形。提供了选择区域、单选等功能
        rubberband: true, // 启用选择框
        showNodeSelectionBox: true, // 显示节点的选择框
      })
    )
    .use(new Snapline()) // 可用于对齐图形元素
    .use(new Keyboard()) // 允许通过键盘快捷键来控制图形编辑
    .use(new Clipboard()) // 提供了对图形的复制和粘贴操作
    .use(new History()); // 历史记录撤销使用

  this.graph.centerContent(); // 画布内容居中显示
},

第 2 步，初始化连接桩

    //初始化默认连接桩
    initPorts() {
      this.ports = {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
        },
        items: [
          {
            group: 'top',
          },
          {
            group: 'right',
          },
          {
            group: 'bottom',
          },
          {
            group: 'left',
          },
        ],
      }
    },

第 3 步，注册自定义节点

enrollNode() {
  // 注册自定义模板节点 'custom-image'
  Graph.registerNode(
    'custom-image',
    {
      width: 62, // 节点宽度
      height: 62, // 节点高度
      markup: [
        {
          tagName: 'rect',
          selector: 'body', // 节点外部矩形
        },
        {
          tagName: 'image',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          stroke: 'green', // 外部矩形边框颜色
          fill: 'pink', // 外部矩形填充颜色
        },
        image: {
          refWidth: '100%', // 图片宽度和节点宽度一致
          refHeight: '100%', // 图片高度和节点高度一致
        },
        label: {
          refX: 20,
          refY: 82,
          textAnchor: 'center',
          textVerticalAnchor: 'bottom',
          fontSize: 16,
          fill: '#fff', // 文字颜色
        },
      },
      ports: { ...this.ports }, // 节点的连接点配置
    },
    true // 是否强制覆盖同名节点类型
  );

},

第四步， 初始化侧边栏

initStencil() {
  // 创建一个 Stencil 实例
  this.stencil = new Stencil({
    title: '接线图', // Stencil 标题
    target: this.graph, // 目标 Graph 实例
    stencilGraphWidth: 200, // Stencil 绘图区宽度
    stencilGraphHeight: 0, // Stencil 绘图区高度（0 表示自适应高度）
    collapsable: true, // 是否可折叠

    groups: [
      // 定义分组
      // {
      //   title: "基础流程图",
      //   name: "group1",
      //   graphHeight: 50,
      // },
      // 系统设计图分组
      {
        title: '系统设计图',
        name: 'group2',
        graphHeight: 0, // 分组内部绘图区高度（0 表示自适应高度）
        layoutOptions: {
          rowHeight: 70, // 分组内部行高
        },
      },
    ],
    layoutOptions: {
      columns: 2, // 列数
      columnWidth: 80, // 列宽度
      rowHeight: 55, // 行高度
    },
  });

  // 将 Stencil 实例的容器添加到指定的 DOM 元素中
  document.getElementById('stencil').appendChild(this.stencil.container);

  // 插入样式
  this.insertCss();
},

第 4 步，绘制左侧栏

initStencil() {
  // 创建一个 Stencil 实例
  this.stencil = new Stencil({
    title: '接线图', // Stencil 标题
    target: this.graph, // 目标 Graph 实例
    stencilGraphWidth: 200, // Stencil 绘图区宽度
    stencilGraphHeight: 0, // Stencil 绘图区高度（0 表示自适应高度）
    collapsable: true, // 是否可折叠

    groups: [
      // 定义分组
      // {
      //   title: "基础流程图",
      //   name: "group1",
      //   graphHeight: 50,
      // },
      // 系统设计图分组
      {
        title: '系统设计图',
        name: 'group2',
        graphHeight: 0, // 分组内部绘图区高度（0 表示自适应高度）
        layoutOptions: {
          rowHeight: 70, // 分组内部行高
        },
      },
    ],
    layoutOptions: {
      columns: 2, // 列数
      columnWidth: 80, // 列宽度
      rowHeight: 55, // 行高度
    },
  });

  // 将 Stencil 实例的容器添加到指定的 DOM 元素中
  document.getElementById('stencil').appendChild(this.stencil.container);
  // 插入样式,修改了左侧栏底色
  this.insertCss();
},

第 5 步，添加监听事件

initEvent() {
  // 当鼠标进入节点时，显示连接点
  this.graph.on('node:mouseenter', () => {
    const container = document.getElementById('graph-container');
    const ports = container.querySelectorAll('.x6-port-body');
    this.showPorts(ports, true);
  });

  // 当鼠标离开节点时，隐藏连接点
  this.graph.on('node:mouseleave', () => {
    const container = document.getElementById('graph-container');
    const ports = container.querySelectorAll('.x6-port-body');
    this.showPorts(ports, false);
  });

  // 节点点击事件
  this.graph.on('cell:click', ({ cell }) => {
    // 清除之前选中节点的样式
    this.curCel ? this.curCel.attr('body/stroke', null) : null;
    this.curCel ? this.curCel.attr('line/stroke', '#c0c0c0') : '#c0c0c0';
    // 设置当前选中节点的样式为红色
    this.curCel = cell;
    this.curCel.attr('body/stroke', 'red');
    this.curCel.attr('line/stroke', 'red');
    // 获取节点的文字标签（可能在text/text中，也可能在label/text中）
    this.formData.nodeName = cell.getAttrs()?.text?.text
      ? cell.getAttrs()?.text?.text
      : cell.getAttrs()?.label?.text
      ? cell.getAttrs()?.label?.text
      : null;
    // 获取节点的名称
    this.formData.Name = cell.getAttrs()?.data?.Name;
  });

  // 快捷键与事件
  this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
    // 复制选中的单元格
    const cells = this.graph.getSelectedCells();
    if (cells.length) {
      this.graph.copy(cells);
    }
    return false;
  });

  this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
    // 剪切选中的单元格
    const cells = this.graph.getSelectedCells();
    if (cells.length) {
      this.graph.cut(cells);
    }
    return false;
  });

  this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
    // 粘贴剪贴板中的内容
    if (!this.graph.isClipboardEmpty()) {
      const cells = this.graph.paste({ offset: 32 });
      this.graph.cleanSelection();
      this.graph.select(cells);
    }
    return false;
  });

  this.graph.bindKey('delete', () => {
    // 删除选中的单元格
    const cells = this.graph.getSelectedCells();
    if (cells.length) {
      this.graph.removeCells(cells);
    }
  });

  this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
    // 放大画布
    const zoom = this.graph.zoom();
    if (zoom < 1.5) {
      this.graph.zoom(0.1);
    }
  });

  this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
    // 缩小画布
    const zoom = this.graph.zoom();
    if (zoom > 0.5) {
      this.graph.zoom(-0.1);
    }
  });

  this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
    // 撤销操作
    if (this.graph.canUndo()) {
      this.graph.undo();
    }
    return false;
  });

  this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
    // 重做操作
    if (this.graph.canRedo()) {
      this.graph.redo();
    }
    return false;
  });

  this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
    // 全选
    const nodes = this.graph.getNodes();
    if (nodes) {
      this.graph.select(nodes);
    }
  });
},

第六步，加载数据

load(){
          this.$http({
        url: this.$http.adornUrl('/topoImg/loader/queryImgList'),
        method: 'post',
        data: this.$http.adornData({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.imgList = data.list
          const encounteredKeys = {}
          //相同名称的设备只取其一
          for (let index = 0; index < this.imgList.length; index++) {
            const item = this.imgList[index]
            if (!encounteredKeys[item.imgKey]) {
              encounteredKeys[item.imgKey] = true
              this.imageNodes.push(
                this.graph.createNode({  //调用自定义节点
                  shape: 'custom-image',
                  label: item.imgKey,
                  attrs: {
                    data: {
                      deviceName: '',
                      filePositionOptions: '下居中',
                      valueLamp: '0',
                    },
                    image: {
                      'xlink:href': item.imgContent.startsWith('img')
                        ? this.$http.adornUrl('/') + item.imgContent
                        : item.imgContent,
                    },
                  },
                })
              )
            }
          }

          this.imageNodes.push(
            this.graph.createNode({
              shape: 'custom-text',
              attrs: {
                data: {
                  deviceName: '',
                  filePositionOptions: '中居中',
                  valueLamp: '0',
                },
                image: {
                  'xlink:href': '',
                },
              },
            })
          )
          // console.log("左侧的数据是", this.imageNodes);
          this.stencil.load(this.imageNodes, 'group2')
        } else {
          this.imgList = []
        }
        this.load(this.receiveId)
      })


}

//获取画布数据
 load(id) {
      if (!id) {
        return
      }
      this.$http({
        url: this.$http.adornUrl('/topo/loader/getInfo'),
        method: 'post',
        data: this.$http.adornData({
          id: id,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (data.data.x6json === undefined || data.data.x6json === '') {
            return
          }
          this.graph.fromJSON(JSON.parse(data.data.x6json))
          // let topojson = data.data.topojson;
          // let x6json = data.data.x6json;
          // console.log("---------------------X--");
          // console.log("topojson值", JSON.parse(JSON.parse(topojson)));
          // console.log("-------------X----------");
          // console.log("x6json值", JSON.parse(x6json));
          //下面先遍历页面的图，然后再去遍历连接线
          // nodeS.nodeDataArray.map((item) => {
          //   const [x, y] = item.loc.split(" ").map((value) => parseInt(value));
          //   // console.log("x和y的值是", x, y);
          //   this.graph.addNode({
          //     shape: "custom-image",
          //     label: item.imgKey,
          //     id: item.key,
          //     x: x,
          //     y: y,
          //     width: item.width,
          //     height: item.height,
          //     data: {
          //       size: item.size,
          //       loc: item.loc,
          //       imgKey: item.imgKey,
          //       valContent: item.valContent,
          //     },
          //     attrs: {
          //       image: {
          //         "xlink:href": item.source.startsWith("img")
          //           ? this.$http.adornUrl("/") + item.source
          //           : item.source,
          //       },
          //     },
          //   });
          // });
          //添加连接线
          // nodeS.linkDataArray.map((item) =>
          //   this.graph.addEdge({
          //     source: { cell: item.from },
          //     target: { cell: item.to },
          //     attrs: {
          //       line: {
          //         stroke: "#c0c0c0",
          //         strokeWidth: 2,
          //         targetMarker: {
          //           name: "block",
          //           width: 12,
          //           height: 8,
          //         },
          //       },
          //     },
          //     zIndex: 0,
          //   })
          // );
        }
      })
    },

补充

    //修改画布内置的样式，正常css无法修改
    insertCss() {
      return insertCss(`
    #container {
      display: flex;
      border: 1px solid #dfe3e8;
    }
    #stencil {
      width: 180px;
      height: 100%;
      position: relative;
      border-right: 1px solid #dfe3e8;
    }
    #graph-container {
      width: calc(100% - 180px);
      height: 100%;
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
      padding: 0px;
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div {
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div:hover {
      background-color: #3dafe4;
    }
    .x6-widget-transform-active-handle {
      background-color: #3dafe4;
    }
    .x6-widget-transform-resize {
      border-radius: 0;
    }
    .x6-widget-selection-inner {
      border: 1px solid #239edd;
    }
    .x6-widget-selection-box {
      opacity: 0;
    }
  `)
    },


  props: ['id'],
  mounted() {
    this.receiveId = this.$props.id
    this.initGraph() //初始化画布
    this.initPorts() //初始化连接桩
    this.enrollNode() //注册自定义节点
    this.initStencil() //初始化左侧栏ui
    this.initEvent() //添加监听事件
    this.queryApiList() //查找接口列表
    this.loadData() //加载数据
  },


       <!-- 下面是节点属性框 -->
    <div v-if="drawer" class="node_attr_box">
      <div style="font-size: 20px; padding: 10px 5px; background-color: slategray">
        <span>组态属性</span>
        <span style="float: right" class="close_icon"><i class="el-icon-close" @click="drawer = false"></i></span>
      </div>
      <el-form :model="nodeForm">
        <h3>节点设置</h3>
        <el-form-item label="设备ID" prop="idNum">
          <el-input v-model="nodeForm.idNum" size="mini" style="width: 100px"></el-input>
        </el-form-item>
        <hr />
        <h3>文本设置</h3>
        <el-form-item label="文本" prop="nodeName">
          <el-input v-model="nodeForm.nodeName" @change="onNameChange" size="mini" style="width: 100px"></el-input>
        </el-form-item>
      </el-form>
      <hr />
    </div>

遇到问题

gojs和x6的图形显示不符合预期

在 X6 中，网格是渲染/移动节点的最小单位，默认是 10px ，也就是说位置为 { x: 24, y: 38 } 的节点渲染到画布后的实际位置为 { x: 20, y: 40 }

      // 构建画布
      myDiagram = $(
        sx.Diagram,
        'myDiagramp', // 必须指定或引用 HTML 元素
        {
          // 是否显示网格
          grid: $(
            sx.Panel,
            'Grid',
            $(sx.Shape, 'LineH', { stroke: 'lightgray', strokeWidth: 0.5 }), // 水平辅助线，浅灰色
            $(sx.Shape, 'LineH', {
              stroke: 'gray',
              strokeWidth: 0.5,
              interval: 10,
            }), // 水平主要线，灰色，每隔10个单位绘制一条
            $(sx.Shape, 'LineV', { stroke: 'lightgray', strokeWidth: 0.5 }), // 垂直辅助线，浅灰色
            $(sx.Shape, 'LineV', {
              stroke: 'gray',
              strokeWidth: 0.5,
              interval: 10,
            }) // 垂直主要线，灰色，每隔10个单位绘制一条
          ),
          // 只读模式
          isReadOnly: false,
          // 初始化画布缩放比例
          scale: 0.7,
          allowDrop: true, // 允许从工具栏拖拽节点到画布
          allowZoom: true, // 允许缩放
          'draggingTool.dragsLink': true, // 拖拽节点时是否同时移动连线
          'draggingTool.isGridSnapEnabled': true, // 拖拽节点时是否吸附到网格
          'linkingTool.isUnconnectedLinkValid': true, // 允许创建未连接的连线
          'linkingTool.portGravity': 20, // 连线吸附到节点端口的力度
          'relinkingTool.isUnconnectedLinkValid': true, // 允许重新连接未连接的连线
          'relinkingTool.portGravity': 20, // 重新连接连线时吸附到节点端口的力度
          'relinkingTool.fromHandleArchetype': $(sx.Shape, 'Diamond', {
            segmentIndex: 0,
            cursor: 'pointer',
            desiredSize: new sx.Size(8, 8),
            fill: 'tomato',
            stroke: 'darkred',
          }), // 重新连接连线时起始点的手柄样式
          'relinkingTool.toHandleArchetype': $(sx.Shape, 'Diamond', {
            segmentIndex: -1,
            cursor: 'pointer',
            desiredSize: new sx.Size(8, 8),
            fill: 'darkred',
            stroke: 'tomato',
          }), // 重新连接连线时结束点的手柄样式
          'linkReshapingTool.handleArchetype': $(sx.Shape, 'Diamond', {
            desiredSize: new sx.Size(7, 7),
            fill: 'lightblue',
            stroke: 'deepskyblue',
          }), // 调整连线形状时的手柄样式
          rotatingTool: $(TopRotatingTool), // 自定义旋转工具
          'rotatingTool.snapAngleMultiple': 15, // 旋转时对齐到的角度倍数
          'rotatingTool.snapAngleEpsilon': 15, // 角度对齐的容差范围
          'undoManager.isEnabled': true, // 启用撤销/重做功能
        }
      )

同步gojs中渲染的表格，也是10px，现在考虑解决x6缩放问题

graph.resize(800, 600) // resize 画布大小
graph.translate(20, 20) // 在 x、y 方向上平移画布
graph.zoom(0.2) // 将画布缩放级别增加 0.2（默认为1）
graph.zoom(-0.2) // 将画布缩放级别减少 0.2
graph.zoomTo(1.2) // 将画布缩放级别设置为 1.2
// 将画布中元素缩小或者放大一定级别，让画布正好容纳所有元素，可以通过 maxScale 配置最大缩放级别
graph.zoomToFit({ maxScale: 1 })
graph.centerContent() // 将画布中元素居中展示

加入了zoom后，差不多比例了

接着研究线的坐标,发现是base64图片有偏移，保存时候添加了，解决了这个问题。又发现了新的问题，还是线的问题，图片与图片直连，两边都可以，就是旋转之后，连接线不匹配。研究线