如何自己实现一个丝滑的流程图绘制工具(九) 自定义连接线

news2024/11/28 14:32:16

背景
产品又有更近的想法了,bpmn-js的连接线你用的时候是看不到的,也就是你从左侧点击连接线的没有线随鼠标移动.

在这里插入图片描述

但是产品想要看得见的连接线移动拖拽。
咩有办法,不能换框架,那就只能自己实现啦!
思路:

创建一个线的dom节点,监听鼠标的移动和放下,使线跟随鼠标移动。在画布区域松开鼠标后,创建两个很小的节点并连接起来。
这样就是一个假象,一根线放在画布上,可以改变连接线的两端。
但是有个需要注意的是,你吧线改变了两端,虽然创建线的时候的两头节点看不到,但是本质存在会影响画其他节点。所以我连接线创建的两个虚拟节点类型是不同的。这样遍历画布上的节点就可以找到多余的两个点,删掉。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

多维详述MediaBox互动直播AUI Kit低代码开发方案

本专栏将分享阿里云视频云MediaBox系列技术文章,深度剖析音视频开发利器的技术架构、技术性能、开发能效和最佳实践,一起开启音视频的开发之旅。本文为MediaBox最佳实践篇,重点从互动直播AUI Kit的核心能力、技术架构、快速集成等方面&#x…

【Word自定义配置,超简单,图文并茂】自定义Word中的默认配置,比如标题大小与颜色(参考科研作图配色),正文字体等

▚ 01 自定义样式Styles中的默认标题模板 📢自定义标题的显示效果,如下图所示: 1.1 自定义标题的模板Normal.dotm 1.1.1 选择所需修改的标题 新建一个空白Word文档,依次选择菜单栏的开始Home,样式Styles,…

2023最新版本 FreeRTOS教程 -10-事件组(通过5种情况快速上手)

事件组对应单个事件触发或多个事件同时触发的场景 创建事件组函数 EventGroupHandle_t xEventGroupCreate( void );删除事件组函数 void vEventGroupDelete( EventGroupHandle_t xEventGroup )设置事件 在任务中使用xEventGroupSetBits() 在中断中使用xEventGroupSetBits…

注解和反射实现Excel导入导出

