VUE+antv/x6实现拖拽自定义流程图

最新推荐文章于 2024-04-01 09:39:42 发布
最新推荐文章于 2024-04-01 09:39:42 发布
阅读量1.2w 收藏 62
点赞数 16
分类专栏： antv/X6-VUE 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_zhiwei0728/article/details/120971605
版权

最近公司需要做一个流程图， 看了看antv/X6感觉挺合适，就研究了半个月。 网上也没什么资料，又怕自己忘，就自己记录一下用到得一些事件方法，方便以后再用到可以查阅。

一：实现流程图最重要得就是画布了，官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。

首先最重要得就是下载依赖了， x6在vue中下载得话需要下载两个依赖；

npm install @antv/x6 --save
npm install @antv/x6-vue-shape
把这两个依赖下载好就可以在vue中使用X6了  


首先在页面引入依赖
import "@antv/x6-vue-shape";
import { Graph } from '@antv/x6';

下面开始写代码

在methods里定义一个initX6方法， 然后拿到mounted里调用

initX6() {
      this.graph = new Graph({
        container: document.getElementById("containerChart"), //这是画布需要挂载得ID名字
        width：1000,  //画布宽度
        height: 500, //画布高度
        grid: this.grid, //画布样式， 在modou层自己定义用this调用
        autoResize: true, //跟随窗口自动变化大小
      }); 
    },

需要定义画布背景网格得话可以自己定义， 下面是我自己定义得一个背景网格，直接在grid后面使用this.名字调用就可以。

data(){
    return{
        grid: {
            // 网格设置
            size: 20, // 网格大小 10px
            visible: true, // 渲染网格背景
            type: "mesh",
            args: {
              color: "#D0D0D0",
              thickness: 1, // 网格线宽度/网格点大小
              factor: 10,
            },
          },
        }
    }

这个时候在css里给你的挂载容器定义一个宽高你就可以在页面上看到一个画布了。 给他调整一个位置就开始写节点吧。

新建一个JS文件， 用来定义节点和写拖拽代码。

import '@antv/x6-vue-shape';
import { Addon} from '@antv/x6';
// 拖拽生成四边形
export const startDragToGraph  = (graph,type,e) =>{
    const node = 
    graph.createNode({
    width: 100,  //节点的宽度
    height: 60,   //节点的高度
    attrs: {
      label: {
        text: type,    
        fill: '#000000',
        fontSize: 14,
        textWrap: {
          width: -10 ,
          height: -10,
          ellipsis: true,
        },
      },
      body: {
        stroke: '#000000',
        strokeWidth: 1,
        fill: '#ffffff',
      }
    },
    ports: ports
  })
    const dnd = new Addon.Dnd({target:graph})
    dnd.start(node,e)
}
//下面是锚点的代码。 知道就行了 我就不一一写了。
const ports = {
    groups: {
      // 输入链接桩群组定义
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      // 输出链接桩群组定义
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
    },
    items: [
      {
        id: 'port1',
        group: 'top',
      },
      {
        id: 'port2',
        group: 'bottom',
      },
      {
        id: 'port3',
        group: 'left',
      },
      {
        id: 'port4',
        group: 'right',
      }
    ],
}

定义完节点和锚点以后回到vue页面引入JS文件

import { startDragToGraph } from "../methods.js"; //引入定义好的JS文件


去HTML层加入手动拖拽的节点内容。
<template>
  <div class="warp">
    <div id="containerchart"></div>
    <div
      v-for="(item, index) in List"
      :key="index"
      class="btn"
      :title="item"
      @mousedown="startDrag(item, $event)"
    >
      <span>
        {{ item }}
      </span>
    </div>
  </div>
</template>

//循环的list是自己写的
data() {
    return {
      List: ["内置节点"],
      grid: {
        // 网格设置
        size: 20, // 网格大小 10px
        visible: true, // 渲染网格背景
        type: "mesh",
        args: {
          color: "#D0D0D0",
          thickness: 1, // 网格线宽度/网格点大小
          factor: 10,
        },
      },
    };
  },

然后在methods里定义方法，把type传到js文件里。 

 startDrag(type, e) {
      startDragToGraph(this.graph, type, e);
    },

