Antv x6 中 `Markup` `children` 属性失效问题及解决方法

vue.js

2024-03-20 08:51:01

Antv x6 中 Markup children 属性失效问题及其解决方案

问题

使用 Antv x6 时，在 Markup 中设置 children 属性后，发现子元素无法在节点上正常渲染。调整图层顺序和使用 zIndex 也无济于事。

解决方案

解决此问题需要以下步骤：

了解 children 属性

children 属性用于在节点主体中定义子元素，这些子元素由 tagName 和 selector 标识。children 属性应嵌套在 markup 数组中的一个对象中，该对象指定了节点主体本身的属性。
检查子元素 selector

确保子元素的 selector 与节点主体中相应部分的 selector 匹配。例如，如果要在 body 中渲染子元素 progress，则 selector 应为 body。
使用 refWidth 和 refHeight

refWidth 和 refHeight 属性允许定义子元素相对于父元素的尺寸，对于确保子元素正确对齐至关重要。

代码示例

以下代码示例展示了如何修复 Markup 的 children 属性：

import { Graph, Node } from "@antv/x6";

Graph.registerNode("progress-node", {
  inherit: "rect",
  markup: [
    {
      tagName: "rect",
      selector: "body",
      children: [
        {
          tagName: "rect",
          selector: "progress",
          refWidth: "50%",
          refHeight: "100%",
        },
      ],
    },
  ],
  attrs: {
    body: {
      width: 200,
      height: 40,
      fill: "#e0e0e0",
      rx: 10, // 圆角
      ry: 10,
    },
    progress: {
      fill: "#007bff",
      rx: 10,
      ry: 10,
    },
  },
});

const graph = new Graph({
  container: document.getElementById("container")!,
  width: 800,
  height: 600,
});

graph.addNode({
  x: 40,
  y: 40,
  shape: "progress-node",
});