antv G6 开发踩坑记录

1、通过键盘 + 鼠标拖拽创建边

根据官方实例,在画布上创建边基本都是点击端点构建边,或者固定端点后拖拽创建边,但是倘若有个这样的需求:“键盘按住ctrl后,鼠标从一个端点拖拽出边到另一个端点来创建边” 改如何应对呢?,本着文档没有看源码的操作,最终还是被我找到了;

  • 文档方法

在这里插入图片描述

  • 源码方案
    在这里插入图片描述

根据源码提供代码可知官方是提供了对应方法的,只是文档未写,所以我们可以这样修改:
1、G6 配置项

  modes: {default: ['drag-node', 'drag-canvas', 'zoom-canvas', {type: 'create-edge',key: 'control', // 配置创建边按键操作, options: 'shift', 'control', 'ctrl', 'meta', 'alt'trigger: 'drag', // 修改创建边模式 }],},

2、监听节点上鼠标事件

  // 监听节点鼠标按下时是否按住 ctrl 键来控制节点拖拽锁定graph.on('node:mousedown', (evt: IG6GraphEvent) => {const mouseEvent = evt.originalEvent as MouseEvent;if (mouseEvent.ctrlKey) {evt.item?.lock();}});// 监听节点鼠标抬起时是否按住 ctrl 键来控制节点拖拽锁定graph.on('node:mouseup', (evt: IG6GraphEvent) => {const mouseEvent = evt.originalEvent as MouseEvent;if (mouseEvent.ctrlKey) {evt.item?.unlock();}});

3、可监听边创建完成后的事件回调

 // 监听创建边完成graph.on('aftercreateedge', (e: IG6GraphEvent) => {// do   
})

2、自定义边箭头样式

  style: {lineWidth: 2,lineAppendWidth: 5,stroke: '#BDBEBF',endArrow: {path: G6.Arrow.triangle(5, 5, 5), // 依次为箭头宽度(默认 10)、长度(默认 15)、偏移量(默认为 0,与 d 对应)d: 5,fill: '#BDBEBF',},},

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

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

相关文章

使用c++解压rar文件,基于UnRAR64,非命令行

最近项目需要解压缩rar文件,我们都知道rar是闭源收费软件,如果直接采用命令行可能会有限制,或者盗版问题,使用正版的winrar命令行解压rar文件是否有限制,这个我没来得及测试,但是从交互体验上来说&#xff…

面试—如何介绍项目中的多级缓存?

项目中使用的多级缓存也就是 分布式缓存 Redis 本地缓存 Caffeine,那么令 Caffeine 作为一级缓存,Redis 作为二级缓存,在项目中通过记录数据的访问次数,将热点数据放在 本地缓存,将非热点数据放在 Redis缓存 中&#…

11月1日 mybatis入门

java程序与数据库对接端: jdbc 步骤固定, 代码固定, 大量重复代码 SQL写在代码中, 修改sql,需要重新编译代码, 动态sql, 手动拼接 结果集与java对象转换, java程序与前端对接端: javaWeb 手动获取请求参数, 需要手动进行数据转换 一个请求对应一个Servlet,造成Servlet类暴增…

【MongoDB】索引 - 复合索引

一、准备工作 这里准备一些学生数据 db.students.insertMany([{ _id: 1, name: "张三", age: 20, class: { id: 1, name: "1班" }},{ _id: 2, name: "李四", age: 22, class: { id: 2, name: "2班" }},{ _id: 3, name: "王五…

2023年最热门的五大编程技术趋势

2023年最热门的五大编程技术趋势 摘要:本文将介绍2023年最热门的五大编程技术趋势,包括人工智能、区块链、WebAssembly、5G和边缘计算以及自动化。我们将详细讨论这些趋势的当前状态、未来展望以及如何利用这些技术来提高您的编程技能。 一、前言 随着…

linux+python3.6.8+uwsgi+postgresql+django部署web服务器

linuxpython3.6.8uwsgipostgresqldjango部署web服务器 1.查看系统信息2.配置postgresql数据库2-1.安装postgresql数据库2-2.设置密码2-3.修改postgresql数据库配置文件 3.Python虚拟环境激活虚拟环境 4.Django4-1.Python 安装Django4-2.创建Django项目4-3.配置Django 5.uwsgi5-…

解决docker tag打标签时报错:Error response from daemon: no such id

现象: 原因: docker tag时不仅仅要Repository仓库名,也需要原有的tag作为版本号 解决办法: docker tag 原有仓库名: 原有tag值 新的打标名称 问题解决!

【vue3/高德地图】实现地图打点/自定义点位图标/地理围栏实现

<template><div class"app-container"><div id"container"></div></div> </template><script setup> import AMapLoader from amap/amap-jsapi-loader; /*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用s…

响应式编程-Project Reactor Mono 介绍

响应式编程-Project Reactor Mono 介绍 本文以Mono的角度来介绍Reactor编程&#xff0c;Flux的使用同理。 初体验 Web应用 controller 方法在Spring webmvc 和 Spring webFlux下Controller方法实现示例如下&#xff1a; Spring webmvc: GetMapping("/test1") …

【bug-maven】(一)java: 错误: 不支持发行版本 5 (二):java: 错误: 无效的源发行版:15

【bug-maven】&#xff08;一&#xff09;java: 错误: 不支持发行版本 5 &#xff08;二&#xff09;&#xff1a;java: 错误: 无效的源发行版&#xff1a;15 &#xff08;一&#xff09;java: 错误: 不支持发行版本 5 报错截图&#xff1a; 出错原因&#xff1a; 打开Projec…

SpringBoot整合EasyExcel

springboot整合easyExcel的全流程&#xff0c;跟着做就能出来。对项目没有侵入要求。0侵入&#xff0c;可插拔 依赖 <!--操作Excel依赖--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>…

docker存储卷

docker存储卷 COW机制 Docker镜像由多个只读层叠加而成&#xff0c;启动容器时&#xff0c;Docker会加载只读镜像层并在镜像栈顶部添加一个读写层。 如果运行中的容器修改了现有的一个已经存在的 文件&#xff0c;那么该文件将会从读写层下面的只读层复制到读写层&#xff0…

AI人工智能大模型业务到底有多烧钱?

AI大模型业务确实是一个非常烧钱的行业。首先&#xff0c;大模型的训练需要大量的计算资源。 这些模型通常由数百万个参数组成&#xff0c;训练它们需要大量的计算能力和存储空间。这意味着公司需要购买大量的高性能服务器、图形处理单元和存储设备&#xff0c;这些都是非常昂…

QT学习之QT概述

1.1 什么是QT&#xff1f; Qt是一个跨平台的C图形用户界面应用程序框架。 QT特点&#xff1a; 跨平台&#xff0c;几乎支持所有的平台接口简单&#xff0c;容易上手&#xff0c;学习QT框架对学习其他框架有参考意义。一定程度上简化了内存回收机制开发效率高&#xff0c;能够…

使用lua-resty-request库编写爬虫IP实现数据抓取

目录 一、lua-resty-request库介绍 二、使用lua-resty-request库进行IP数据抓取 1、获取IP地址 2、设置请求 3、处理数据 三、代码实现 四、注意事项 五、总结 本文将深入探讨如何使用lua-resty-request库在爬虫程序中实现IP数据抓取。我们将首先介绍lua-resty-request…

【算法|二分查找No.2】leetcode 69. x 的平方根

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

【Docker】Docker中 的AUFS、BTRFS、ZFS、存储池概念的详细讲解

前言 作者简介&#xff1a; 辭七七&#xff0c;目前大二&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&…

Apache Doris (五十二): Doris Join类型 - Broadcast Join

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录 1. Broadcast Join原理

接口测试及接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

DocTemplateTool - 可根据模板生成word或pdf文件的工具

你是否经常遇到这样的场景&#xff1a;产品运营有着大量的报告需求&#xff0c;或者给客户领导展现每周的运营报告&#xff1f;这些文档类的任务可以交给运营同事&#xff0c;他们负责文档排版和样式&#xff0c;你作为开发人员你只需要提供数据源&#xff0c;和一个映射表&…