完成以上你就可以得到如下效果，从右侧拖拽节点到画布上就可以展示了。

 只不过现在拖拽和线条还是有问题的。  接下来解决一下连线的问题。

 data() {
    return {
      List: ["内置节点"],

      
      grid: {
        // 网格设置
        size: 20, // 网格大小 10px
        visible: true, // 渲染网格背景
        type: "mesh",
        args: {
          color: "#D0D0D0",
          thickness: 1, // 网格线宽度/网格点大小
          factor: 10,
        },
      },


      connectEdgeType: {
        //连线方式
        connector: "normal",
        router: {
          name: "",
        },
      },

       //首先在data里定义下面三个内容，下面需要用到
      graph: "",
      type: "grid",
      selectCell: "",
    };
  },

//然后在methods里的initX6方法里加上下面的方法
         connecting: {
          // 节点连接
          anchor: "center",
          connectionPoint: "anchor",
          allowBlank: false,
          snap: true,
        },
         createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: "#1890ff",
                  strokeWidth: 1,
                  targetMarker: {
                    name: "classic",
                    size: 8,
                  },
                  strokeDasharray: 0, //虚线
                  style: {
                    animation: "ant-line 30s infinite linear",
                  },
                },
              },
              label: {
                text: "",
              },
              connector: _that.connectEdgeType.connector,
              router: {
                name: _that.connectEdgeType.router.name || "",
              },
              zIndex: 0,
            });
          },

//注意  这两个方法写到new的Graph实例里面。

//然后给节点写上拖拽事件，这个方法写到initX6方法里，new的Graph实例外。
   this.graph.on("selection:changed", (args) => {
        args.added.forEach((cell) => {
          this.selectCell = cell;
          if (cell.isEdge()) {
            cell.isEdge() && cell.attr("line/strokeDasharray", 5); //虚线蚂蚁线
            cell.addTools([
              {
                name: "vertices",
                args: {
                  padding: 4,
                  attrs: {
                    strokeWidth: 0.1,
                    stroke: "#2d8cf0",
                    fill: "#ffffff",
                  },
                },
              },
            ]);
          }
        });
        args.removed.forEach((cell) => {
          cell.isEdge() && cell.attr("line/strokeDasharray", 0); //正常线
          cell.removeTools();
        });
      });

现在就看到画布上面的内置节点上面的锚点是处于一直显示的状态。 下面给他处理一下。

//需要先在引入的X6方法里添加一个方法
import { Graph,FunctionExt } from "@antv/x6";

在methods里定义一个遍历方法在鼠标移入移出里调用。。

   showPorts(ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? "visible" : "hidden";
      }
    },


然后在方法里给this.garph.on()添加两个鼠标移入移出事件。 移入让锚点显示，移出让锚点隐藏。 这样就可以让画布的节点好看一点了。

//鼠标移入
this.graph.on(
        "node:mouseenter",
        FunctionExt.debounce(() => {
          const container = document.getElementById("containerchart");
          const ports = container.querySelectorAll(".x6-port-body");
          this.showPorts(ports, true);
        }),
        500
      );

//鼠标移出
this.graph.on("node:mouseleave", () => {
        const container = document.getElementById("containerchart");
        const ports = container.querySelectorAll(".x6-port-body");
        this.showPorts(ports, false);
     });

下面是全部的代码

<template>
  <div class="container_warp">
    <div id="containerChart"></div>

    <div
      v-for="(item, index) in List"
      :key="index"
      class="btn"
      :title="item"
      @mousedown="startDrag(item, $event)"
    >
      <span>
        {{ item }}
      </span>
    </div>
  </div>
