使用antv/G6,实现自定义节点流程图

2024-02-01 08:10

本文主要是介绍使用antv/G6,实现自定义节点流程图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

实现可拖拽的流程图

效果图: 

第一排小图标是可拖拽的

第二排图标是第一排拖拽出来的

// 引入antv-G6
import G6 from '@antv/g6';

html代码

<template><a-card :bordered="false"><div class="identification-img"><img src="../assets/images/1.jpg" alt="工序" class="CONTINUE_PROCESS" title="连续工序" @dragend="drag" /><img src="../assets/images/2.jpg" alt="开始" class="START_PROCESS" title="开始" @dragend="drag" /><img src="../assets/images/3.jpg" alt="结束" class="END_PROCESS" title="结束" @dragend="drag" /></div><div class="main-content-box"><!-- 画布 --><div id="container"></div></div></a-card>
</template>

添加事件,让图片可拖拽

drag(e){let model = {id: (Math.random().toFixed(9) + '').split('.')[1], //节点id,不能重复img: e.target.currentSrc, //自定义节点的小图标type: 'image',   //节点类型label: e.target.alt, //节点标签x: e.offsetX,  //节点水平方向坐标y: e.offsetY - 50, //节点竖直方向坐标//style 节点的样式,用于设置节点的外观,可以包括填充颜色、边框颜色、线宽等style: {stroke: '#000', //边框颜色,用于定义节点的边框颜色。fill: '#C6E5FF',  //节点类型},// labelCfg 用于定义标签文本的样式和位置,可以包括字体大小、颜色、位置偏移等labelCfg: {style: {fontSize: 16,//标签文本的字体大小},position: 'bottom', //标签文本的字的位置},}// 增加节点this.graph.addItem('node', model)},

初始化的图数据,是一个包括 nodes (节点)数组和 edges (线)数组的对象。

getInit() {const width = container.scrollWidthconst height = container.scrollHeight || 500let sourceAnchorIdx, targetAnchorIdx, sourceItem, targetItemthis.graph = new G6.Graph({container: 'container',width, //画布宽height,//画布高// plugins: [contextMenu], //右击菜单自定义modes: {// 拖拽节点和连线default: ['drag-node',{type: 'create-edge',// 线的链接(开始)shouldBegin: (e) => {// avoid beginning at other shapes on the nodeif (e.target && e.target.get('name') !== 'anchor-point') return falsesourceItem = e.itemsourceAnchorIdx = e.target.get('anchorPointIdx')e.target.set('links', e.target.get('links') + 1) // cache the number of edge connected to this anchor-point circlereturn true},// 线的链接(结束)shouldEnd: (e) => {// avoid ending at other shapes on the nodeif (e.target && e.target.get('name') !== 'anchor-point') return falsetargetItem = e.itemtargetAnchorIdx = e.target.get('anchorPointIdx')e.target.set('links', e.target.get('links') + 1) // cache the number of edge connected to this anchor-point circlereturn true// if (this.checkEdge(sourceItem, targetItem)) {//   if (e.target) {//     targetAnchorIdx = e.target.get('anchorPointIdx')//     e.target.set('links', e.target.get('links') + 1) // cache the number of edge connected to this anchor-point circle//     return true//   }//   targetAnchorIdx = undefined//   return false// }return false},},],},defaultNode: {size: [60, 60],type: 'image',img: require('../assets/images/start.jpeg'),color: '#ffffff',style: {// lineWidth: 20,stroke: '#000',fill: '#C6E5FF',// radius: 5},labelCfg: {style: {fontSize: 16,},position: 'bottom',},anchorPoints: [[0.5, 0],[1, 0.5],[0.5, 1],[0, 0.5],],},defaultEdge: {type: 'polyline',size: 3, //工序间的线的粗细color: '#c8c8c8',style: {endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z',fill: '#c8c8c8',},lineAppendWidth: 2, //边的击中范围lineWidth: 3, //边阴影大小radius: 5,},},})this.graph.render()G6.registerNode('image',{// draw anchor-point circles according to the anchorPoints in afterDrawafterDraw(cfg, group) {const bbox = group.getBBox()bbox.height = 60const anchorPoints = this.getAnchorPoints(cfg)anchorPoints.forEach((anchorPos, i) => {group.addShape('circle', {attrs: {r: 7, //工序之间连接点的大小x: bbox.x + bbox.width * anchorPos[0],y: bbox.y + bbox.height * anchorPos[1],fill: '#fff',stroke: '#5F95FF',},name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point')anchorPointIdx: i, // flag the idx of the anchor-point circlelinks: 0, // cache the number of edges connected to this shapevisible: false, // invisible by default, shows up when links > 1 or the node is in showAnchors state})})},getAnchorPoints(cfg) {return (cfg.anchorPoints || [[0, 0.5],[0.33, 0],[0.66, 0],[1, 0.5],[0.33, 1],[0.66, 1],])},// response the state changes and show/hide the link-point circlessetState(name, value, item) {if (name === 'showAnchors') {const anchorPoints = item.getContainer().findAll((ele) => ele.get('name') === 'anchor-point')anchorPoints.forEach((point) => {if (value || point.get('links') > 0) point.show()else point.hide()})}},},'image')// 鼠标移入显示连接线的四个点this.graph.on('node:mouseenter', (e) => {this.graph.setItemState(e.item, 'showAnchors', true)})// 鼠标移出隐藏连接线的四个点this.graph.on('node:mouseleave', (e) => {this.graph.setItemState(e.item, 'showAnchors', false)})},

如图所示

图一是鼠标移出隐藏连接点,图二是鼠标移入显示连接点

  // 鼠标移入显示连接线的四个点this.graph.on('node:mouseenter', (e) => {this.graph.setItemState(e.item, 'showAnchors', true)})// 鼠标移出隐藏连接线的四个点this.graph.on('node:mouseleave', (e) => {this.graph.setItemState(e.item, 'showAnchors', false)})

这篇关于使用antv/G6,实现自定义节点流程图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/666631

相关文章

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》:本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3

Jsoncpp的安装与使用方式

《Jsoncpp的安装与使用方式》JsonCpp是一个用于解析和生成JSON数据的C++库,它支持解析JSON文件或字符串到C++对象,以及将C++对象序列化回JSON格式,安装JsonCpp可以通过... 目录安装jsoncppJsoncpp的使用Value类构造函数检测保存的数据类型提取数据对json数

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

springboot整合 xxl-job及使用步骤

《springboot整合xxl-job及使用步骤》XXL-JOB是一个分布式任务调度平台,用于解决分布式系统中的任务调度和管理问题,文章详细介绍了XXL-JOB的架构,包括调度中心、执行器和Web... 目录一、xxl-job是什么二、使用步骤1. 下载并运行管理端代码2. 访问管理页面,确认是否启动成功

使用Nginx来共享文件的详细教程

《使用Nginx来共享文件的详细教程》有时我们想共享电脑上的某些文件,一个比较方便的做法是,开一个HTTP服务,指向文件所在的目录,这次我们用nginx来实现这个需求,本文将通过代码示例一步步教你使用... 在本教程中,我们将向您展示如何使用开源 Web 服务器 Nginx 设置文件共享服务器步骤 0 —

Java中switch-case结构的使用方法举例详解

《Java中switch-case结构的使用方法举例详解》:本文主要介绍Java中switch-case结构使用的相关资料,switch-case结构是Java中处理多个分支条件的一种有效方式,它... 目录前言一、switch-case结构的基本语法二、使用示例三、注意事项四、总结前言对于Java初学者

Golang使用minio替代文件系统的实战教程

《Golang使用minio替代文件系统的实战教程》本文讨论项目开发中直接文件系统的限制或不足,接着介绍Minio对象存储的优势,同时给出Golang的实际示例代码,包括初始化客户端、读取minio对... 目录文件系统 vs Minio文件系统不足:对象存储:miniogolang连接Minio配置Min