当前位置：首页 > news >正文

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

news 2025/7/14 1:07:31

课程视频

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

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

讲义截图

提及链接

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>const { getLabelPosition, transform } = G6.Util;const addAnimateArrow = (path, group, arrowStyle) => {const arrow =group.find((ele) => ele.get("name") === "animate-arrow") ||group.addShape("marker", {attrs: {stroke: "#3370ff",fill: "#fff",...arrowStyle,x: 16,y: 0,r: 8,lineWidth: 2,symbol: (x, y, r) => {return [["M", x - 8, y - 8],["L", x - 2, y],["L", x - 8, y + 8]];}},name: "animate-arrow"});arrow.stopAnimate();// animation for the red circlearrow.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 = path.getPoint(ratio);const roundPoint = {x: Math.round(tmpPoint.x),y: Math.round(tmpPoint.y)};const pos = getLabelPosition(path, ratio);let matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];matrix = transform(matrix, [["t", -roundPoint.x, -roundPoint.y],["r", pos.angle],["t", roundPoint.x, roundPoint.y]]);// returns the modified configurations here, x and y herereturn {x: tmpPoint.x,y: tmpPoint.y,matrix};},{repeat: true, // Whether executes the animation repeatlyduration: 3000 // the duration for executing once});};const lineDashAnimate = (path) => {const lineDash = [6, 4, 2, 4];path.stopAnimate();let index = 0;// Define the animationpath.animate(() => {index++;if (index > 9) {index = 0;}const res = {lineDash,lineDashOffset: -index};// returns the modified configurations here, lineDash and lineDashOffset herereturn res;},{repeat: true, // whether executes the animation repeatlyduration: 3000 // the duration for executing once});};G6.registerEdge("line-arrow",{getPath(points) {const startPoint = points[0];const endPoint = points[1];return [["M", startPoint.x, startPoint.y],["L", endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],["L", endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],["L", endPoint.x, endPoint.y]];},afterDraw(cfg, group) {const keyShape = group.find((ele) => ele.get("name") === "edge-shape");const attrs = keyShape.attr();const halo = group.addShape("path", {attrs: {...attrs,lineWidth: 8,opacity: 0.2},name: "edge-halo"});halo.hide();const { endLabel, endPoint, labelCfg } = cfg;const { style: labelStyle = {}, refX = 0, refY = 0 } = labelCfg;if (endLabel) {const endLabelShape = group.addShape("text", {attrs: {text: endLabel,x: endPoint.x - refX,y: endPoint.y + refY,textAlign: "right",fill: "#000",textBaseline: "middle",...labelStyle},name: "end-label-shape"});console.log("endLabelShape", endLabelShape);}},afterUpdate(cfg, item) {const group = item.getContainer();const endLabelShape = group.find((ele) => ele.get("name") === "end-label-shape");const { endLabel, endPoint, labelCfg } = cfg;const { style: labelStyle = {}, refX = 0, refY = 0 } = labelCfg;endLabelShape.attr({text: endLabel,x: endPoint.x - refX,y: endPoint.y + refY,...labelStyle});},setState(name, value, item) {const group = item.getContainer();const keyShapePath = group.find((ele) => ele.get("name") === "edge-shape");switch (name) {case "hover":const halo = group.find((ele) => ele.get("name") === "edge-halo");if (value) {const path = keyShapePath.attr("path");halo.show();halo.attr("path", path);} else {halo.hide();}break;case "selected":if (value) {lineDashAnimate(keyShapePath);// addAnimateArrow(keyShapePath, group, keyShapePath.attr());} else {keyShapePath.stopAnimate();keyShapePath.attr("lineDash", undefined);// const arrow = group.find(ele => ele.get('name') === 'animate-arrow');// if (arrow) arrow.remove(true);}break;default:break;}}},"polyline");const data = {nodes: [{id: "7",x: 150,y: 100},{id: "8",x: 300,y: 200}],edges: [{source: "7",target: "8",label: "xxx",endLabel: "yyy"}]};const container = document.getElementById("container");const width = container.scrollWidth;const height = container.scrollHeight || 500;const graph = new G6.Graph({container: "container",width,height,// translate the graph to align the canvas's center, support by v3.5.1fitCenter: true,modes: {// behaviordefault: ["drag-node", "drag-canvas", "click-select"]},defaultNode: {type: "circle",size: 40,anchorPoints: [[0, 0.5],[1, 0.5]],style: {fill: "#DEE9FF",stroke: "#5B8FF9"},linkPoints: {left: true,right: true,fill: "#fff",stroke: "#1890FF",size: 5}},defaultEdge: {type: "line-arrow",color: "#F6BD16",labelCfg: {autoRotate: true,position: "start",refX: 10}}});graph.data(data);graph.render();graph.on("edge:mouseenter", (e) => {graph.setItemState(e.item, "hover", true);});graph.on("edge:mouseleave", (e) => {graph.setItemState(e.item, "hover", false);});const clearEdgeStates = () => {const selectedEdges = graph.findAllByState("selected");selectedEdges?.forEach((edge) => graph.setItemState(edge, "selected", false));};graph.on("node:click", (e) => {clearEdgeStates();const relatedEdges = e.item.getEdges();relatedEdges.forEach((edge) => graph.setItemState(edge, "selected", true));});graph.on("canvas:click", (e) => clearEdgeStates());if (typeof window !== "undefined")window.onresize = () => {if (!graph || graph.get("destroyed")) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};</script>
</body></html>

查看全文

http://www.lryc.cn/news/466962.html