</template>
<script>
import "@antv/x6-vue-shape";
import { Graph, Shape, FunctionExt } from "@antv/x6";
import { startDragToGraph } from "../methods.js";
export default {
  data() {
    return {
      List: [
        "目录监听",
        "数据组织",
        "影像发布",
        "目标检测",
        "变化检测",
        "地物分类",
        "专家候审",
        "样本入库",
        "影像入库",
        "目标入库",
        "图幅整饰",
        "打包下载",
      ],

      graph: "",
      type: "grid",
      selectCell: "",

      connectEdgeType: {
        //连线方式
        connector: "normal",
        router: {
          name: "",
        },
      },

      grid: {
        // 网格设置
        size: 20, // 网格大小 10px
        visible: true, // 渲染网格背景
        type: "mesh",
        args: {
          color: "#D0D0D0",
          thickness: 1, // 网格线宽度/网格点大小
          factor: 10,
        },
      },
    };
  },

  methods: {
    initX6() {
      this.graph = new Graph({
        container: document.getElementById("containerChart"),
        width: 1000,
        height: 500,
        grid: this.grid,
        connecting: {
          // 节点连接
          anchor: "center",
          connectionPoint: "anchor",
          allowBlank: false,
          snap: true,
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: "#1890ff",
                strokeWidth: 1,
                targetMarker: {
                  name: "classic",
                  size: 8,
                },
                strokeDasharray: 0, //虚线
                style: {
                  animation: "ant-line 30s infinite linear",
                },
              },
            },
            label: {
              text: "",
            },
            connector: _that.connectEdgeType.connector,
            router: {
              name: _that.connectEdgeType.router.name || "",
            },
            zIndex: 0,
          });
        },
      });
      // 鼠标移入移出节点
      this.graph.on(
        "node:mouseenter",
        FunctionExt.debounce(() => {
          const container = document.getElementById("containerChart");
          const ports = container.querySelectorAll(".x6-port-body");
          this.showPorts(ports, true);
        }),
        500
      );
      this.graph.on("node:mouseleave", () => {
        const container = document.getElementById("containerChart");
        const ports = container.querySelectorAll(".x6-port-body");
        this.showPorts(ports, false);
      });

      this.graph.on("selection:changed", (args) => {
        args.added.forEach((cell) => {
          this.selectCell = cell;
          if (cell.isEdge()) {
            cell.isEdge() && cell.attr("line/strokeDasharray", 5); //虚线蚂蚁线
            cell.addTools([
              {
                name: "vertices",
                args: {
                  padding: 4,
                  attrs: {
                    strokeWidth: 0.1,
                    stroke: "#2d8cf0",
                    fill: "#ffffff",
                  },
                },
              },
            ]);
          }
        });
        args.removed.forEach((cell) => {
          cell.isEdge() && cell.attr("line/strokeDasharray", 0); //正常线
          cell.removeTools();
        });
      });
    },

    showPorts(ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? "visible" : "hidden";
      }
    },
    // 拖拽生成正方形或者圆形
    startDrag(type, e) {
      console.log(type, e);
      console.log(this.graph);
      startDragToGraph(this.graph, type, e);
    },
  },
  mounted() {
    this.initX6();
  },
};
</script>
<style lang="less">
#containerChart {
  width: 1000px;
  height: 500px;
  border: 1px solid red;
  float: left;
}
.btn {
  width: 400px;
  float: right;
  margin-right: 500px;
}
</style>

  这样就完成了一个手动生成节点到画布的X6了  剩下的就是一些CSS的问题了。 下面写几个X6的事件。方便以后用到或者查阅

this.garph.on('node:click',()=>{

    //这是点击节点事件

})

  this.graph.on("blank:click", () => {

       //这是点击画布背景事件

});

this.graph.on("cell:click", () => {

        //这是点击连接线事件

});

 // 删除节点
deleteNode() {
   const cell = this.graph.getSelectedCells();
   this.graph.removeCells(cell);
   this.type = "grid";
 },
 //清空画布
deleteAll() {
   this.graph.clearCells();
 },
 //销毁画布
GraphDelete() {
   this.graph.dispose();
},


// 保存png
saveToPNG() {
  //下面保存图片
 this.$nextTick(() => {
   this.graph.toPNG(
     (dataUri) => {
       console.log(dataUri);
       // 下载
       DataUri.downloadDataUri(dataUri, "资产拓扑图.png");
     },
     {
       backgroundColor: "white",
       padding: {
         top: 50,
         right: 50,
         bottom: 50,
         left: 50,
       },
       quality: 1,
       copyStyles: false,
     }
   );

   });
 },



this.graph.toJSON()获取当前画布里的节点所有内容
JSON.stringify(this.graph.toJSON())可以把当前画布的所有节点内容转成JSON串存到本地或者后台
JSON.parse(json); 把json数据整形成数据格式 然后通过fromJSON方法再渲染到画布上。
this.graph.fromJSON(json); 可以把从后台或者本地获取到的json数据整形后渲染到画布上。

下面是个人写的一些经验， 由于网上资料有限，记录一下供以后方便查阅， 写的不好各位大神别喷。  有什么问题的也可以留言私信我。

wang_zhiwei0728
关注
  • 16
    点赞
  • 踩
  • 62
    收藏
    觉得还不错? 一键收藏
  • 33
    评论
