【前端学习】AntV G6-09 复杂的自定义边、边动画
课程视频
AntV G6：复杂的自定义边、边动画（上）_哔哩哔哩_bilibili
AntV G6：复杂的自定义边、边动画（下）_哔哩哔哩_bilibili
讲义截图
提及链接
https://codesandbox.io/p/sandbox/register-polyline-getpath-jkd6dn
G6
实例讲解
（从第一个课程链接的04:10开始）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>07 复杂的自定义边、边动画</title><!-- 引入 G6 --><script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script><!-- <script src="https://gw.alipayobjects.com/os/lib/antv/g6/3.7.1/dist/g6.min.js"></script> -->
</head><body><div id="container"></div><script>const { getLabelPosition, transform } = G6.Util;const addAnimateArrow = (path, group, arrowStyle) => {const arrow =group.find((ele) => ele.get("name") === "animate-arrow") ||group.addShape("marker", {attrs: {stroke: "#3370ff",fill: "#fff",...arrowStyle,x: 16,y: 0,r: 8,lineWidth: 2,symbol: (x, y, r) => {return [["M", x - 8, y - 8],["L", x - 2, y],["L", x - 8, y + 8]];}},name: "animate-arrow"});arrow.stopAnimate();// animation for the red circlearrow.animate((ratio) => {// the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations// get the position on the edge according to the ratioconst tmpPoint = path.getPoint(ratio);const roundPoint = {x: Math.round(tmpPoint.x),y: Math.round(tmpPoint.y)};const pos = getLabelPosition(path, ratio);let matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];matrix = transform(matrix, [["t", -roundPoint.x, -roundPoint.y],["r", pos.angle],["t", roundPoint.x, roundPoint.y]]);// returns the modified configurations here, x and y herereturn {x: tmpPoint.x,y: tmpPoint.y,matrix};},{repeat: true, // Whether executes the animation repeatlyduration: 3000 // the duration for executing once});};const lineDashAnimate = (path) => {const lineDash = [6, 4, 2, 4];path.stopAnimate();let index = 0;// Define the animationpath.animate(() => {index++;if (index > 9) {index = 0;}const res = {lineDash,lineDashOffset: -index};// returns the modified configurations here, lineDash and lineDashOffset herereturn res;},{repeat: true, // whether executes the animation repeatlyduration: 3000 // the duration for executing once});};G6.registerEdge("line-arrow",{getPath(points) {const startPoint = points[0];const endPoint = points[1];return [["M", startPoint.x, startPoint.y],["L", endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],["L", endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],["L", endPoint.x, endPoint.y]];},afterDraw(cfg, group) {const keyShape = group.find((ele) => ele.get("name") === "edge-shape");const attrs = keyShape.attr();const halo = group.addShape("path", {attrs: {...attrs,lineWidth: 8,opacity: 0.2},name: "edge-halo"});halo.hide();const { endLabel, endPoint, labelCfg } = cfg;const { style: labelStyle = {}, refX = 0, refY = 0 } = labelCfg;if (endLabel) {const endLabelShape = group.addShape("text", {attrs: {text: endLabel,x: endPoint.x - refX,y: endPoint.y + refY,textAlign: "right",fill: "#000",textBaseline: "middle",...labelStyle},name: "end-label-shape"});console.log("endLabelShape", endLabelShape);}},afterUpdate(cfg, item) {const group = item.getContainer();const endLabelShape = group.find((ele) => ele.get("name") === "end-label-shape");const { endLabel, endPoint, labelCfg } = cfg;const { style: labelStyle = {}, refX = 0, refY = 0 } = labelCfg;endLabelShape.attr({text: endLabel,x: endPoint.x - refX,y: endPoint.y + refY,...labelStyle});},setState(name, value, item) {const group = item.getContainer();const keyShapePath = group.find((ele) => ele.get("name") === "edge-shape");switch (name) {case "hover":const halo = group.find((ele) => ele.get("name") === "edge-halo");if (value) {const path = keyShapePath.attr("path");halo.show();halo.attr("path", path);} else {halo.hide();}break;case "selected":if (value) {lineDashAnimate(keyShapePath);// addAnimateArrow(keyShapePath, group, keyShapePath.attr());} else {keyShapePath.stopAnimate();keyShapePath.attr("lineDash", undefined);// const arrow = group.find(ele => ele.get('name') === 'animate-arrow');// if (arrow) arrow.remove(true);}break;default:break;}}},"polyline");const data = {nodes: [{id: "7",x: 150,y: 100},{id: "8",x: 300,y: 200}],edges: [{source: "7",target: "8",label: "xxx",endLabel: "yyy"}]};const container = document.getElementById("container");const width = container.scrollWidth;const height = container.scrollHeight || 500;const graph = new G6.Graph({container: "container",width,height,// translate the graph to align the canvas's center, support by v3.5.1fitCenter: true,modes: {// behaviordefault: ["drag-node", "drag-canvas", "click-select"]},defaultNode: {type: "circle",size: 40,anchorPoints: [[0, 0.5],[1, 0.5]],style: {fill: "#DEE9FF",stroke: "#5B8FF9"},linkPoints: {left: true,right: true,fill: "#fff",stroke: "#1890FF",size: 5}},defaultEdge: {type: "line-arrow",color: "#F6BD16",labelCfg: {autoRotate: true,position: "start",refX: 10}}});graph.data(data);graph.render();graph.on("edge:mouseenter", (e) => {graph.setItemState(e.item, "hover", true);});graph.on("edge:mouseleave", (e) => {graph.setItemState(e.item, "hover", false);});const clearEdgeStates = () => {const selectedEdges = graph.findAllByState("selected");selectedEdges?.forEach((edge) => graph.setItemState(edge, "selected", false));};graph.on("node:click", (e) => {clearEdgeStates();const relatedEdges = e.item.getEdges();relatedEdges.forEach((edge) => graph.setItemState(edge, "selected", true));});graph.on("canvas:click", (e) => clearEdgeStates());if (typeof window !== "undefined")window.onresize = () => {if (!graph || graph.get("destroyed")) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};</script>
</body></html>
相关文章：
【前端学习】AntV G6-09 复杂的自定义边、边动画
课程视频 AntV G6：复杂的自定义边、边动画（上）_哔哩哔哩_bilibili AntV G6：复杂的自定义边、边动画（下）_哔哩哔哩_bilibili 讲义截图 提及链接 https://codesandbox.io/p/sandbox/register-polyline-get…...
极狐GitLab 发布安全补丁版本 17.4.2, 17.3.5, 17.2.9
本分分享极狐GitLab 补丁版本 17.4.2, 17.3.5, 17.2.9 的详细内容。 极狐GitLab 正式推出面向 GitLab 老旧版本免费用户的专业升级服务，为 GitLab 老旧版本进行专业升级，详情可以查看官网 GitLab 专业升级服务指南 今天，极狐GitLab 专业技术…...
MATLAB智能算法 - Immunity Algorithm免疫算法
Immunity Algorithm免疫算法 智能算法是路线规划、深度学习等等一系列领域所使用的优化算法，是算法进阶之路的必备之路。 前言：本文主要围绕解决TSP旅行商问题展开，对于机器人的路线规划以及非线性方程求解的问题等解决方案 对于一些其他智能…...
学习eNSP对提升就业竞争力有多大帮助？
学习eNSP（Enterprise Network Simulation Platform）对提升就业竞争力有显著帮助，具体表现在以下几个方面： 1. **增强专业技能**：通过eNSP，你可以模拟华为的网络设备，进行网络设计、配置和故障排…...
Molmo和PixMo：为最先进的多模态模型提供开放权重和开放数据
摘要 https://arxiv.org/pdf/2409.17146 当今最先进的多模态模型仍然是专有的。性能最强的开源模型严重依赖专有视觉语言模型（Vision-Language Model，简称VLM）的合成数据来获得良好性能，有效地将这些封闭模型提炼为开放模型。因此，业界仍然缺少关于如何从零开始构建高性能…...
day02_计算机常识丶第一个程序丶注释丶关键字丶标识符
计算机常识 计算机如何存储数据 计算机世界中只有二进制。那么在计算机中存储和运算的所有数据都要转为二进制。包括数字、字符、图片、声音、视频等。 进制 进制也就是进位计数制，是人为定义的带进位的计数方法 实例： // 在java 中 可以使用不同…...
【Trick】IOS系统解决“未受信任的企业级开发者”问题
问题： 本人通过扫码下载了一个软件，下载完毕后出现以下提示： 解决方法： 这个主要是操作系统的问题，需要在设置里面更改，具体步骤如下： 【1】打开设置，选择【通用】 【2】选择【VP…...
理解 React 中的 ReactElement、children 和 ReactNode
1. 什么是 ReactElement？ ReactElement 是 React 用来描述 UI 界面元素的最基本的对象，是构建虚拟 DOM 的核心元素。 定义：ReactElement 是不可变的对象，表示界面中的某个元素。它包含了用于渲染 UI 所需的信息，如元…...
纯血鸿蒙正式登场，华为这新机给我看傻了
从 vivo 率先开炮 X200 系列，手机的白热化战斗序幕马上也就要揭开了。 就在昨天，骁龙于夏威夷召开骁龙峰会。 性能提升和咱们以往的爆料差距不大。 只是高通又双叒叕给自己改名了。新命名为 Snapdragon 8 Elite，官方翻译是骁龙 8 至尊版。 …...
c语言中的%运算和/运算
在C语言中，%运算和/运算分别表示取模运算和除法运算。以下是它们的详细解释和用法： 1. % 运算（取模运算） 取模运算用于计算两个整数相除后的余数。语法如下： result a % b; a 是被除数。b 是除数。result 是 a 除…...
【MySQL】多表查询——内连接，左/右连接
目录 准备工作 1.多表查询 2.INNER JOIN（内连接） 2.1.笛卡尔积 1.2.笛卡尔积的过滤 1.3.INNER JOIN（显式内连接） 1.4.SELF JOIN（自连接） 3. LEFT JOIN（左连接） 3.1.一个例子…...
Naicat连接本地CentOS 7虚拟机上的MySQL数据库失败解决办法
注意：Navicat主机栏填的是Centos虚拟机的IP地址 一、检查mysql容器 确保网络正常、保证mysql容器处于运行中且用户名、密码和端口正确。 1、查看mysql容器是否运行 docker ps2、查看mysql容器详细信息，可查看端口 docker inspect mysql二、检查防火墙…...
, (0.2023, 0.1994, 0.2010)的计算过程){kind=spacer}
transforms.Normalize((0.4914, 0.4822, 0.4465), (0.2023, 0.1994, 0.2010)的计算过程
cifar10数据集的众多demo中，在数据加载环节，transforms.Normalize((0.4914, 0.4822, 0.4465), (0.2023, 0.1994, 0.2010)这条指令是经常看到的。这是一个 PyTorch 中用于图像数据标准化的函数调用，它将图像的每个通道的值进行标准化处理&…...
Excel表格如何修改“打开密码”，简单几步，轻松搞定
在保护Excel文件的安全性时，设置打开密码是常见且有效的方式。然而，有时我们需要修改已经设置的打开密码，以确保文件安全性或更新密码信息。今天小编来分享一下修改Excel文件打开密码的方法，操作简单，一起来看看吧&…...
pandas 数据分析实战
一、pandas常用数据类型 series，带标签的一维数组。类似于字典，但是键作为索引。 datatimeindex，时间序列。 dataframe，带标签且大小可变的二维表格结构。 panel，带标签且大小可变的三维数组。 1.一维数组与操…...
antd vue 输入框高亮设置关键字
<highlight-textareaplaceholder"请输入主诉"type"textarea"v-model"formModel.mainSuit":highlightKey"schema.componentProps.highlightKey"></highlight-textarea> 参考链接原生input，textarea demo地址 …...
python——扑克牌案列
斗地主发牌程序： 模拟一个斗地主发牌程序，实现对三个玩家进行手牌的派发，实现功能： ********** 欢迎进入 XX 斗地主 ********** 请输入玩家姓名：<用户控制台输入 A> 请输入玩家姓名：<用户控制台输…...
Java最全面试题-＞Java基础面试题-＞JavaWeb面试题-＞Git/SVN面试题
文章目录 Git/SVN面试题Git和SVN有什么区别？SVN优缺点？Git优缺点？说一下Git创建分支的步骤？说一下Git合并的两种方法以及区别？Git如何查看文件的提交历史和分支的提交历史?什么是 git stash？什么是git sta…...
引进Menu菜单与新增验证上传图片功能--系统篇
我的迭代小系统要更新2点。一是后台需要引进一种导航，众多导航之中我选择了Menu菜单。二是上传图片接口需要新增验证上传图片环节。先看看更新2点后的效果 引进Menu菜单效果如下，这部分修改后台前端代码 引进Menu菜单后，Menu菜单的默认数据我…...
安装Python及pip使用方法详解
一、安装Python Python是一种广泛使用的高级编程语言，其安装过程相对简单。以下是具体步骤： 访问Python官网： 打开浏览器，访问Python的官方网站[python.org](https://www.python.org/)，确保下载的是最新版本的Python安…...
OpenClaw技能开发指南：为ollama-QwQ-32B编写自定义模块
OpenClaw技能开发指南：为ollama-QwQ-32B编写自定义模块 1. 为什么需要自定义技能开发 上周我需要每天手动查询三个城市的天气数据来生成日报，这种重复劳动让我开始思考：能否让OpenClaw帮我自动完成？当我发现现有的天气技能包都不…...
RTX 4090D专属镜像应用场景：短视频MCN机构批量生成口播视频生产系统
RTX 4090D专属镜像应用场景：短视频MCN机构批量生成口播视频生产系统 1. 短视频行业的痛点与解决方案 短视频MCN机构每天面临的最大挑战之一，就是如何高效生产大量高质量的口播视频内容。传统制作流程通常需要： 租用专业摄影棚聘请主播录制…...
资源捕获高效解决方案：猫抓浏览器扩展让媒体提取更简单
资源捕获高效解决方案：猫抓浏览器扩展让媒体提取更简单 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在当今数字时代，我们每天都在网页上浏览大量的媒体内容，从精…...
3步搞定黑苹果配置：OpCore-Simplify自动化EFI构建终极指南
3步搞定黑苹果配置：OpCore-Simplify自动化EFI构建终极指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的黑苹果配置头疼吗&…...
5个高效实用的英雄联盟工具集使用指南
5个高效实用的英雄联盟工具集使用指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是一款基于LCU API开发的开源…...
DXVK解决方案：基于Vulkan的Direct3D兼容层性能优化指南
DXVK解决方案：基于Vulkan的Direct3D兼容层性能优化指南 【免费下载链接】dxvk Vulkan-based implementation of D3D9, D3D10 and D3D11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk DXVK是一个基于Vulkan的Direct3D 8/9/10/11实现层…...
Matlab 实现 DES 与 RSA 双重加密及可视化界面搭建
基于matlab上的DES和RSA两种算法的双重加密，附带显示界面，可更改DES密钥，明文消息（在显示界面中），可在代码中更改RSA对应的p，q，e等数据，代码可附加注释和对应要求修改。在…...
大多数加密API都不够用：量化团队真正需要的数据到底是什么？
如果你做过加密相关开发，无论是： 量化交易数据平台研究分析风控系统 你大概率都会经历一个阶段： 👉 API 接了一堆，但始终“不够用”。 常见的一个误区 很多人在刚开始做数据接入时，会觉得： …...
UG/NX二次开发必备：C#和C++项目DLL自动签名与拷贝全攻略（附避坑指南）
UG/NX二次开发实战：C#与C项目DLL签名与部署全流程解析 在工业设计软件领域，Siemens NX（原Unigraphics）的二次开发能力一直是工程师扩展功能、提升效率的重要途径。而DLL文件的数字签名环节，则是确保开发成果能在正版NX…...
s2-pro语音合成教程：参考音频采样率/格式/信噪比最佳实践
s2-pro语音合成教程：参考音频采样率/格式/信噪比最佳实践 1. 认识s2-pro语音合成工具 s2-pro是Fish Audio开源的专业级语音合成模型镜像，它不仅能将文本转换为自然流畅的语音，还能通过参考音频来复用特定的音色。这意味着你可以上传一段样本…...