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…...

【LeetCode】每日一题 2024_12_13 K 次乘运算后的最终数组 I(暴力)
前言 每天和你一起刷 LeetCode 每日一题~ 小聊两句 1、今天是 12.13 南京大屠杀国家公祭日。铭记历史,勿忘国耻。 2、今天早上去看了 TGA 年度游戏颁奖,小机器人拿下了年度最佳游戏,所有人都震惊了,大伙纷纷问到,谁…...
Plant simulation、Flexsim、Automod、Emulate3D、VisuaComponent仿真软件对比
软件名称物流系统仿真工业布局仿真动画效果数据分析优化虚拟现实/混合现实二次开发虚拟电控和PLC调试 软件行业内特殊功能Emulate3D1.物流设备模块完备,功能灵活设置,涵盖各种设备形态和运作方式 2.唯一将摩擦力、重力、阻力等物理属性融入到物流运动中&…...

深度学习day4|用pytorch实现猴痘病识别
🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者:K同学啊 🍺要求: 训练过程中保存效果最好的模型参数。 加载最佳模型参数识别本地的一张图片。 调整网络结构使测试集accuracy到达88%&#x…...

批量导出工作簿中高清图片-Excel易用宝
我同事在工作簿中做了三个图表,现在需要将工作簿中的图标导出保存为高清图片,通过右键另存为保存的图片并非高清图片,其实要把Excel工作簿中的图表或图片对象导出为高清图片也很简单。 单击Excel易用宝 Plus,导出高清图片。 在导出…...

外观模式的理解和实践
外观模式(Facade Pattern)是一种常用的软件设计模式,它提供了一个统一的接口,用来访问子系统中的一群接口。该模式定义了一个高层的接口,使得子系统更容易使用。简单来说,外观模式就是通过引入一个外观角色…...

linux离线安装部署redis
版本信息 linux版本:CentOS-7-x86_64 redis版本:redis-6.2.6 VMware:VMware-workstation-full-16.1.1 xshell: Xshell-7.0 安装 1.查看当前虚拟机ip命令:ifconfig -a 2.xhell连接虚拟机 ,在xshell页面点击文件-…...

网管平台(基础篇):路由器的介绍与管理
路由器简介 路由器(Router)是一种计算机网络设备,它的主要作用是将数据通过打包,并按照一定的路径选择算法,将网络传送至目的地。路由器能够连接两个或更多个网络,并根据信道的情况自动选择和设定路由&…...

数据结构——跳表
目录 1.什么是跳表-skiplist 2.skiplist的效率如何保证? 3.skiplist的实现 4.skiplist跟平衡搜索树和哈希表的对比 1.什么是跳表-skiplist skiplist本质上也是一种查找结构,用于解决算法中的查找问题,跟平衡搜索树和哈希表的价值是一样的…...
活动预告 |【Part2】Microsoft Azure 在线技术公开课:基础知识
课程介绍 参加“Azure 在线技术公开课:基础知识”活动,培养有助于创造新的技术可能性的技能并探索基础云概念。参加我们举办的本次免费培训活动,扩充自身的云模型和云服务类型知识。你还可以查看以计算、网络和存储为核心的 Azure 服务。 课…...

PyCharm如何导入库( 包 )
目录 1.在主界面中导库 2.用设置->项目安装库 2.1.使用右上方按钮 2.2.使用右下方Python解释器 3.使用左下角终端导库 1.在主界面中导库 在主界面输入导库后等待一会儿,会在那一行出现一个红色灯。 图1 红色灯 我们点击红色灯,会出现 图2 错误选…...
【DevOps基础篇】SCM(Source Code Management)
目录 代码管理工具Git特点:SVN特点:Git与SVN的对比:Git 的开发工作流程(flow)的设计Git Flow主要特点:工作流程:GitHub Flow主要特点:工作流程:两种Flow的对比:推荐超级课程: Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战代码管理工具 Gi…...

DDS—RTPS一致性测试案例分析
1 往期回顾 通过《DDS数据分发服务—提升汽车领域数据传输效率》和《DDS—DCPS测试策略介绍及实际案例分析》这两篇文章的介绍,相信广大读者对Data Distribution Service(DDS)协议和Data Centric Publish Subscribe(DCPS)测试有了基本了解:DDS协议致力于…...

【深度学习入门】深度学习介绍
1.1 深度学习介绍 学习目标 目标 知道深度学习与机器学习的区别了解神经网络的结构组成知道深度学习效果特点 应用 无 区别 特征提取方面 机器学习的特征工程步骤是要靠手动完成的,而且需要大量领域专业知识深度学习通常由多个层组成,它们通常将更简…...
数值分析—非线性方程的数值解
研究背景 形如 x − t a n x 0 x-tanx0 x−tanx0、 x l n x e − x 2 s i n x 0 xlnxe^{-x^2}sinx0 xlnxe−x2sinx0等称为非线性方程,自变量之间并非简单的线性关系,这种问题我们无法通过其结构求解,需要其他的逼近方式,本章…...

LDR6500应用:C转DP线材双向投屏开启全新体验
在当今这个科技日新月异、蓬勃发展的时代,高清视频传输以及显示技术已经深深融入到我们日常生活与工作的方方面面,其重要性不言而喻。不管是在商务场合的会议演示,还是教育领域的娱乐享受,以及充满激情的游戏竞技领域,…...

路径规划之启发式算法之十六:和声搜索算法(Harmony Search, HS)
和声搜索算法(Harmony Search, HS)是一种新兴的启发式全局搜索算法,是一种模拟音乐家即兴演奏过程的群体智能优化算法。这种算法由Zong Woo Geem等人在2001年提出,灵感来源于音乐家在寻找和声时的创造性思维过程。HS算法通过模拟音乐家演奏音乐时的选择过程来寻找问题的最优…...

Redis - 实战之 全局 ID 生成器 RedisIdWorker
概述 定义:一种分布式系统下用来生成全局唯一 ID 的工具 特点 唯一性,满足优惠券需要唯一的 ID 标识用于核销高可用,随时能够生成正确的 ID高性能,生成 ID 的速度很快递增性,生成的 ID 是逐渐变大的,有利于…...

matlab 连接远程服务器
通过matlab 控制远程服务器 查看 matlab 中 python 接口脚本 对于 matlab 2010b 兼容的 最高 Python版本是 3.10 安装 3.10 版本的Python,并安装 paramiko 库 pip install paramikomatlab 中设置 Python的环境 例如 pyversion(D:/Anaconda3/python.e…...

在服务器自主选择GPU使用
比如说,程序使用第 2 张显卡(从 0 开始计数)。它的作用是告诉系统和深度学习框架(如 PyTorch 或 TensorFlow)只可见某些 GPU。 export CUDA_VISIBLE_DEVICES1 然后再查看当前使用的显卡: echo $CUDA_VIS…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...

【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...