目录 使用实例 定义三个注解 /*** 设置允许导出*/ @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) public @interface EnableExport {String fileName();} /*** 设置该字段允许导出* 并且可以设置宽度*/ @Target(ElementType.FIELD) @Retention(RetentionP…

高级算法复习

时间代价 主定理 递归树 排序 贪心算法 贪心选择性(Greedy-choice property): 通过做出局部最优(贪婪)选择,可以得出全局最优解——这是贪心算法可行的第一个基本要素,也是贪心算法与动态规划…

使用Nginx和Spring Gateway为SkyWalking的增加登录认证功能

文章目录 1、使用Nginx增加认证。2、使用Spring Gateway增加认证 SkyWalking的可视化后台是没有用户认证功能的,默认下所有知道地址的用户都能访问,官网是建议通过网关增加认证。 本文介绍通过Nginx和Spring Gateway两种方式 1、使用Nginx增加认证。 生…

用 winget 在 Windows 上安装 kubectl

目录 kubectl 是什么? 安装 kubectl 以管理员身份打开 PowerShell 使用 winget 安装 kubectl 测试一下,确保安装的是最新版本 导航到你的 home 目录: 验证 kubectl 配置 kubectl 是什么? kubectl 是 Kubernetes 的命令行工…

【C#】Mapster对象映射的使用

系列文章 【C#】编号生成器(定义单号规则、固定字符、流水号、业务单号) 本文链接:https://blog.csdn.net/youcheng_ge/article/details/129129787 【C#】日期范围生成器(开始日期、结束日期) 本文链接:h…

Sectigo SSL

Sectigo(前身为ComodoCA)是全球在线安全解决方案提供商和全球最大的证书颁发机构。为了强调其在SSL产品之外的扩张,Comodo在2018年更名为Sectigo。新名称减少了市场混乱,标志着公司向创新的全方位网络安全解决方案提供商过渡。 S…

openEuler 系统使用 Docker Compose 容器化部署 Redis Cluster 集群

openEuler 系统使用 Docker Compose 容器化部署 Redis Cluster 集群 Redis 的多种模式Redis-Alone 单机模式Redis 单机模式的优缺点 Redis 高可用集群模式Redis-Master/Slaver 主从模式Redis-Master/Slaver 哨兵模式哨兵模式监控的原理Redis 节点主客观下线标记Redis 节点主客观…

UnoCSS框架常用语法

文章目录 🍉vscode 开发插件🍉设置边框颜色🍉设置宽、高、背景色、外边距🍉设置flex🍉设置元素在滚动时固定在指定区域内🍉vscode 开发插件 vscode 开发建议安装 UnoCSS插件 🍉设置边框颜色 border-[color]: 设置边框的颜色,[color]可以是预设的颜色名称(如…

自学考试到底难不难?

自学考试难度谈不上大,其难度系数本身并不高,然而有几个难点,需要克服。 #自学#首先,要具备较强的信息搜集能力。zbb990101 从报名到毕业,考生需要主动关注各类考试动态,如专业选择、报名流程、采购教材、…

React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass less】(十三)

文件目录 Proxying in Development http-proxy-middleware fetch_get fetch 是否成功 axios 全局处理 antd UI库 更改主题 使用css module的情况下修改第三方库的样式 支持sass & less Proxying in Development 在开发模式下,如果客户端所在服务器跟后…

Java poi给docx中的关键字标记颜色

Java poi给docx中的关键字标记颜色 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><dependency><groupId>org.apache.poi</groupId>&l…

k8s 部署mqtt —— 筑梦之路

mqtt是干嘛的&#xff0c;网上有很多资料&#xff0c;这里就不再赘述。 --- apiVersion: apps/v1 kind: Deployment metadata:labels:app: mqttname: mqttnamespace: default spec:replicas: 1selector:matchLabels:app: mqttstrategy:rollingUpdate:maxSurge: 25%maxUnavaila…

鲁大师10月新机性能/流畅/久用榜:骁龙8 Gen3一鸣惊人,双十一“6系”处理器成井喷状态

刚刚过去的10月份手机圈可谓是热闹纷呈,要数量有数量,要新品有新品,要旗舰有旗舰,要走量也有走量。10月份的大部分光芒,毫无疑问都将被骁龙8 Gen3以及重夺骁龙旗舰首发的小米 14系列身上。 骁龙8 Gen3毫无疑问,代表着骁龙旗舰处理器的又一个巅峰,从目前鲁大师后台抓取到的数据…

计算机毕业设计:基于python机器学习的全国气象数据采集预测可视化系统 预测模型+爬虫(包含文档+源码+部署教程)

[毕业设计]2023-2024年最新最全计算机专业毕设选题推荐汇总 感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;希望帮助更多的人 。 1、摘 要 随着气候变化的不断加剧&#xff0c;气象数据的准确性…

starrocks 内部表 varchar(num) 和 String 怎么选

盲选string varchar可能会因为脏数据 长度过长出现报错

【FPGA】正确处理设计优先级--或许能帮你节省50%的资源

概述 假如现在有一种方法–可以在不怎么需要修改已有设计的情况下&#xff0c;就可以帮您节省50%的设计资源&#xff0c;那你会试试看吗&#xff1f; 当前市场环境下&#xff0c;更低廉的成本却可获得同等性能无疑是极具诱惑的。本文将介绍一种FPGA设计技术&#xff0c;该技术…

“云芯一体”赋能位置应用,真点高精度定位服务正式发布

11月9日&#xff0c;北斗星通旗下企业真点科技正式发布了云芯一体高精度定位服务——TruePoint.CM(厘米级定位服务)和TruePoint.DM&#xff08;分米级定位服务&#xff09;。 此次发布会在第一届测绘地理信息大会期间举办&#xff0c;中国测绘学会宋超智理事长、中国卫星导航定…