antv x6连接桩hover效果（使用element-plus Tooltip组件实现展示连接桩名字）

于 2024-05-21 14:31:03 发布
阅读量360 收藏 2
点赞数 12
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67095885/article/details/139091346
版权

因为官网的演示案例是react+antd,而我的是vue3+element,实现效果如下图

具体实现代码如下,在实例化X6的时候通过onPortRendered这个钩子函数里面使用createVNode去给每一个连接桩节点添加自定义的dom,在结合element UI的组件去使用

1首先引入需要用到的函数

import { ref, onMounted, createVNode, render } from "vue";
import { Graph, Shape, Markup } from "@antv/x6";
import { ElTooltip } from "element-plus";

2在创建节点的时候，使用 portMarkup: [Markup.getForeignObjectMarkup()]，portMarkup 是 AntV X6 中用于定义连接桩（ports）外观的属性。使用 Markup.getForeignObjectMarkup() 可以将连接桩定义为 foreignObject，这样可以在连接桩中嵌入任意的 HTML 或 SVG 内容

 const srcList = [
    "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
    "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
    "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
    "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
  ];
  const imgNodes = srcList.map((item) => {
    return graph.value.createNode({
      shape: "image", //可选值：Rect Circle Ellipse Polygon Polyline Path Image HTML TextBlock BorderedImage EmbeddedImage InscribedImage Cylinder
      imageUrl: item,
      attrs: {
        body: {
          fill: "#f5f5f5",
          stroke: "#d9d9d9",
          strokeWidth: 1,
        },
      },
      width: 100,
      height: 60,
      portMarkup: [Markup.getForeignObjectMarkup()],
      ports: { ...customPorts },
    });
  });

3在配置连接桩时不要使用circle，要使用fo,具体配置如图

4 在onPortRendered钩子函数里添加如下代码

onPortRendered(args) {
      const selectors = args.contentSelectors;
      const container = selectors && selectors.foContent;
      if (container) {
        const portName = args.port.label && args.port.label.text;
        const dom = createVNode(
          ElTooltip,
          {
            effect: "dark",
            content: portName,
            placement: "top-start",
          },
          [
            createVNode("div", {
              class: "createVNode",
            }),
          ]
        );
        render(dom, container);
      }
//记得添加样式 
::v-deep .createVNode {
  width: 100%;
  height: 100%;
  border: 2px solid #31d0c6;
  border-radius: 100%;
  background: #fff;
  box-sizing: border-box;
}

完结

完整代码如下

<template>
  <div class="home">
    <div class="left" id="stencil"></div>
    <div class="right" id="container"></div>
    <div class="tool"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, createVNode, render } from "vue";
