Vue3+TypeScript+AntVX6实现Web组态(从技术层面与实现层面进行分析)内含实际案例教学
摘要
用Vue3+TypeScript+AntVX6实现Web组态(从技术层面与实现层面进行分析),包含画布创建、节点设计、拖拽实现(实际案例)、节点连线、交互功能,后续文章持续更新。
注:本文章可以根据目录进行导航
文档支持
AntVX6使用文档
https://x6.antv.antgroup.com/tutorial/getting-started
AntVX6接口参数文档
https://x6.antv.antgroup.com/api/graph/graph
SVG基础文档
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Introduction
大致描述
个人认为以下图片为AntVX6的一些基础关键(详细请见官方文档)
1.提供了画布的参数修改=>方便面板的构建
2.提供了节点的修改=>可以对节点进行增、删、改,并且可以定制化操作(增代表增加节点、删代表删除节点、改代表修改节点的属性)
3.元素式Cell是节点Node、边Edge的基类,也就是Node、Edge继承于Cell(Cell有的属性Node、Edge都有)
元素、节点、边对应参数截图(节点的学习关键是学习元素的参数,详细见API文档):
具体实现
步骤一:绘制画布
完整代码如下(使用Vue3+TypeScript构建)
<div id="container"></div>const graph = ref<Graph | null>(null);
onMounted(() => {graph.value = new Graph({width: 1800,height: 1200,panning:true,mousewheel:true,background: {color: '#F2F7FA',},container: document.getElementById('container')!, // 断言该值不为 nullgrid: {visible: true,type: 'doubleMesh',args: [{color: '#eee', // 主网格线颜色thickness: 1, // 主网格线宽度},{color: '#ddd', // 次网格线颜色thickness: 1, // 次网格线宽度factor: 4, // 主次网格线间隔},],},});
});
代码解释:
1.我把graph画布单独定义出来,这样就可以定义更多的自定义属性(要记住单独定义完以后要通过graph.value才可以访问里面的属性)。
2.设置画布的大小width、height(官方提供了自动大小autoResize属性,
但是在我代码上一直有一些小bug所以就用自定义的宽和高,没有用自动设置的这个参数,需要的可自行研究)
3.Graph 中通过panning
和mousewheel
配置来实现缩放与平移,鼠标按下画布后移动时会拖拽画布,滚动鼠标滚轮会缩放画布。
4.background为背景色(官方提供自定义背景,并且可以放置图片)
5.配置绘制画布对应的页面区域,并且加上!断言不为空(解决TS报可能为空的错误)
container: document.getElementById('container')!, // 断言该值不为 null
6.设置网格grid(可以直接复制,目前已知作用是让画布更好看)
7.附上对画布尺寸、位置进行操作一些常用的 API
最终的画布效果
步骤二:节点设计
节点本身构造
节点本身构造难点:markup与attrs两个参数,所以我们重点分析。
以下为官方对markup与attrs的解释:
以下是作者本人对这两个参数的理解:
1.首先两者关系是:attrsmarkup(attrs包含于markup,也就是首先要记住attrs是markup中的属性)
2.举个形象的例子来说明 attrs
和 markup
的作用,可以想象你正在搭建一个房子,而这个房子的结构(墙壁、窗户、门等)就是 markup
,而你为这些结构上色、装饰的细节(颜色、边框、材质等)就是 attrs
。
markup
:定义了房子的组成部分,比如墙、窗户、门等。你可以通过它告诉 X6:房子有哪些部分,每个部分是什么类型(是矩形?是图片?是文本?)。attrs
:用来决定这些部分的样子。你可以为墙刷上白色油漆、为窗户加上边框、为门安装一个红色的把手。
3.其实简单理解就是:markup就是定义当前节点或边具有哪些部分,attrs就是改的markup中的对应部分。
4.注意:若加上了markup参数,在 AntV X6 中,markup 是用来定义节点的结构和内容的,控制着节点渲染时使用的 SVG 或 HTML 元素。如果你在 markup 中传递了空数组([]),X6 不会自动生成任何内容,因此即使你定义了 shape 和 imageUrl,也不会有任何元素被渲染出来。
attrs: {},markup: [],
以下代码则正确显示节点。若移除 markup: 如果你移除 markup 属性,X6 将使用默认的标记来渲染节点,这样 shape: ‘image’ 和 imageUrl 的配置会生效,图像将会被渲染出来。
相关文章:
Vue3+TypeScript+AntVX6实现Web组态(从技术层面与实现层面进行分析)内含实际案例教学
摘要 用Vue3+TypeScript+AntVX6实现Web组态(从技术层面与实现层面进行分析),包含画布创建、节点设计、拖拽实现(实际案例)、节点连线、交互功能,后续文章持续更新。 注:本文章可以根据目录进行导航 文档支持 AntVX6使用文档 https://x6.antv.antgroup.com/tutorial…...
【卷积神经网络】LeNet实践
模型建立 数据初始化根据模型搭建前向传播打印模型结构 前向传播数据初始化 def __init__(self):super(LeNet, self).__init__()# 第一层卷积层:# 输入:灰度图像 (1通道,大小 28x28)# 输出:6个特征图 (大小 28x28, 通过padding2保…...
FPGA实现GTP光口数据回环传输,基于Aurora 8b/10b编解码架构,提供2套工程源码和技术支持
目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 GT 高速接口解决方案 3、工程详细设计方案工程设计原理框图用户数据发送模块基于GTP高速接口的数据回环传输架构GTP IP 简介GTP 基本结构GTP 发送和接收…...
Tongweb8命令行使用收集(by lqw)
文章目录 声明对应版本修改thanos用户密码部署应用到默认实例节点相关操作新增节点(一般一个服务器ip只能装一个节点)启动节点(需确认节点没有运行)停止节点删除节点节点新增应用节点查看应用节点启动应用节点停止应用节点卸载应用(谨慎操作,卸载后应用就没有了,建议备份后…...
基于STM32的火灾烟雾报警器设计开题报告
开题报告 题目:基于STM32的火灾烟雾报警器Proteus仿真设计 一、研究背景与意义 随着现代城市化进程的加快,火灾安全问题日益凸显,火灾的早期预警对于减少人员伤亡和财产损失至关重要。传统的火灾报警系统往往依赖于烟雾或温度的单一检测&a…...
go 语言zero项目设置后台运行的几种方式
在 Go 项目中将程序设置为后台运行通常有几种方法。你可以使用 systemd、nohup 或者将 Go 程序作为服务启动。以下是几种常见的方法,分别适用于不同的场景。 ### 1. 使用 nohup 命令将 Go 程序后台运行 nohup 是一个常用的 Linux 工具,它可以将命令行程…...
数据库中的代数运算
这些代数基本运算通常被封装在数据库查询语言中,如SQL中的SELECT、FROM、WHERE等子句,使得用户可以更方便地对数据库进行查询和处理。 下面的介绍基于以下两个关系来说明: 传统的集合运算 并(∪) 合并两个关系中的元组…...
【机器学习】机器学习的基本分类-无监督学习-核密度估计(Kernel Density Estimation, KDE)
核密度估计(Kernel Density Estimation, KDE) 核密度估计(KDE)是一种非参数化方法,用于估计数据的概率密度函数(PDF)。与直方图相比,KDE 能够生成平滑的概率密度曲线,是…...
语义分割——DeeplabV3plus
DeeplabV3plus 是一种先进的用于语义分割任务的深度学习模型。DeepLabV3plus模型采用了编码器-解码器(Encoder-Decoder)结构,通过编码器提取图像特征,再通过解码器将这些特征映射回原始图像尺寸,实现像素级的分类。具体…...
【Leetcode 每日一题 - 扩展】50. Pow(x, n)
问题背景 实现 p o w ( x , n ) pow(x, n) pow(x,n),即计算 x x x 的整数 n n n 次幂函数(即, x n x_n xn)。 数据约束 − 100.0 < x < 100.0 -100.0 \lt x \lt 100.0 −100.0<x<100.0 − 2 31 ≤ n ≤ 2 31 −…...
富士相机基本参数学习
一色彩 富士相机视频调色入门课[上]|胶片模拟,白平衡与色彩|全是样片哦_哔哩哔哩_bilibili 步骤: 1设置曝光模式: 自动模式下拍摄降低难度 2设置白平衡:自动 不满意可以设置 3色彩&…...
MySQL:表的约束
目录 一. 表的约束和约束的目标 二. 空属性 三. 默认值default 四. 列描述 五. zerofill 六. 主键 6.1 建表时定义主键 6.2 去掉主键 6.3 建表后添加主键 6.4 复合主键 七. 自增长 八. 唯一键 九. 外键 一. 表的约束和约束的目标 表…...
Python鼠标轨迹算法(游戏防检测)
一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言,原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势: 模拟…...
Elasticsearch 架构及 Lucene 索引结构原理入门
文章目录 Elasticsearch 整体架构Lucene 索引结构Lucene 倒排索引核心原理倒排索引倒排表(Posting List) Elasticsearch 整体架构 一个 ES Index 在集群模式下,有多个Node(节点)组成,每个节点就是ES的 inst…...
vue3项目通过修改虚拟dom实现向页面上追加内容
前言: demo效果: 1、刚进页面,渲染welcome.vue组件内容。2、向输入框中输入数据按回车,页面上追加text.vue组件内容,输入框中的数据也被传递给text.vue组件,并在页面上进行了展示。3、点击text.vue组件中的…...
Java:集合(List、Map、Set)
文章目录 1. Collection集合1-1. 迭代器遍历方式1-2. 通过for循环进行遍历1-3. forEach遍历 2. List集合2-1. ArrayList底层实现原理2-2. LinkedList底层实现原理 3. Set集合3-1. HashSet 底层实现3-2. LinkedHashSet 底层实现3-3. TreeSet 4. Collection集合->总结5. Map集…...
208-Base Camera Link 图像信号模拟器
1、板卡概述 该板卡是基于Altra FPGA处理芯片EP3C40F484C8(兼容EP3C16F484C8),模拟产生自定义分辨率的Camera Link 图像信号,并以base Camera Link输出。主要用于作为Camera Link 图像信号模拟器,模拟各类C…...
【创建模式-蓝本模式(Prototype Pattern)】
目录 Overview应用场景代码演示JDK Prototype pattern 更优实践泛型克隆接口 https://doc.hutool.cn/pages/Cloneable/#%E6%B3%9B%E5%9E%8B%E5%85%8B%E9%9A%86%E7%B1%BB The prototype pattern is a creational design pattern in software development. It is used when the t…...
(一)强化学习基础概念及学习路径
目录 前言 一、强化学习是什么? 二、强化学习中的基本概念 1.状态 2.动作 3.奖励 4.策略 5.智能体 6.环境 7.智能体与环境交互 三、强化学习路径 总结 前言 强化学习(Reinforcement Learning, RL)是机器学习的范式和方法论之一&a…...
Android 好的开源库
1. 权限请求框架 GitHub - getActivity/XXPermissions: Android 权限请求框架,已适配 Android 14 2. 下载框架 GitHub - lingochamp/okdownload: A Reliable, Flexible, Fast and Powerful download engine....
Spring中xxAware接口和InitializingBean接口的作用
question:Aware接口和InitializingBean接口的作用都可以用例如Autowired PostConstruct注解来实现,那么其相比较于注解的实现,优势是什么呢? 早期的Spring中并不存在注解开发,注解开发是在后期的Spring中引入…...
Nginx WebDAV扩展模块安装与配置完全指南
Nginx WebDAV扩展模块安装与配置完全指南 nginx-dav-ext-module nginx WebDAV PROPFIND,OPTIONS,LOCK,UNLOCK support [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/ng/nginx-dav-ext-module 项目基础介绍 Nginx WebDAV扩展模块(nginx-dav-ext-module)是由a…...
算法刷题Day16: BM41 输出二叉树的右视图
题目链接 描述 思路: 递归构造二叉树在Day15有讲到。复习一下,就是使用递归构建左右子树。将中序和前序一分为二。 接下来是找出每一层的最右边的节点,可以利用队列层次遍历。 利用队列长度记录当前层有多少个节点,每次从队列里…...
1.2 计算机网络的分类和应用(重要知识点)
1.2.1 计算机网络的分类 计算机网络的定义: 由通信线路互相连接的、能自主工作的计算机构成,强调各计算机(工作站)拥有独立的计算资源和任务能力。与多终端分时系统不同,后者终端仅作为主机接口,不具备计…...
Xcode
info.plist Appearance Light 关闭黑暗模式 Bundle display name 设置app名称,默认为工程名 Location When In Use Usage Description 定位权限一共有3个key 1.Privacy - Location When In Use Usage Description 2.Privacy - Location Always and When In U…...
HarmonyOS 5.0应用开发——属性动画
【高心星出品】 文章目录 属性动画animateTo属性动画animation属性动画 属性动画 属性接口(以下简称属性)包含尺寸属性、布局属性、位置属性等多种类型,用于控制组件的行为。针对当前界面上的组件,其部分属性(如位置属…...
Freertos任务切换
一、操作系统进行任务切换的时机: 采用信号量实现任务的互斥: 二、FreeRTOS 任务切换场合 PendSV 中断的时候提到了上下文(任务)切换被触发的场合: ● 可以执行一个系统调用 ● 系统滴答定时器(SysTick)中断。 1、执行系统调用 执行系统…...
【汇编】思考汇编中的两个基本问题
1. 若干年前的疑问 几年前还在大学学习汇编时,不管是考试还是课程设计,其实都很顺利。但是心里一直对什么时候使用哪个寄存器存在疑惑,编写汇编时,没有十足的把握,都是抱着试一试的心态去完成了课程任务。 工作八年有…...
开发环境服务器 vs 生产环境服务器:开发与生产须分明
【背景】作为开发者,我们在不同的阶段都与两种服务器环境打交道——开发环境服务器和生产环境服务器。虽然听起来名字相似,但它们的职责和工作方式简直是天差地别! 不知道朋友们有没有跟我一开始刚了解的时候的一些疑惑,因为刚开始…...
Tomcat的安装即使用
Tomcat的概念 Tomcat服务器是Java语言开发的,免费的开放源代码的Web应用服务器。 Tomcat处理静态HTML的能力远不及Apache或者Nginx,通常是作为一个Servlet和JSP容器,单独运行在后端。 Tomcat是由三个功能组合而成: java servlet&…...
外包干了9天,技术退步明显。。。。。
时光荏苒,转眼我已是一个拥有近四年功能测试经验的大专生。19年,我满怀激情地通过校招进入湖南某知名软件公司,期待在这里开启我的职业生涯。然而,长时间的舒适环境让我渐渐失去了前进的动力,技术停滞不前,…...
梳理你的思路(从OOP到架构设计)_基本OOP知识04
目录 1、 主动型 vs.基於被动型 API 1)卡榫函数实现API 2)API的分类 3)回顾历史 4)API >控制力 2、 结语&复习: 接口与类 1)接口的表示 2)Java的接口表示 1、 主动型 vs.基於被动…...
每天40分玩转Django:简介和环境搭建
Django简介和环境搭建 一、课程概述 学习项目具体内容预计用时Django概念Django框架介绍、MVC/MTV模式、Django特点60分钟环境搭建Python安装、pip配置、Django安装、IDE选择45分钟创建项目项目结构、基本配置、运行测试75分钟实战练习创建个人博客项目框架60分钟 二、Djang…...
OpenCV相关函数
一、Sobel算子函数 (cv2.Sobel) 功能 Sobel算子是一个梯度算子,用于边缘检测。通过计算图像中像素的梯度,Sobel算子可以检测出水平和垂直方向上的边缘。 参数 src:输入图像。 ddepth:输出图像的深度(如cv2.CV_8U, cv…...
【理想汽车中科院】基于模仿学习的端到端自动驾驶数据缩放规律
论文: https://arxiv.org/pdf/2412.02689 项目: https://github.com/ucaszyp/Driving-Scaling-Law 0. 摘要 端到端自动驾驶范式因其可扩展性而最近吸引了大量关注。然而,现有方法受到现实世界数据规模有限的制约,这阻碍了对端到端自动驾驶相关扩展规律…...
重卡补能新未来:光储充换一体开启高效之路
《重卡补能新未来:光储充换一体开启高效之路》 一、光储充换一体重卡补能模式的兴起 重卡运输行业在电动化进程加速下迎来变革,光储超充快换一体化补能站成为新趋势。 随着国家 “双碳” 战略的持续推进,新能源汽车市场蓬勃发展,…...
Mybatis Plus 3.0 快速入门
1、简介 MyBatis-Plus (简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。 2、创建并初始化数据库 2.1、创建数据库 mybatis_plus 2.2、创建 User 表 其表结构如下: idnameageemail1Jone18test1@baomidou.com2Jack…...
ABAP:MB51字段增强
MB51所对应的程序:RM07DOCS 1.定义增强字段:RM07DOCS_GENERATED中定义 2.取值:RM07DOCS中detail_list中加取值逻辑 也有对ITAB取值做调整的,但是要写很多处,直接这里取值就很简单。 3.展示字段:RM07DOCS中…...
nVisual 定制化APP打包流程
一、下载打包软件 HBuilder X 下载地址:https://dcloud.io/hbuilderx.html 安装:此软件为绿色软件,解压即可使用。进入目录,双击exe启动。 此软件需要注册,打开时会提供跳转链接,通过邮箱注册账号。 注册成功后&#…...
k8s的节点亲和性NodeAffinity
关键词: ① requiredDuringSchedulingIgnoredDuringExecution:表示强匹配,必须要满足 ② preferredDuringSchedulingIgnoredDuringExecution:表示弱匹配,尽可能满足,但不保证 示例: apiVersion: v1 kind:…...
比特币国家与企业机构“战略储备”潮起
100 万枚 BTC 的战略储备资产,是一个什么概念? 据世界黄金协会统计数据显示,截至 2024 年第三季度,美联储黄金储备总量达 8133.46 吨(约合 5300 亿美元),稳居全球首位。而 100 万枚 BTC 当前市…...
Vue生命周期钩子函数:深入解析与实践
作为高级Vue前端开发人员,对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中,Vue自动调用的一系列方法。通过这些钩子函数,我们可以在组件的不同生命周期阶段执行特定的操作…...
mysql、postgresql、oceanbase调优
一、mysql 1、my.cnf [mysqld_safe] log-error=/data/mysql/log/mysql.log pid-file=/data/mysql/run/mysqld.pid[client] socket=/data/mysql/run/mysql.sock default-character-set=utf8[mysqld] basedir=/usr/local/mysql tmpdir=/data/mysql/tmp datadir=/data/mysql/dat…...
【Flux.jl】 卷积神经网络
Flux.jl 是包含卷积神经网络的, 但是官方API文件中没有给出一个完整的程序框架, 只是对所需神经元给了局部解释, 此外对 model-zoo 模型动物园中的案例没有及时跟着 Flux.jl 的版本更新, 也无法运行出来结果。 因此本文搭建了一个完整可训练的卷积神经网络。 Conv 卷积算子…...
数字证书管理工具 openssl keytool
OPENSSL 命令 openssl command [ command_opts ] [ command_args ] 常用command: version 用于查看版本信息 enc 用于加解密 ciphers 列出加密套件 genrsa 用于生成私钥 -des|-des3|-idea:用来加密私钥文件的三种对称加密算法。 rsa …...
notify和notifyAll
notify和notifyAll 简单来说: notify():只唤醒一个等待的线程,如果有多个线程在等待,那么被唤醒的线程是随机选择的。 notifyAll():唤醒在该对象监视器上等待的所有线程,但是这些被唤醒的线程仍然需要竞争…...
删除MySQL的多余实例步骤
删除 MySQL 的多余实例通常意味着我们希望卸载或停止某个 MySQL 服务器实例,并从系统中完全移除它。这通常涉及到几个步骤,包括但不限于停止服务、删除数据目录、卸载软件(如果适用)等。 1.基于 Linux 的系统上删除 MySQL 的多余…...
LDR6500应用:C转DP线材双向投屏开启全新体验
在当今这个科技日新月异、蓬勃发展的时代,高清视频传输以及显示技术已经深深融入到我们日常生活与工作的方方面面,其重要性不言而喻。不管是在商务场合的会议演示,还是教育领域的娱乐享受,以及充满激情的游戏竞技领域,…...
商业化大前端在性能优化领域的探索与实践
导读:在业务飞速发展的过程中,用户体验是必不可少的一个环节,而页面性能是直接影响用户体验的重要因素。当页面加载时间过长、交互操作不流畅时,意味着业务可能会出现转化率降低、用户流失等业务问题。在过去一年,为了…...
FinClip | 2024年11月产品大事记
FinClip 的使命是使您(业务专家和开发人员)能够通过小程序解决关键业务流程挑战,并完成数字化转型的相关操作。不妨让我们看看在11月的产品与市场发布亮点,看看是否有助于您实现目标。 产品方面的相关动向👇…...