通过anvt X6和vue3实现图编辑
通过anvt X6
X6地址:https://x6.antv.antgroup.com/tutorial/about;
由于节点比较复杂,使用vue实现的节点;
x6提供了一个独立的包 @antv/x6-vue-shape 来使用 Vue 组件渲染节点。
VUE3的案例:
<template><div class="app-content"><div id="container"></div><TeleportContainer /></div>
</template><script lang="ts">import { defineComponent } from 'vue'import ProgressNode from './components/ProgressNode.vue'import { Graph } from '@antv/x6'import { register, getTeleport } from '@antv/x6-vue-shape'register({shape: 'custom-vue-node',width: 100,height: 100,component: ProgressNode,})const TeleportContainer = getTeleport()export default defineComponent({name: 'App',components: {TeleportContainer,},mounted() {const graph = new Graph({container: document.getElementById('container')!,background: {color: '#F2F7FA', //画布背景颜色},panning: true,//是否可以平移 默认truemousewheel: true,//是否可以缩放 默认trueautoResize: true,interacting: function (cellView) {return {nodeMovable: false,//节点是否可以被移动。// vertexAddable: false,//是否可以添加边的路径点。// arrowheadMovable: false,//边的起始/终止箭头是否可以被移动// edgeMovable: false,//边是否可以被移动。}}})graph.addNode({shape: 'custom-vue-node',x: 100, //x位置 y: 60, //y位置 })//x,y设置为0节点添加的位置就是左上角},})
</script>
节点组件内容如下:
<template><el-progress type="dashboard" :percentage="percentage" :width="80"><template #default="{ percentage }"><span class="percentage-value">{{ percentage }}%</span></template></el-progress>
</template><script lang="ts">import { defineComponent } from 'vue'export default defineComponent({name: 'ProgressNode',inject: ['getNode',"getGraph"],//注入node和graph,可以在组件内使用了data() {return {percentage: 80,}},mounted() {const node = (this as any).getNode()console.log(node)const graph = (this as any).getGraph();const zoom = graph.zoom(); //获取缩放的比例// 画布缩放到0.5graph.zoomTo(.5, {center: {//缩放的中心x:0,y: 0}});},})
</script>
效果如下:代码运行的效果可以进行拖动进程图

后记:画布进行缩放之后不是1的情况下,设置节点内部的offset会出现bug,可以通过先zoomTo 1 然后进行offset设置,设置完成之后在进行zoomTo 回去。
const graph = (this as any).getGraph();const zoom = graph.zoom();graph.zoomTo(1, {center: {x: 0,y: 0}});
//进行offset设置.....graph.zoomTo(zoom, {center: {x: this.zoomX,y: this.height / 2}});
相关文章:
通过anvt X6和vue3实现图编辑
通过anvt X6 X6地址:https://x6.antv.antgroup.com/tutorial/about; 由于节点比较复杂,使用vue实现的节点; x6提供了一个独立的包 antv/x6-vue-shape 来使用 Vue 组件渲染节点。 VUE3的案例: <template><div…...
win2012 IIS8.5 安装PHP教程,一些版本不能用
因为一直用win2003IIS6.0PHP的环境,所以搭建PHP自认为非常熟悉了,但是最近在搭建win2012IIS8.5PHP的环境时,我遇到了一些问题,经过4个小时的折腾,终于搞定了,本文记录一些经验,可能不少朋友也会…...
sqlalchemy执行原生sql
# 有的复杂sql 用orm写不出来---》用原生sql查询 # 原生sql查询,查出的结果是对象 # 原生sql查询,查询结果列表套元组 准备工作 from sqlalchemy.orm import sessionmaker, relationship from sqlalchemy import create_engineengine create_engine(&…...
Python-OpenCV中的图像处理-图像平滑
Python-OpenCV中的图像处理-图像平滑 图像平滑平均滤波高斯模糊中值模糊双边滤波 图像平滑 使用低通滤波器可以达到图像模糊的目的。这对与去除噪音很有帮助。其实就是去除图像中的高频成分(比如:噪音,边界)。所以边界也会被模糊…...
Mongoose http server 例子
今天抽了点时间看了一下 mongoose的源码, github 地址,发现跟以前公司内部使用的不太一样,这里正好利用其 http server 例子来看一下。以前的 http message 结构体是这样的: /* HTTP message */ struct http_message {struct mg_…...
1、初识HTML
1、初识HTML 前端就是写一些基本的页面,HTML即超文本标记语言:Hyper Text Markup Language,超文本包括,文字、图片、音频、视频、动画等,HTML5,提供了一些新的元素和一些有趣的新特性,同时也建…...
线性代数(三) 线性方程组
前言 如何利用行列式,矩阵求解线性方程组。 线性方程组的相关概念 用矩阵方程表示 齐次线性方程组:Ax0;非齐次线性方程组:Axb. 可以理解 齐次线性方程组 是特殊的 非齐次线性方程组 如何判断线性方程组的解 其中R(A)表示矩阵A的…...
Apoll 多项式规划求解
一、纵向规划 void QuarticPolynomialCurve1d::ComputeCoefficients(const float x0, const float dx0, const float ddx0, const float dx1,const float ddx1, const float p) {if (p < 0.0) {std::cout << "p should be greater than 0 at line 140." &…...
ssm亚盛汽车配件销售业绩管理统源码和论文PPT
ssm亚盛汽车配件销售业绩管理统源码和论文PPT007 开发工具:idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具:navcat,小海豚等 开发技术:java ssm tomcat8.5 研究的意义 汽车配件销售类企业近年来得到长足发展,在市场份额不断扩大同时…...
发布属于自己的 npm 包
1 创建文件夹,并创建 index.js 在文件中声明函数,使用module.exports 导出 2 npm 初始化工具包,package.json 填写包的信息(包的名字是唯一的) npm init 可在这里写包的名字,或者一路按回车,后…...
Redis主从复制和哨兵架构图,集成Spring Boot项目实战分享
目录 1. Redis 主从复制2. Redis 哨兵架构3. 集成spring boot项目案列 Redis 主从复制和哨兵架构是 Redis 集群的重要组成部分,用于提高 Redis 集群的可用性和性能。以下是 Redis 主从复制和哨兵架构的详细介绍,包括架构图和 Java 代码详解。 1. Redis …...
java中try-with-resources自动关闭io流
文章目录 java中try-with-resources自动关闭io流0 简要说明try-with-resources java中try-with-resources自动关闭io流 0 简要说明 在传统的输入输出流处理中,我们一般使用的结构如下所示,使用try - catch - finally结构捕获相关异常,最后不…...
Games101学习笔记 -光栅化
光栅化 经过MVP矩阵和视口变换后,我们就可以从相机的角度看到一个和屏幕大小一致的二维平面。 那么把这个看到的二维平面应用到我们的屏幕上的过程就是光栅化。在这儿我们需要补充一个概念-像素: 像素: 一个二位数组,数组中每个…...
Pytorch量化之Post Train Static Quantization(训练后静态量化)
使用Pytorch训练出的模型权重为fp32,部署时,为了加快速度,一般会将模型量化至int8。与fp32相比,int8模型的大小为原来的1/4, 速度为2~4倍。 Pytorch支持三种量化方式: 动态量化(Dynamic Quantization&…...
Sql奇技淫巧之EXIST实现分层过滤
在这样一个场景,我 left join 了很多张表,用这些表的不同列来过滤,看起来非常合理 但是出现的问题是 left join 其中一张或多张表出现了笛卡尔积,且无法消除 FUNCTION fun_get_xxx_helper(v_param_1 VARCHAR2,v_param_2 VARCHAR2…...
Linux下升级jdk1.8小版本
先输入java -version 查看是否安装了jdk java -version (1)如果没有返回值,直接安装新的jdk即可。 (2)如果有返回值,例如: java version "1.8.0_251" Java(TM) SE Runtime Enviro…...
【Mysql】数据库基础与基本操作
🌇个人主页:平凡的小苏 📚学习格言:命运给你一个低的起点,是想看你精彩的翻盘,而不是让你自甘堕落,脚下的路虽然难走,但我还能走,比起向阳而生,我更想尝试逆风…...
87 | Python人工智能篇 —— 机器学习算法 决策树
本教程将深入探讨决策树的基本原理,包括特征选择方法、树的构建过程以及剪枝技术,旨在帮助读者全面理解决策树算法的工作机制。同时,我们将使用 Python 和 scikit-learn 库演示如何轻松地实现和应用决策树,以及如何对结果进行可视化。无论您是初学者还是有一定机器学习经验…...
【计算机视觉】干货分享:Segmentation model PyTorch(快速搭建图像分割网络)
一、前言 如何快速搭建图像分割网络? 要手写把backbone ,手写decoder 吗? 介绍一个分割神器,分分钟搭建一个分割网络。 仓库的地址: https://github.com/qubvel/segmentation_models.pytorch该库的主要特点是&#…...
解析湖仓一体的支撑技术及实践路径
自2021年“湖仓一体”首次写入Gartner数据管理领域成熟度模型报告以来,随着企业数字化转型的不断深入,“湖仓一体”作为新型的技术受到了前所未有的关注,越来越多的企业视“湖仓一体” 为数字化转型的重要基础设施。 01 数据平台的发展历程…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
ui框架-文件列表展示
ui框架-文件列表展示 介绍 UI框架的文件列表展示组件,可以展示文件夹,支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项,适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...
【版本控制】GitHub Desktop 入门教程与开源协作全流程解析
目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork(创建个人副本)步骤 2: Clone(克隆…...
