x6.js 流程图绘制笔记,常用函数

官方参考网站如下:https://antv-x6.gitee.io/zh/docs/tutorial/about

安装x6

输入以下命令

 npm install @antv/x6 --save

引用插件代码如下:

import { Graph } from '@antv/x6';

创建绘制区域

this.guiX6 = new Graph({
    container: document.querySelector('.guix6'),
    width: 800,
    height: 600,
    background: {
    color: '#fffbe6', // 设置画布背景颜色
    },
    grid: {
        size: 10,      // 网格大小 10px
        visible: true, // 渲染网格背景
    },
  });
  

 插入数据并渲染

this.guiX6.fromJSON({
  // 节点
  nodes: [
    {
      id: 'node1', // String,可选,节点的唯一标识
      x: 40,       // Number,必选,节点位置的 x 值
      y: 40,       // Number,必选,节点位置的 y 值
      width: 80,   // Number,可选,节点大小的 width 值
      height: 40,  // Number,可选,节点大小的 height 值
      label: '开始~~' // String,节点标签
    },
    {
      id: 'node2', // String,节点的唯一标识
      x: 160,      // Number,必选,节点位置的 x 值
      y: 180,      // Number,必选,节点位置的 y 值
      width: 80,   // Number,可选,节点大小的 width 值
      height: 40,  // Number,可选,节点大小的 height 值
      label: '结束' // String,节点标签
    },
  ],
  // 边
  edges: [
    {
      source: 'node1', // String,必须,起始节点 id
      target: 'node2' // String,必须,目标节点 id
    }
  ]
})

效果如下图:

添加新节点

let data = new Shape.Circle({
        id: 'node3',
        x: 280,
        y: 200,
        width: 60,
        height: 60,
        label: 'circle',
        zIndex: 2,
    })
this.guiX6.addNode(data)

这里的data打印出来结构如下

连接节点

这里的node1与node2则为以上节点的id,节点连接是根据id来连接的。

const rect = this.guiX6.addEdge({
  shape: 'edge', // 指定使用何种图形,默认值为 'edge'
  source: node1,
  target: node2,
})

Graph内置常用函数

根据id获取节点对象

有时候节点不断的添加,节点会越来越多,如果要改某个节点就需要一个函数来查询节点信息。这里的节点信息与以上new Shape.cilcle的结构一样。

this.guiX6.getCellById('node1')

获取所有对象

this.guiX6.getNodes()

如下图

获取整个节点json

流程配置好之后,我们需要将配置好的数据返回给后端,后端制定相关流程,所以需要导出数据才行,如果是以上导出对象,则处理起来非常复杂,可用以下内置json函数导出

this.guiX6.toJSON()

以下json数据存储到服务器即可。 

节点内置函数

更新节点

流程图处理基础的添加数据,渲染数据以外还避免不了交互。比如点击某个按钮需要改变节点的状态,所以这里不得不再学习一下更新节点的函数。

先通过id获取要更新的节点,然后设置其属性内容即可

let node1 = this.getCellById('node1')
node1.attr({
    body: {
      fill: 'blue',
    },
    label: {
      text: '我已更新',
      fill: 'white',
    },
  })

 如下图:

 guiplan开发工具,可视化开发一键使用

当然以上任何一个技术都是需要研究成本,以上功能差不多耗费两天时间才整理出来,后续还会在此文章中持续更新其他的常见的方法。但我们使用的时候确实是要繁琐的多,虽然有了这个笔记可以快速复制代码,但想快速整出一个demo直接用还是效率低了很多,所以这次我们可以借助guiplan开发工具来快速使用。

在guiplan开发工具中找到流程图插件如下图:

点击x6流程图,即可一键将整个做好的demo插入到项目中。

不仅会自动按照以上流程安装好插件,引用好插件。甚至整个常用的函数也会自动封装好。整个测试案例也会写好。如下图:

这样我们二次开发要用那个功能,只需一键插入即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/433028.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

个人社区 项目测试

目 录 一.背景及介绍二.功能详情三.手动测试1.编写测试用例2.测试 一.背景及介绍 该项目采用了前后端分离技术,把我们的数据保存到数据库中,操作对象是用户和个人文章编辑保存,前端的页面实现了登录,列表,编辑&#x…

基于单片机的蓝牙无线密码锁设计

目 录 摘 要 Ⅰ Abstract Ⅱ 引 言 1 1 系统总体设计 3 1.1 系统设计要求 3 1.2 系统设计思路 3 2 系统硬件设计 5 2.1 设计原理 5 2.2 主控模块 5 2.3 芯片模块 8 2.4 矩阵键盘模块 9 2.5 液晶显示模块 10 2.6 继电器驱动模块 12 2.7 蜂鸣器模块 13 2.8 蓝牙模块 14 3 系统软…

鸿蒙4.0-DevEco Studio界面工程

DevEco Studio界面工程 DevEco Studio 下载与第一个工程新建的第一个工程界面回到Project工程结构来看 DevEco Studio 下载与第一个工程 DevEco Studio 下载地址: https://developer.harmonyos.com/cn/develop/deveco-studio#download 学习课堂以及文档地址&#x…

Docker 快速入门实操教程(完结)

Docker 快速入门实操教程(完结) Docker,启动! 如果安装好Docker不知道怎么使用,不理解各个名词的概念,不太了解各个功能的用途,这篇文章应该会对你有帮助。 前置条件:已经安装Doc…

