本文主要是介绍【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
【课程链接】
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').scrollWidthconst height = document.getElementById('container').scrollHeight || 500const 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 } = etarget.animate({ r: 5 },{ duration: 100, repeat: false })})graph.on('line-chart-point:mouseleave', e => {const { target } = etarget.animate({ r: 2 },{ duration: 100, repeat: false })})// 为数据的圆点添加hover后变大的动画 ENDif (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>这篇关于【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
