X6 2.x版本连接线小球滑动

最新推荐文章于 2026-06-18 15:17:38 发布
原创最新推荐文章于 2026-06-18 15:17:38 发布 · 565 阅读
10 ·
本内容遵循CC 4.0 BY-SA版权协议
GEO检测
标签
#前端 #javascript #html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>X6 Edge Animation</title>
    <style>
        #container {
            width: 800px;
            height: 600px;
            border: 1px solid #000;
			background:black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script src="https://unpkg.com/@antv/x6@1"></script>
    <script >
	
	document.addEventListener('DOMContentLoaded', function() {
    const { Graph } = X6;

    const graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        grid: true,
    });

    // 添加节点
    const source = graph.addNode({
        shape: 'circle',
        x: 40,
        y: 40,
        width: 60,
        height: 60,
        attrs: {
            body: {
                fill: '#2ECC71',
                stroke: '#000',
            },
            label: {
                text: 'Start',
                fill: '#333',
            },
        },
    });

    const target = graph.addNode({
        shape: 'circle',
        x: 340,
        y: 240,
        width: 60,
        height: 60,
        attrs: {
            body: {
                fill: '#F39C12',
                stroke: '#000',
            },
            label: {
                text: 'End',
                fill: '#333',
            },
        },
    });
	 const target2 = graph.addNode({
        shape: 'circle',
        x: 340,
        y: 440,
        width: 60,
        height: 60,
        attrs: {
            body: {
                fill: '#a3fC12',
                stroke: '#000',
            },
            label: {
                text: 'End2',
                fill: '#333',
            },
        },
    });

    // 添加连接线
    const edge = graph.addEdge({
        source: { cell: source.id },
        target: { cell: target.id },
        attrs: {
            line: {
                stroke: '#75ff8D',
                strokeWidth: 2,
                targetMarker: null,
            },
        },
    });
const edge2 = graph.addEdge({
        source: { cell: source.id },
        target: { cell: target2.id },
        attrs: {
            line: {
                stroke: '#75ff8D',
                strokeWidth: 2,
                targetMarker: null,
            },
        },
    });

   
	function animateBallAlongEdge(edge) {
  const edgeView = graph.findViewByCell(edge);
  const path = edgeView.findOne('path'); // 直接获取边的路径元素
  let length = path.getTotalLength();
  
  /**let ball = graph.addNode({
    shape: 'circle', // 使用之前注册的自定义小球节点类型
    size: { width: 10, height: 10 },
    attrs: { body: { fill: 'red' } }
  });*/
  let ball = graph.addNode({
	shape: 'rect',
	x: 300,
	y: 100,
	width: 5,
	height: 5, // 高度代表线条的长度，此时宽度很小
	attrs: {
		body: {
			fill: 'red', // 线条颜色
			stroke: 'red', // 边框颜色
			strokeWidth: 1, // 边框宽度
		}
	}
  })

  let offset = 100;
  const speed = 1.9; // 控制小球移动的速度

  function update() {
    offset += speed;
    if (offset > path.getTotalLength()) {
      offset = 0; // 当小球到达路径末端时，重置offset使其循环移动
    }

    const point = path.getPointAtLength(offset);
    ball.position(point.x - 5, point.y - 5); // 更新小球位置，使其居中

    requestAnimationFrame(update); // 循环调用update函数，创建动画效果
  }

  update(); // 启动动画
}

// 调用动画函数，开始沿边移动小球
animateBallAlongEdge(edge);
animateBallAlongEdge(edge2);

});

	</script>
	
</body>
</html>