【示例】Vue AntV G6 base64自定义img 动画效果，自适应宽高屏
需求：拓扑图中需要用动画的线条连接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 configurations
const startLen = ratio * length;
// Calculate the lineDash
const cfg = {
lineDash: [startLen, length - startLen],
};
return cfg;
},
{
repeat: true, // Whether executes the animation repeatly
duration: 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 circle
image.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 here
return {
x: tmpPoint.x,
y: tmpPoint.y - 9,
matrix
};
},
{
repeat: true, // Whether executes the animation repeatly
// duration: 3000 // the duration for executing once
duration: 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 circle
image.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 ratio
const tmpPoint = shape.getPoint(ratio);
const pos = getLabelPosition(shape, ratio);
let matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
// var op =1
if (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 here
return {
x: tmpPoint.x,
y: tmpPoint.y - 36,
matrix,
opacity: op
};
},
{
repeat: true, // Whether executes the animation repeatly
duration: 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