【前端学习】AntV G6-09 复杂的自定义边、边动画

原创

已于 2024-12-20 16:24:08 修改 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#anti-design-vue #javascript

于 2024-10-18 17:16:11 首次发布

课程视频

AntV G6：复杂的自定义边、边动画（上）_哔哩哔哩_bilibili

AntV G6：复杂的自定义边、边动画（下）_哔哩哔哩_bilibili

讲义截图

G6有2种内置的曲线，二阶贝塞尔曲线和三阶贝塞尔曲线。它们的区别就是控制点个数的多少。

二阶贝塞尔曲线如果算上两个端点，其实总共有三个控制点。但我们通过边的配置control points，可以指定中间这个控制点的位置，从而控制这条贝塞尔曲线的弯曲方式。当我们不指定control points的时候，也可以通过配置curve position和curveOffSet两个字段来间接的指定控制点的位置。curve position指的是这条边的起点到终点连线所在的0到1的一个百分比位置，默认情况下的curve position是他们的中央，也就是0.5。curve position指的是这个控制点到这个两端点连线的距离。

三阶贝塞尔曲线则是有两个控制点，可以通过配置边的control points为2个XY对象控制这条边的绘制方式。当然也同样的在不指定control points的时候，指定current position和curveOffSet来间接指定它们的弯曲方式。默认情况下，三阶贝塞尔曲线的curve position也是在两端点连线的中央位置。由于它是有两个控制点，所以它是一个二维数组。curveOffSet同样也是一个二维数组，分别指定第一个和第二个控制点距离这个连线的距离。

我们可以发现贝塞尔曲线的控制点实际上并不在这个曲线上，折线则不同，折线的控制点是实际上就是折线的拐点，这些控制点在折线上。通过配置control points，我们可以指定任意个数、任意位置的控制点。当我们不指定control points的时候，内置的折线poly line将会使用 A* 自动寻径的算法，但这个算法计算复杂度比较高。而使用control points的坐标作为具体的拐折点位置，没有办法动态的根据起点和终点去调整折线的弯曲。因此很多情况下我们会为了性能和美观的考虑，结合自己的业务诉求去自定义折现的路径。

提及链接

https://codesandbox.io/p/sandbox/register-polyline-getpath-jkd6dn

实例讲解

（从第一个课程链接的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>
		// 思路
		// 1.自定义(边类型)折线 G6.registerEdge, 复写getPath方法
		// 2.复写afterDraw方法 增加hover效果
		// 3.当鼠标进入边时更改边设置状态 graph.on('edge:mouseenter'...
		// 4.捕获状态变化 setState()
		// 5.afterUpdate 更新halo路径，与keyShape同步
		// 6.afterUpdate 更新endLabel位置，与keyShape同步
		// 7.动画，点击端点的时候相关的边产生虚线

		const { getLabelPosition, transform } = G6.Util;

		// 控制path的虚线运动
		const lineDashAnimate = (path) => {
			const lineDash = [6, 4, 2, 4];
			path.attr('lineDash', lineDash)			
			let index = 0;
			path.stopAnimate();
			path.animate((ratio) => {
				index++
				if (index > 16) {
					index = 0
				}
				return {
					lineDashOffset: index
				}
			}, {
				repeat: true, // whether executes the animation repeatly
				duration: 3000 // the duration for executing once
			})

		}

		// 自定义(边类型)折线
		// 参数1 边的名字，参数2 复写，参数3 继承的边类