vue使用antv-x6 绘制流程图DAG图

注册节点两种方法:

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

import { register } from "@antv/x6-vue-shape";

1.x 的写法:

javascript 复制代码
registerCustomNode() {
      // demo
      Graph.registerNode(
        "custom-polygon",
        {
          inherit: "polygon",
          width: 66,
          height: 36,
          markup: [
            {
              tagName: "polygon",
              selector: "body",
            },
            {
              tagName: "text",
              selector: "label",
            },
          ],
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
          ports: {
            ...ports,
            // items: [ // 这里是限制连接点多少个的地方
            //   {
            //     group: 'top',
            //   },
            //   {
            //     group: 'bottom',
            //   },
            // ],
          },
        },
        true
      );

      Graph.registerNode(
        "custom-circle",
        {
          inherit: "circle",
          width: 45,
          height: 45,
          markup: [
            {
              tagName: "circle",
              selector: "body",
            },
            {
              tagName: "text",
              selector: "label",
            },
          ],
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
          ports: { ...ports },
        },
        true
      );

      // 自定义节点
      Graph.registerNode(
        "dag-node",
        {
          inherit: "rect",
          width: 180,
          height: 36,
          markup: [
            {
              tagName: "rect", // 标签名称
              selector: "body", // 选择器
            },
            {
              tagName: "image",
              selector: "image1",
            },
            {
              tagName: "text",
              selector: "label",
            },
            {
              tagName: "image",
              selector: "image2",
            },
          ],
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "rgba(255, 255, 255, 0.3)",
              fill: "#1D2035",
            },
            image1: {
              "xlink:href": imgCot.logo,
              width: 16,
              height: 16,
              x: 12,
              y: 12,
            },
            label: {
              fontSize: 12,
              fill: "rgba(255, 255, 255, 0.9)",
            },
            image2: {
              "xlink:href": imgCot.logo,
              width: 16,
              height: 16,
              x: 12,
              y: 12,
              refX: "80%",
            },
          },
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#C2C8D5",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#C2C8D5",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
          },
        },
        true
      );
   },

2.x 的写法: 注册vue组件节点

javascript 复制代码
registerCustomVueNode() {
      register({
        shape: "dag-node",
        width: 185,
        height: 40,
        component: DataBase,
        ports: {
          groups: {
            top: {
              position: "top",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            bottom: {
              position: "bottom",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
          },
        },
      });
    },
相关推荐
2301_768350231 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:1 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛2 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼2 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔3 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗3 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥3 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial3 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front3 小时前
面试是一门学问
前端·面试
90后的晨仔3 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js