【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

最新推荐文章于 2024-09-24 21:17:34 发布

四喜花露水

最新推荐文章于 2024-09-24 21:17:34 发布

阅读量495

点赞数

分类专栏： AntV G6 文章标签：前端学习 anti-design-vue

本文链接：https://blog.csdn.net/gaowxx/article/details/142061522

版权

AntV G6 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

【课程链接】

AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili

本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解）

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>06 深入图形与图形分组、自定义节点、节点动画</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>
		G6.registerNode('lineNode', {
			// 复写draw方法
			draw: (cfg, group) => {
				const keyShape = group.addShape('circle', {
					attrs: {
						r: 70,
						x: 0,
						y: 0,
						opacity: 0
					}
				});

				// 画5条虚线做极坐标的对齐线
				const rGap = 10;
				let currentR = 30;
				for (let i = 0; i < 5; i++) {
					group.addShape('circle', {
						attrs: {
							r: currentR,
							x: 0,
							y: 0,
							lineWidth: 1,
							stroke: '#bae7ff',
							lineDash: [5, 5]
						}
					})
					currentR += rGap;
				}
				// 中心的圆点和文本
				group.addShape('circle', {
					attrs: {
						fill: cfg.centerColor,
						x: 0,
						y: 0,
						r: 20
					}
				})
				group.addShape('text', {
					attrs: {
						text: cfg.label,
						fill: '#111',
						x: 0,
						y: 0,
						textAlign: 'center',
						textBaseline: 'middle',
						fontWeight: 500
					},
					// 给text一个name，为动画animate检索做准备
					name: 'line-chart-label'
				});

				// 绘制折线和它们的坐标点
				const alphaGap = Math.PI * 2 / 25;
				let pointCount = 0;
				cfg.details.forEach(detail => {
					const { color, values } = detail;
					const positions = []
					values.forEach(value => {
						const r = value + 20;
						const alpha = alphaGap * pointCount;
						pointCount++;
						const x = r * Math.cos(alpha);
						const y = r * Math.sin(alpha);
						const point = group.addShape('circle', {
							attrs: {
								fill: color,
								x,
								y,
								r: 2,
							},
							// 给圆点起名字name，为圆点添加hover效果做准备
							name: 'line-chart-point'
						})

						positions.push({ x, y });
					});
					// 绘制各个detail数据的路径
					group.addShape('path', {
						attrs: {
							path: positions.map((pos, i) => [i === 0 ? 'M' : 'L', pos.x, pos.y]),
							stroke: color,
							lineWidth: 1
						}
					})
				})
				return keyShape;
			},
			// 中间文本不断缩放的动画
			afterDraw: (cfg, group) => {
				const textShape = group.find(ele => ele.get('name') === 'line-chart-label')
				const rate = 1.01;
				// 动画的另一种写法，onFrame，onFrame的参数ratio是一次动画执行的比例
				textShape.animate(ratio => {
					const currentFontSize = textShape.attr('fontSize') || 12;
					const scale = ratio < 0.5 ? rate : (1 / rate);
					const targetFontSize = currentFontSize * scale;

					// console.log('ratio', ratio);	0 < ratio < 1	 			
					// console.log('currentFontSize', currentFontSize);		 			
					// console.log('scale', scale);		 

					return { fontSize: targetFontSize }
				}, {
					duration: 1000,
					repeat: true
				})
			}

		}, 'circle');

		const width = document.getElementById('container').scrollWidth
		const height = document.getElementById('container').scrollHeight || 500
		const graph = new G6.Graph({
			container: 'container',
			width,
			height,
			fitCenter: true,
			defaultNode: {
				type: 'lineNode'
			}
		})

		const data = {
			nodes: [
				{
					id: 'node1',
					label: 'Node1',
					x: 150,
					y: 150,
					centerColor: "#bae7ff", // 中心圆形的颜色
					details: [
						{ cat: 'pv', values: [20, 30, 40, 30, 30], color: '#5B8FF9' },
						{ cat: 'dal', values: [40, 30, 20, 30, 50], color: '#5AD8A6' },
						{ cat: 'uv', values: [40, 30, 30, 40, 40], color: '#5D7092' },
						{ cat: 'sal', values: [20, 30, 50, 20, 20], color: '#F6BD16' },
						{ cat: 'cal', values: [10, 10, 20, 20, 20], color: '#E8684A' },
					],
				},
				{
					id: 'node2',
					label: 'Node2',
					x: 400,
					y: 150,
					centerColor: "#5b8ff9",
					details: [
						{ cat: 'pv', values: [10, 10, 50, 20, 10], color: '#5B8FF9' },
						{ cat: 'dal', values: [20, 30, 10, 50, 40], color: '#5AD8A6' },
						{ cat: 'uv', values: [10, 50, 30, 20, 30], color: '#5D7092' },
						{ cat: 'sal', values: [50, 30, 20, 20, 20], color: '#F6BD16' },
						{ cat: 'cal', values: [50, 10, 20, 50, 30], color: '#E8684A' },
					],
				},
			],
			edges: [
				{
					source: 'node1',
					target: 'node2',
				},
			]
		}




		graph.data(data);
		graph.render();

		// 为数据的圆点添加hover后变大的动画
		graph.on('line-chart-point:mouseenter', e => {
			const { target } = e
			target.animate(
				{ r: 5 },
				{ duration: 100, repeat: false }
			)
		})
		graph.on('line-chart-point:mouseleave', e => {
			const { target } = e
			target.animate(
				{ r: 2 },
				{ duration: 100, repeat: false }
			)
		})
		// 为数据的圆点添加hover后变大的动画 END

		if (typeof window !== 'undefined')
			window.onresize = () => {
				if (!graph || graph.get('destroyed')) return;
				if (!container || !container.scrollWidth || !container.scrollHeight)
					graph.changeSize(container.scrollWidth, container.scrollHeight);
			}
	</script>
</body>

</html>