需求：拓扑图中需要用动画的线条连接node，在此之前将HTML页面改成了vue页面。需要使用到G6的registerEdge 自定义边，小车的图片需要转成base64格式（并翻转），可以通过base64转image查看原来的样子。
另外，通过动态控制div的scale自适应拉伸尺寸的计算来达到自适应宽高屏幕的效果。
【完整代码】
<template><div class="body-wrap" ref="contentWrapper"><div class="graph-wrap"><div ref="graphContainer"></div></div></div>
</template><script>
import G6 from '@antv/g6';
const { getLabelPosition, transform } = G6.Util;export default {name: 'CustomEdgeGraph',data() {return {designWidth: 1920, // 设计稿宽度designHeight: 1080, // 设计稿高度currentScale: [1, 1],nodeData: {// 点集nodes: [{id: 'point1',x: 110,y: 200,},{id: 'point2',x: 110,y: 200,},{id: 'point3',x: 130,y: 630,},{id: 'point4',x: 130,y: 630,},{id: 'center',x: 500,y: 400,},{id: 'oil_star',x: 1600,y: 1030,},{id: 'oil_end',x: 100,y: 780,},{id: 'car_star',x: 1600,y: 990,},{id: 'car_end',x: 100,y: 750,},],// 边集edges: [{source: 'point1',target: 'center',curveOffset: -180,},{source: 'point2',target: 'center',curveOffset: 160,},{source: 'point3',target: 'center',curveOffset: -120,},{source: 'point4',target: 'center',curveOffset: 90,},// 动画线{source: 'point1',target: 'center',curveOffset: -180,type: 'line-growth',style: {lineAppendWidth: 5,lineWidth: 5, // 线宽stroke: 'l(0) 0:rgba(34,255,242,0.06) 0.25:rgba(34,255,242,0.5) 0.5:rgba(34,255,242,1) 0.75:rgba(34,255,242,0.5) 1:rgba(34,255,242,0.06)', // 线的颜色}},{source: 'point2',target: 'center',curveOffset: 160,type: 'line-growth',style: {lineAppendWidth: 5,lineWidth: 5, // 线宽stroke: 'l(0) 0:rgba(34,255,242,0.06) 0.25:rgba(34,255,242,0.5) 0.5:rgba(34,255,242,1) 0.75:rgba(34,255,242,0.5) 1:rgba(34,255,242,0.06)', // 线的颜色}},{source: 'point3',target: 'center',curveOffset: -120,type: 'line-growth',style: {lineAppendWidth: 5,lineWidth: 5, // 线宽stroke: 'l(0) 0:rgba(34,255,242,0.06) 0.25:rgba(34,255,242,0.5) 0.5:rgba(34,255,242,1) 0.75:rgba(34,255,242,0.5) 1:rgba(34,255,242,0.06)', // 线的颜色}},{source: 'point4',target: 'center',curveOffset: 90,type: 'line-growth',style: {lineAppendWidth: 5,lineWidth: 5, // 线宽stroke: 'l(0) 0:rgba(34,255,242,0.06) 0.25:rgba(34,255,242,0.5) 0.5:rgba(34,255,242,1) 0.75:rgba(34,255,242,0.5) 1:rgba(34,255,242,0.06)', // 线的颜色}},{source: 'oil_star',target: 'oil_end',type: 'arrow-running',style: {lineAppendWidth: 10,lineWidth: 10, // 线宽stroke: 'l(0) 0:rgba(188,133,26,0.16) 0.95:rgba(188,133,26,0.16) 1:rgba(188,133,26,0)', // 线的颜色// },// assign the control points to control the bending positions// 开车线路的中间拐点controlPoints: [{x: 600,y: 1030,},],},{source: 'car_star',target: 'car_end',type: 'car-running',style: {lineAppendWidth: 10,lineWidth: 10, // 线宽//stroke:'red'stroke: 'rgba(255,255,255,0)', // 线的颜色// },// assign the control points to control the bending positions// 开车的中间拐点controlPoints: [{x: 600,y: 990,},],},]}}},beforeDestroy() {window.removeEventListener('resize', this.onWindowResize);},mounted() {this.initGraph();this.updateScale();window.addEventListener('resize', this.updateScale);},methods: {// 自适应拉伸尺寸计算updateScale() {const { designWidth, designHeight } = this;const windowWidth = window.innerWidth;const windowHeight = window.innerHeight;// 计算宽高比const widthRatio = (windowWidth / designWidth).toFixed(4) - 0.002;const heightRatio = (windowHeight / designHeight).toFixed(4) - 0.002;const scale = [widthRatio, heightRatio];// 更新缩放比例this.currentScale = scale;this.applyTransform();},applyTransform() {const contentWrapper = this.$refs.contentWrapper;if (contentWrapper) {contentWrapper.style.transform = `scale(${this.currentScale[0]},${this.currentScale[1]})`;contentWrapper.style.transformOrigin = 'top left';}},// 自适应拉伸尺寸计算 END// 初始化图表initGraph() {const car1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAeCAYAAACv1gdQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUI3OUE0N0NCNjBDMTFFRjhGQUE5RDc0QzcwRDE1NkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUI3OUE0N0RCNjBDMTFFRjhGQUE5RDc0QzcwRDE1NkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1Qjc5QTQ3QUI2MEMxMUVGOEZBQTlENzRDNzBEMTU2RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1Qjc5QTQ3QkI2MEMxMUVGOEZBQTlENzRDNzBEMTU2RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pnqu6cUAAAp9SURBVHjapFhp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'const cube = 'data:image/png;base64,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'// 自定义边类型G6.registerEdge('line-growth',{afterDraw(cfg, group) {const shape = group.get('children')[0];const length = shape.getTotalLength();shape.animate((ratio) => {// the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurationsconst startLen = ratio * length;// Calculate the lineDashconst cfg = {lineDash: [startLen, length - startLen],};return cfg;},{repeat: true, // Whether executes the animation repeatlyduration: 2000, // the duration for executing once},);},},'arc', // extend the built-in edge 'cubic' arc );G6.registerEdge("arrow-running",{afterDraw(cfg, group) {// get the first shape in the group, it is the edge's path here=const shape = group.get("children")[0];const length = shape.getTotalLength();let circleCount = Math.ceil(length / 100);circleCount = circleCount === 0 ? 1 : circleCount;const _loop = function _loop(i) {const delay = 0;const start = shape.getPoint(0);const image = group.addShape("image", {attrs: {x: start.x,y: start.y - 9,width: 14,height: 14,img: cube,}});// animation for the red circleimage.animate((ratio) => {ratio += i / circleCount;if (ratio > 1) {ratio %= 1;}const tmpPoint = shape.getPoint(ratio);const pos = getLabelPosition(shape, ratio);let matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];matrix = transform(matrix, [["t", -tmpPoint.x - 9, -tmpPoint.y],["r", pos.angle],["t", tmpPoint.x, tmpPoint.y]]);// returns the modified configurations here, x and y herereturn {x: tmpPoint.x,y: tmpPoint.y - 9,matrix};},{repeat: true, // Whether executes the animation repeatly// duration: 3000 // the duration for executing onceduration: 8 * length,easing: 'easeLinear',// delay:5 * length,});}for (let i = 0; i < circleCount; i++) {_loop(i);}}},"polyline" // extend the built-in edge 'cubic');G6.registerEdge("car-running",{afterDraw(cfg, group) {// get the first shape in the group, it is the edge's path here=const shape = group.get("children")[0];const image = group.addShape("image", {attrs: {x: 0,y: 0,width: 73,height: 41,img: car1,}});// animation for the red circleimage.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 = shape.getPoint(ratio);const pos = getLabelPosition(shape, ratio);let matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];// var op =1if (tmpPoint.x > 1653) {matrix = transform(matrix, [["t", -tmpPoint.x - 50, -tmpPoint.y],["r", pos.angle],["t", tmpPoint.x, tmpPoint.y]]);} else {matrix = transform(matrix, [["t", -tmpPoint.x, -tmpPoint.y + 10],["r", pos.angle],["t", tmpPoint.x, tmpPoint.y]]);}var op = 1// 当车跑到某点时变成不透明 0.5// if (tmpPoint.x > 1483) {// op = 1// } else {// op = 0.5// }// returns the modified configurations here, x and y herereturn {x: tmpPoint.x,y: tmpPoint.y - 36,matrix,opacity: op};},{repeat: true, // Whether executes the animation repeatlyduration: 9000 // the duration for executing once});}},"polyline" // extend the built-in edge 'cubic');this.$nextTick(() => {// 初始化图表const graph = new G6.Graph({container: this.$refs.graphContainer,width: 1920,height: 1080,modes: {default: ['drag-node', 'zoom-canvas', 'click-select']},defaultNode: { // 节点样式修改type: 'circle', // 设置节点为图片size: [0, 0], // 节点大小anchorPoints: [[0.5, 0.5],[0.5, 0.5],],},defaultEdge: { // 边通用配置type: 'arc',labelCfg: {autoRotate: true,},style: {lineAppendWidth: 3,lineWidth: 3, // 线宽stroke: 'rgba(9,237,224,0.3)', // 线的颜色},},});// 设置初始数据graph.data(this.nodeData);// 渲染图表graph.render();if (typeof window !== 'undefined')window.onresize = () => {if (!graph || graph.get('destroyed')) return;};})}}
};
</script><style lang="less" scoped>
.body-wrap {overflow: hidden;width: 1920px;height: 1080px;background: #040d27;background-size: cover;transform-origin: 0 0;
}.graph-wrap {width: 1920px;height: 1080px;background: none;
}
</style>【小车原图示例】
【工具网站】
base64图片在线转换工具 - 站长工具
G6