Vue.js+SpringBoot开发天然气工程运维系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程 12.2.2 流程 22.3 各角色功能2.3.1 系统管理员功能2.3.2 用户服务部功能2.3.3 分公司(施工单位)功能2.3.3.1 技术员角色功能2.3.3.2 材料员角色功能 2.3.4 安…

nRF52832——GPIO端口的应用

nRF52832——GPIO端口的应用 nRF52832 GPIO 端口资源描述nRF52832 GPIO 寄存器介绍GPIO 端口状态的设置GPIO 输出设置 nRF52832 GPIO 输出应用点亮第一个 LED 灯硬件部分Keil 工程搭建 蜂鸣器驱动硬件设计程序编写测试验证 nRF52832 GPIO 输入应用GPIO 输入扫描流程机械按键输入…

Vue3兄弟组件传值(同级别组件传值Vue3)

简述: Vue3兄弟组件传值,我们可以使用"Mitt"插件来实现。通过使用事件总线的方式,我们可以将数据从一个组件传递给另一个组件,实现兄弟组件之间的通信。 或者利用 Vue 3 自身的provide 和 inject 响应式 API 来实现兄弟…

STM32FreeRTOS消息队列(STM32Cube高效开发)

文章目录 一、队列(一)简介(二)FreeRTOS队列特点1、入队阻塞:队列满了,此时无法继续写入数据2、出队阻塞:队列为空,此时无法读出数据3、入队阻塞解除,有多个任务等待时&a…

实战:基于特征词的语音唤醒

本章前面介绍了纯理论知识,目的是阐述语音识别的方法。接着搭建了开发环境,让读者可以动手编写代码。下面以识别特定词为例,使用深度学习方法和Python语言实现一个实战项目——基于特征词的语音唤醒。 说明:本例的目的是演示一个…

当Sora风靡,AI风潮吹醒金融科技

以下文章来源:凤凰网 前有OpenAI发布了Sora, 后有苹果放弃了秘密进行了十年的造车项目,转身拥抱AI, 再有国内市场上此起彼伏的AI呐喊声, 一场以AI为主导的新热浪,正在来袭。 当AI的风潮开始兴盛&#x…

JavaScript 原型链继承:掌握面向对象的基础

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

springboot + jpa + 达梦数据库兼容 Mysql的GenerationType.IDENTITY主键生成策略

导入达梦数据库对hibernate的方言包 <dependency><groupId>com.dameng</groupId><artifactId>DmDialect-for-hibernate5.6</artifactId><version>8.1.2.192</version></dependency>配置文件中添加方言配置和主键生成策略配置…

(译) 理解 Prometheus 的范围向量 (Range Vector)

Prometheus 中 Range Vector 的概念是有一点不直观的&#xff0c;除非你彻底阅读并理解了官方提供的文档。谁会这样做呢&#xff0c;去读官方文档&#xff1f;大多的人应该会花些错误的时间去做了一些错误的事情&#xff0c;然后随机去寻找一篇像本文一样的文章去理解这个概念&…

2024年Java者未来的出路在哪里,java多线程面试

重要 大环境对于我们能力要求越来越高&#xff0c;医学专家又说今年冬天新冠肺炎将“席卷重来”。 如果疫情再次爆发&#xff0c;势必将再次影响企业的正常运作&#xff0c;一波裁员浪潮你又能否抗住&#xff1f; 不管如何&#xff0c;明年金三银四又是一波跳槽时机&#xf…

AbaqusCST仿真软件功能对比简介

一、功能对比 支持维度CST&#xff1a;用于设计、分析和优化电磁部件及系统。适用于整个 EM 范围内各类应用领域的电磁场解算。Abaqus&#xff1a;ABAQUS 是一套功能强大的工程模拟的有限元软件&#xff0c;其解决问题的范围从相对简单的线性分析到复杂的非线性问题。 ABAQUS 包…

基于springboot+vue的精简博客系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

flutter弹窗动画,2024年上半年最接地气的Android面经

正文 腾讯研发人数将近 2 万人&#xff0c;T4 级别的人数大概也不超过 500 人&#xff0c;这还是在近两年 T3 到 T4 级别人数增多的情况下。 该资料一共有五大章节&#xff0c;452页&#xff0c;是这位腾讯T4大佬耗时半个月熬夜整理出来的。 目录 第一章 深入解析 Binder. …

Java面试题【必知必会】Mybatis常见面试题(2024)

近期一直在准备面试&#xff0c;所以为了巩固知识&#xff0c;也为了梳理&#xff0c;整理了一些java的基础面试题&#xff01;同时也希望各位英雄和女侠能够补充&#xff01;不胜荣幸&#xff01;&#xff01;&#xff01; 名称地址Java面试题【必知必会】基础&#xff08;202…

Web3 赛道屠夫:「铁顺」是谁?

撰文&#xff1a;Terry 加密世界从不缺传奇故事&#xff0c;从不会编程的「失业青年」Hayden Adams 一入 Web3 便推出巅峰之作 Uniswap&#xff08;《交易平台搅局者「Uniswap 之父」&#xff0c;不会编程的「失业青年」&#xff0c;出手即巅峰》&#xff09;&#xff0c;到 An…

VMware虚拟机安装linux教程

CentOS7下载 下载 (centos.org)https://www.centos.org/download/新建虚拟机 选择自定义安装 这里要注意兼容性&#xff0c;如果是VMware12创建的虚拟机复制到VM11、10或者更低的版本会出现一不兼容的现象。如果是用VMware10创建的虚拟机在VMware12中打开则不会出现兼容性问题…