AntvX6-edge

前言

Edge 是边的基类，继承自 Cell，并定义了边的通用属性和方法。

属性

选项	类型	描述
source	TerminalData	起点或起始节点、连接桩信息。
target	TerminalData	终点或终止节点、连接桩信息。
vertices	Point.PointLike[]	路径点。
router	RouterData	路由。
connector	ConnectorData	连接器。
labels	Label[] string[]	标签。
defaultLabel	Label	默认标签

代码

1、容器

<!-- container.vue -->
<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { Graph } from "@antv/x6";
import { onMounted } from "vue";
import { register } from "@antv/x6-vue-shape";
import elmNode from "./elmNode.vue";

register({
  shape: "elm-vue-node",
  component: elmNode,
});

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

  graph.addNode({
    id: "site1",
    shape: "elm-vue-node",
    x: 100,
    y: 100,
    width: 80,
    height: 100,
    data: {
      classType: "test",
    },
  });

  graph.addNode({
    id: "site2",
    shape: "elm-vue-node",
    x: 400,
    y: 400,
    width: 80,
    height: 100,
    data: {
      classType: "test",
    },
  });

  graph.addEdge({
    source: {
      cell: "site1",
      connectionPoint: {
        name: "anchor",
      },
      anchor: {
        name: "top",
      },
    },
    target: {
      cell: "site2",
      connectionPoint: {
        name: "anchor",
      },
      anchor: {
        name: "bottom",
      },
    },
    connector: {
      name: "smooth",
      args: {
        radius: 20,
      },
    },
  });
});
</script>

2、组件

<!-- elmNode.vue -->
<template>
  <div>{{ label }}</div>
  <div class="node-main"></div>
</template>
<script setup lang='ts'>
import { inject, onMounted } from "vue-demi";

const getNode = inject("getNode");
let node = getNode();
let data = node.getData();
let label = data["classType"];
</script>
<style lang='less' scoped>
.node-main {
  width: 61px;
  height: 92px;
  background-image: url("../../assets/site.svg");
  background-size: 61px 92px;
}
</style>

总结

如果需要使用 connectionPoint 和 anchor 来限制锚点位置，则组件需要设置 width 和 height；
antvx6 中的边有非常多的用法：

相关链接

边：https://x6.antv.antgroup.com/api/model/edge
路由：https://x6.antv.antgroup.com/api/registry/router
连接器：https://x6.antv.antgroup.com/api/registry/connector
节点的锚点：https://x6.antv.antgroup.com/api/registry/node-anchor
边的锚点：https://x6.antv.antgroup.com/api/registry/edge-anchor
连接点：https://x6.antv.antgroup.com/api/registry/connection-point