专栏目录
AntX6 DAG拖拽流程图：从0到1实现流程图05-连接桩篇
南七小僧的学海无涯
09-14 787
javascript复制代码graph.addNode({ports:{groups: {group1: {attrs: {circle: {r: 4,},group2: {attrs: {circle: {r: 4,},group3: {attrs: {circle: {r: 4,},group4: {attrs: {circle: {r: 4,},items: [})
vue3+antv x6+tsx 制作自定义流程图
09-23
1.使用vue3+antv x6+tsx制作自定义流程图 2.实现自定义拖拉组件。 3.支持自定义拓展。
antV-X6-demo-master.zip
04-16
antv-x6最新示例代码
Vue-X6-Flow：构建可定制化流程图的强大框架
gitblog_00001的博客
04-01 566
Vue-X6-Flow：构建可定制化流程图的强大框架 项目地址:https://gitcode.com/MyButifullyLife/vue-x6-flow Vue-X6-Flow 是一个基于 X6 的 Vue.js 实现的流程图组件库，它提供了一套强大而易用的工具，用于在 Web 应用中创建、编辑和展示交互式流程图。本文将深入探讨这个项目的特性、技术实现以及其可能的应用场景。 项目简介 Vue...
antv x6自定义节点(使用vue渲染节点）
web18296061989的博客
03-05 7704
1、安装@antv/x6-vue-shape # npm npm install @antv/x6-vue-shape # yarn yarn add @antv/x6-vue-shape # 在 vue2 下还需要安装 @vue/composition-api yarn add @vue/composition-api --dev 主文件引入@antv/x6-vue-shape import "@antv/x6-vue-shape"; 安装并应用该包后，指定节点的shape为vue-shape，并
vue-shape.rar
02-05
x6-vue-shape在（antv-x6+vue2+js）中的使用
antv-流程图，一个简易的基于antv x6实现的流程图绘制
12-15
antv-流程图，一个简易的基于antv x6实现的流程图绘制
AntV X6流程图绘制程序（官方示例纯javascript+html+css）
yao136的专栏
08-09 5788
纯javascript+html+css绘制流程图，使用antv x6
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
初识antvX6
qq_52965813的博客
12-08 1374
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
Vue2.0+AntvX6
qq_40287084的博客
03-02 5106
Vue2.0+AntvX6
graphX6.zip
12-06
antv x6自定义节点(使用vue渲染节点）的文件
antv x6 在vue的使用.pdf
12-16
antv x6 在vue的使用
vue中使用antv/x6编写自定义流程
最新发布
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和事件系统实现节点、连线、连接桩的添加、删除功能，节点使用自定义HTML进行绘制。使用其自带的方法获取流程数据，并且可以通过其自带的api进行节点数据设置，以方便在节点上进行数据存储和功能实现。
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-20
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图更加符合用户的个性化需求。 当然，流程图编辑页面还需要支持各种基础操作。提供了复制、剪切、粘贴、撤销、恢复、删除、清空等常用功能，使我们可以轻松地对流程图进行编辑和调整。此外，还支持组合和取消组合节点，方便用户对流程图进行整体管理。 为了适应不同项目的需求，还提供了适配大小、实际比例以及连线模式等功能。这些功能不仅可以帮助我们更好地展示流程图，还可以提高编辑效率。 最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
React中antv X6 2.0的使用体验（含demo）
m0_65104145的博客
08-15 2447
本次在React中使用antv X6 2.0的功能包括：1、节点右键菜单；2、节点自动布局；3、根据列表动态渲染节点；4、节点之间的连线；5、模版引用时的预览功能；6、使用拖拽组件添加节点（包含2种样式 及群组的添加）；
antvx6基础学习
qq_52685664的博客
05-04 710
【代码】antvx6基础学习。
vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
wzy_PROTEIN的博客
02-28 5093
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
基于vue2+element-ui+antv x6实现的流程图编辑器
05-30
很好的问题！ChitGPT可以回答你的问题。基于vue2+element-ui+antv x6实现的流程图编辑器是一种基于Web技术的流程图编辑工具，它可以帮助用户轻松地创建和编辑各种流程图，包括流程图、组织结构图、状态图等。该编辑器具有简洁明了的界面，可以方便地拖拽、连接和编辑各种图形元素，同时支持多种样式和布局选项。通过使用这个编辑器，用户可以快速地创建出高质量的流程图，提高工作效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值