import { Graph, Shape, Markup } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Snapline } from "@antv/x6-plugin-snapline";
import { basicPorts, customPorts } from "./ports";
import { NodeGroup } from "./shape";
import { ElMessage, ElTooltip } from "element-plus";
const stencil = ref(null);
const graph = ref(null);
onMounted(() => {
  initGraph();
});
const initGraph = () => {
  const container = document.getElementById("container");
  graph.value = new Graph({
    container: container,
    width: container.offsetWidth,
    height: container.offsetHeight,
    autoResize: true,
    background: {
      color: "#fff", // 设置画布背景颜色
    },
    grid: {
      size: 10, // 网格大小
      visible: true, // 是否显示网格
      type: "doubleMesh", // 网格类型，双网格
      args: [
        {
          color: "#cccccc", // 网格颜色
          thickness: 1, // 网格线条宽度
        },
      ],
    },
    scroller: {
      enabled: false, // 是否启用滚动
      pageVisible: false, // 是否显示分页
      pageBreak: false, // 是否显示分页断开线
      pannable: false, // 是否允许拖动画布
    },
    mousewheel: {
      enabled: true, // 是否启用鼠标滚轮缩放
      modifiers: ["ctrl", "meta"], // 按下哪些键可以使用滚轮缩放
      minScale: 0.5, // 最小缩放比例
      maxScale: 2, // 最大缩放比例
    },
    connecting: {
      anchor: "center", // 连接点位置
      connectionPoint: "anchor", // 连接点类型
      allowBlank: true, // 允许连接到空白处
      highlight: true, // 高亮可连接的连接点
      snap: true, // 是否自动吸附
      allowMulti: true, // 是否允许相同起始和终止节点之间创建多条边
      allowNode: false, // 是否允许连接到节点
      allowBlank: false, // 是否允许连接到空白点
      allowLoop: false, // 是否允许创建循环连线
      allowEdge: false, // 是否允许连接到另一个边
      highlight: true, // 是否高亮显示可用连接点或节点
      connectionPoint: "anchor", // 连接点类型
      anchor: "center", // 锚点位置
      createEdge() {
        // X6 的 Shape 命名空间中内置 Edge、DoubleEdge、ShadowEdge 三种边
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: "#000",
              strokeWidth: 2,
              strokeDasharray: null,
              targetMarker: null,
            },
            // outline: {
            //   stroke: "#73d13d",
            //   strokeWidth: 15,
            // },
          },
          router: {
            name: "manhattan",
          },
        });
      },

      validateConnection({
        sourceView,
        targetView,
        sourceMagnet,
        targetMagnet,
      }) {
        if (sourceView === targetView) {
          return false; // 禁止自身连接
        }
        if (!sourceMagnet) {
          return false; // 禁止无连接点的起始连接
        }
        if (!targetMagnet) {
          return false; // 禁止无连接点的终止连接
        }
        return true;
      },
    },
    onPortRendered(args) {
      const selectors = args.contentSelectors;
      const container = selectors && selectors.foContent;
      if (container) {
        const portName = args.port.label && args.port.label.text;
        const dom = createVNode(
          ElTooltip,
          {
            effect: "dark",
            content: portName,
            placement: "top-start",
          },
          [
            createVNode("div", {
              class: "createVNode",
            }),
          ]
        );
        render(dom, container);
      }
      console.log(container);
    },
    panning: {
      enabled: true, // 是否启用画布拖拽平移
      modifiers: "shift", // 按住 shift 键才能平移画布
    },
    resizing: true, // 是否启用节点缩放
    rotating: true, // 是否启用节点旋转
    selecting: {
      enabled: true, // 是否启用选择功能
      multiple: true, // 是否允许多选
      rubberband: true, // 是否启用框选
      movable: true, // 是否允许移动
      showNodeSelectionBox: true, // 是否显示节点选择框
    },
    snapline: true, // 是否启用对齐线
    history: true, // 是否启用历史记录
    clipboard: {
      enabled: true, // 是否启用剪贴板功能
    },
    keyboard: {
      enabled: true, // 是否启用键盘快捷键
    },
  });
  graph.value.use(
    new Snapline({
      enabled: true,
    })
  );
  initStencil();
  // nodeAddEvent();
};
const initStencil = () => {
  const stencilDom = document.getElementById("stencil");
  stencil.value = new Stencil({
    title: "选择栏",
    target: graph.value,
    stencilGraphWidth: 280,
    collapsable: true,
    groups: [
      {
        name: "basic",
        title: "基础节点",
        graphHeight: 180,
      },
      {
        name: "custom-image",
        title: "系统设计图",
        graphHeight: 400,
      },
      {
        name: "dian-image",
        title: "KM",
        graphHeight: 600,
      },
    ],
    container: stencilDom,
  });
  stencilDom.appendChild(stencil.value.container);

  // stencil.value.load([rect1], "custom-image");
  initNode();
};
const initNode = () => {
  // 基础节点
  const r1 = graph.value.createNode({
    shape: "flow-chart-rect",
    attrs: {
      body: {
        rx: 24,
        ry: 24,
      },
      text: {
        text: "起始节点",
      },
    },
  });
  const r2 = graph.value.createNode({
    shape: "flow-chart-rect",
    attrs: {
      text: {
        text: "流程节点",
      },
    },
  });
  const r3 = graph.value.createNode({
    shape: "flow-chart-rect",
    width: 52,
    height: 52,
    angle: 45,
    attrs: {
      "edit-text": {
        style: {
          transform: "rotate(-45deg)",
        },
      },
      text: {
        text: "判断节点",
        transform: "rotate(-45deg)",
      },
    },
    ports: {
      groups: {
        top: {
          position: {
            name: "top",
            args: {
              dx: -26,
            },
          },
        },
        right: {
          position: {
            name: "right",
            args: {
              dy: -26,
            },
          },
        },
        bottom: {
          position: {
            name: "bottom",
            args: {
              dx: 26,
            },
          },
        },
        left: {
          position: {
            name: "left",
            args: {
              dy: 26,
            },
          },
        },
      },
    },
  });
  const r4 = graph.value.createNode({
    shape: "flow-chart-rect",
    width: 70,
    height: 70,
    attrs: {
      body: {
        rx: 35,
        ry: 35,
      },
      text: {
        text: "链接节点",
      },
    },
  });
  const srcList = [
    "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
    "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
    "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
    "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
  ];
  const imgNodes = srcList.map((item) => {
    return graph.value.createNode({
      shape: "image", //可选值：Rect Circle Ellipse Polygon Polyline Path Image HTML TextBlock BorderedImage EmbeddedImage InscribedImage Cylinder
      imageUrl: item,
      attrs: {
        body: {
          fill: "#f5f5f5",
          stroke: "#d9d9d9",
          strokeWidth: 1,
        },
      },
      width: 100,
      height: 60,
      portMarkup: [Markup.getForeignObjectMarkup()],
      ports: { ...customPorts },
    });
  });
  stencil.value.load([r1, r2, r3, r4], "basic");
  stencil.value.load(imgNodes, "custom-image");
  // 节点被添加到画布显示连接桩
  graph.value.on("node:added", ({ node }) => {
    const ports = node.getPorts();
    ports.forEach((port) => {
      node.portProp(port.id, "attrs/circle/style/visibility", "visible");
    });
  });
};
const edgeCrlorDom = ref(null);
const curSelectNode = ref(null);
const nodeAddEvent = () => {
  graph.value.on("node:port:click", ({ e, node, view }) => {
    e.stopPropagation();
  });
  graph.value.on("node:click", ({ e, x, y, node, view }) => {
    if (e.target.classList.contains("x6-port-body")) {
      return;
    }
    console.log("点击！！！", node);
    // 判断是否有选中过节点
    if (curSelectNode.value) {
      // 移除选中状态
      curSelectNode.value.removeTools();
      // 判断两次选中节点是否相同
      if (curSelectNode.value !== node) {
        node.addTools([
          {
            name: "boundary",
            args: {
              attrs: {
                fill: "#16B8AA",
                stroke: "#2F80EB",
                strokeWidth: 1,
                fillOpacity: 0.1,
              },
            },
          },
          {
            name: "button-remove",
            args: {
              x: "100%",
              y: 0,
              offset: {
                x: 0,
                y: 0,
              },
            },
          },
        ]);
        curSelectNode.value = node;
      } else {
        curSelectNode.value = null;
      }
    } else {
      curSelectNode.value = node;
      node.addTools([
        {
          name: "boundary",
          args: {
            attrs: {
              fill: "#000",
              stroke: "#000",
              strokeWidth: 1,
              fillOpacity: 0.1,
            },
          },
        },
        {
          name: "button-remove",
          args: {
            x: "100%",
            y: 0,
            offset: {
              x: 0,
              y: 0,
            },
          },
        },
      ]);
    }
  });
  // 连线绑定悬浮事件显示删除
  graph.value.on("cell:mouseenter", ({ cell }) => {
    if (cell.shape == "edge") {
      cell.addTools([
        {
          name: "vertices",
          // args: {
          //   attrs: { fill: "#8f8f8f" },
          // },
        },
        {
          name: "segments",
          // args: {
          //   snapRadius: 20,
          //   attrs: { fill: "#8f8f8f" },
          // },
        },
        {
          name: "button-remove",
          args: {
            x: "100%",
            y: 0,
            offset: { x: 0, y: 0 },
          },
        },
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "circle",
                selector: "button",
                attrs: {
                  r: 5,
                  stroke: "#fe854f",
                  "stroke-width": 2,
                  fill: "white",
                  cursor: "pointer",
                },
              },
              {
                tagName: "text",
                textContent: "点击换色",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 5,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            distance: -40,
            onClick({ view }) {
              const edge = view.cell;
              edgeCrlorDom.value = null;
              edgeCrlorDom.value = edge;
              drawer.value = true;
            },
          },
        },
      ]);

      cell.setAttrs({
        line: {
          stroke: "#409EFF",
        },
      });

      cell.zIndex = 99; // 保证当前悬停的线在最上层，不会被遮挡
    }
  });

  graph.value.on("cell:mouseleave", ({ cell }) => {
    if (cell.shape === "edge") {
      cell.removeTools();
      cell.setAttrs({
        line: {
          // stroke: radio.value ? `${radio.value}` : "black",
          stroke: "black",
        },
      });
      cell.zIndex = 100; // 保证未悬停的线在下层，不会遮挡悬停的线
    }
  });
};
</script>
<style scoped>
.home {
  color: #000;
  display: flex;
  height: 100%;
}
.left {
  width: 280px;
  height: 100%;
  background-color: aqua;
  overflow: auto;
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
.right {
  flex: 1;
  height: 100%;
}
.tool {
  width: 280px;
  height: 100%;
  
}
::v-deep .createVNode {
  width: 100%;
  height: 100%;
  border: 2px solid #31d0c6;
  border-radius: 100%;
  background: #fff;
  box-sizing: border-box;
}
</style>

STAY470
关注
  • 12
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
antv X6基于vue3+Ts实现线和节点的tooltip
furfur-jiang的博客
07-19 4351
antv X6基于vue3+Ts实现线和节点的tooltip
vue2+@antv/x6@1.x版本+element-ui实现节点/边contextMenu右键菜单和tooltip提示框
最新发布
不定期进行技术分享
05-06 342
【代码】vue2+@antv/x6@1.x版本+element-ui实现节点/边contextMenu右键菜单和tooltip提示框。
antv x6连线与取消连线的操作+自定义连接桩+节点选择/框选
一枚不断学习的小码农一枚~
08-30 7993
antv x6连线样式，连线与取消连线的操作，自定义连接桩样式及位置，节点选择/框选的操作，获取所有边与节点
antv x6 连接桩
dww666的博客
02-22 3450
antv x6 连接桩定义及设置
antv+x6常见的React转vue写法（持续更新）
yuhaiyang11的博客
06-25 489
使用vue3.0实现鼠标经过Tooltip提示。
基于Vue2+element-ui+AntV X6实现的流程图编辑器
11-02
基于Vue2+element-ui+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json...
一套基于vue3、element-plus、typescript4、vite3的后台集成方案
05-03
使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为集成了很...
基于Vue2+element-ui+AntV X6 实现的流程图编辑器
07-25
基于Vue2+element-ui+AntV X6 流程图编辑器，框架核心功能已搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json数据加以...
antv/G6图谱（2）自定义Tooltip及报错处理
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
11-07 640
自定义className，不使用默认的，默认的会有默认样式，然后自己写样式。1、自定义className。
vue2+antv-x6+画布背景图
Moca_H的博客
01-16 1269
antv-x6+vue2；backgound-image 中的坑
【Antv G6】关系图谱鼠标覆盖节点和边 显示tooltip 以及部分节点tooltip不显示问题处理 节点和边常用事件的监听
hzxOnlineOk的博客
10-12 3330
以下注释掉的这种为节点添加tooltip的方式，会有覆盖节点的问题出现。
AntV X6结合Vue组件渲染节点，并与节点组件进行双向的数据交互
南七小僧的学海无涯
05-28 2676
项目使用.0 + Element-ui 框架，在开发流程功能时自定义节点，为实现稍复杂的样式以及操作交互，使用 markup + attrs的方式的话，比较麻烦，且难以结合使用 Element-ui的交互组件，因此换成结合 Vue组件渲染方式注册自定义节点（官方文档相对简单了点，老报错，搞了老半天，嘤嘤嘤）
vue3+antv x6自定义节点样式
qq_40934617的博客
08-11 4060
vue3+antv x6自定义节点样式
antv/g6使用教程及图配置
study_way的博客
10-30 3161
G6 是一款由蚂蚁金服 AntV 团队开发的 JavaScript 图形引擎，用于构建各种交互式可视化图形，包括但不限于图表、网络拓扑图、关系图、流程图等。无论是数据分析、决策支持，还是信息可视化，G6 都是一个强大的工具。丰富的图形元素支持：G6 支持多种图形元素，包括节点、边、群组、标签等，这些元素可以被自定义和样式化，以创建各种类型的图形。交互性：G6 可以实现各种交互功能，如缩放、平移、拖拽、连线、节点拖拽等，以提供丰富的用户体验。自动布局。
antv/x6 边添加鼠标悬浮高亮和删除功能
.伊泽瑞尔
02-04 1056
antv/x6 边添加鼠标悬浮高亮和删除功能
antv-x6图形化建模（三）连接桩对应多个输入或输出时区别连线
weixin_42777968的博客
09-14 1225
获取数据时判断是否为多输入或输出，创建连线时添加字符串标识 let fromPort = el.connectionfrom_original_name; fromPort = fromPort.includes('[')?(el.connectionfrom+'[]'):el.connectionfrom; let toPort = el.connectionto_original_name...
Antv X6 动态连线
hongtoushan的博客
07-23 9936
antv x6的使用
基于vue2+element-ui+antv x6实现的流程图编辑器
05-01
流程图编辑器是一款基于vue2、element-ui和antv x6技术实现的软件系统，主要用于制作流程图、时序图、状态图、UML图等。该编辑器具有操作简便、功能强大、易于扩展的特点，为用户提供全面的流程图编辑服务，能够实现快速制图、实时预览、导出图片等功能。 在该编辑器中，用户可以通过拖拽节点、连线等方式创建不同类型的图形元素，并可以对这些元素进行编辑、样式调整等操作。同时，编辑器还提供了丰富的工具和组件，例如文本框、颜色选择器、撤销重做等功能，让用户能够更轻松地完成设计工作。此外，编辑器还支持多种布局算法，能够自动对元素进行排版，提高了制图效率。 采用了antv x6技术，流程图编辑器的渲染效果非常出色，设计的图形具有高度的美观性和可读性。而element-ui则为编辑器提供了强大的UI组件库，使得用户的使用体验更加流畅。 总之，基于vue2、element-ui和antv x6实现的流程图编辑器是一款功能强大、易于使用的图形设计工具，为用户提供了高效、高质的流程图制作服务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值