vue+antvG6实现网络拓扑编辑功能

最新推荐文章于 2024-06-20 22:10:34 发布

梓·谦

最新推荐文章于 2024-06-20 22:10:34 发布

阅读量2.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54700364/article/details/129682902

版权

本文介绍了如何利用Vue.js和Antv G6框架，结合自定义节点、动画和边上的监控项，实现一个网络拓扑编辑功能。首先，通过参考案例搭建基本框架，接着详细讲解自定义节点、动画的实现过程，解决G6边监控项的定制需求。此外，还阐述了编辑界面中所有属性的可配置性以及数据的存储方法。

摘要由CSDN通过智能技术生成

实现方法

1.参照案例搭建框架

参考链接:https://github.com/keman5/welabx-g6

2.造轮子

1.自定义节点

带徽标的和监控项的节点
实现代码:

G6.registerNode(
            "card-node",
            {
   
                drawShape: function drawShape(cfg, group) {
   
                    const shape = group.addShape("rect", {
   
                        attrs: {
   
                            x: 0,
                            y: 0,
                            width: 80,
                            height: 80,
                        },
                        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                        name: "main-box",
                        draggable: true,
                    });
                    // left icon
                    group.addShape("image", {
   
                        attrs: {
   
                            x: 0,
                            y: 0,
                            height: 80,
                            width: 80,
                            img: cfg.img,
                        },
                        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                        name: "node-icon",
                    });
                    group.addShape("rect", {
   
                        attrs: {
   
                            x