【前端学习】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安…...
JPlag代码抄袭检测：你的学术诚信守护神
JPlag代码抄袭检测：你的学术诚信守护神 【免费下载链接】JPlag State-of-the-Art Source Code Plagiarism & Collusion Detection. Check for plagiarism in a set of programs. 项目地址: https://gitcode.com/gh_mirrors/jp/JPlag 你是否曾为学生的代码…...
Kafka高效的原因
Kafka高效的原因Kafka的高效性源于其独特的架构设计和多项优化技术，以下是关键因素：分布式架构与分区机制 Kafka采用分布式设计，主题（Topic）被划分为多个分区（Partition），每个分区可…...
Fawkes踩过的坑以及如何解决非常详细
首先我是用anaconda创建的一个虚拟环境 fawkes_env后续的所有操作都是在该环境中实现 不使用anaconda 可直接看第一步 坑：直接用 conda create -n fawkes python3.9 后，pip install -e . 可能因为 TensorFlow 版本过新导致不兼容（Keras 2.3…...
2026年医疗卫生/护理求职AI工具横评：白衣天使的求职神器大比拼
导语 2026年，医疗卫生行业依然是最具社会价值和就业稳定性的行业之一。随着中国老龄化加速，医护人员需求持续扩大，仅公立医院护士岗位需求量就突破200万。然而，医护求职并不轻松：编制紧张、规培政策复杂、职称考试压力…...
终极指南：如何一键下载国家智慧教育平台电子课本PDF
终极指南：如何一键下载国家智慧教育平台电子课本PDF 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具，帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载，让您更方便地获取课本内容。 项目地址: …...
从SPI模式0到Quad I/O：手把手带你玩转W25Q128JV的性能压榨与接口升级
从SPI模式0到Quad I/O：W25Q128JV性能优化实战指南 在嵌入式系统设计中，存储器的性能往往成为整个系统响应速度的瓶颈。W25Q128JV这颗128Mbit容量的串行Flash芯片，凭借其灵活的接口配置和出色的性价比，已成为众多物联网设备、消费电…...
AI碳足迹深度解析：从模型压缩到软硬协同的绿色AI实践
1. 从“算力怪兽”到“绿色引擎”：AI碳足迹问题的深度拆解 最近和几个在芯片厂和云服务商工作的老朋友聊天，话题总绕不开一个词：电费。不是开玩笑，现在训练一个大模型，电费账单能轻松超过一个小型数据中心的日常运维成…...
扩散模型如何重塑建筑设计流程：从概念生成到性能优化的AI协作
1. 项目概述：当AI成为建筑师的“副驾驶”几年前，当我在设计院通宵达旦地对着屏幕调整一个曲面屋顶的参数时，我就在想，有没有一种工具，能让我把脑子里那个模糊的意象，瞬间变成可供推敲的视觉草稿？…...
计算机视觉十年演进：从手工特征到工业落地实战
1. 计算机视觉的十年跃迁：从手工特征到端到端理解2012年，AlexNet在ImageNet大赛上以15.3%的错误率碾压第二名10.8个百分点，整个计算机视觉领域像被按下了快进键。那会儿我在实验室调试SIFT特征匹配，光是调一个尺度参数就要跑三小时…...
Taotoken提供的审计日志功能如何满足企业级安全与合规需求
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken提供的审计日志功能如何满足企业级安全与合规需求 1. 企业引入大模型能力后的审计挑战 当企业将大模型API能力整合到内部…...