基于svg实现起点到终点的直线连接，线跟鼠标移动

lxy_storm

已于 2024-04-26 11:00:22 修改

阅读量170

点赞数 2

文章标签： javascript 开发语言

于 2024-04-26 10:57:59 首次发布

本文链接：https://blog.csdn.net/weixin_43882325/article/details/138212461

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #container {
      height: 300px;
      width: 100%;
      background-color: #ccc;
    }
  </style>
</head>
<body>
<div id="container">
  <div id="startPoint" style="position: absolute;left: 0;width: 100px;height: 20px;background-color: red">起点</div>
  <div id="endPoint" style="position: absolute;right: 0;width: 100px;height: 20px;background-color: gold">终点</div>
  <svg id="lineSVG" width="100%" height="100%" style="position: absolute; top: 0; left: 0; pointer-events: none;">
    <defs>
      <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
        <path xmlns="http://www.w3.org/2000/svg" d="M2,2 L10,6 L2,10" style="fill: #000000;" />
      </marker>
    </defs>
    <line id="connectingLine" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
  </svg>
</div>
</body>
<script>

const startPoint = document.getElementById('startPoint');
  const endPoint = document.getElementById('endPoint');
  const connectingLine = document.getElementById('connectingLine');

  const container = document.getElementById('container');
  let isMouseOverEndPoint = false;

  container.onmousemove = function (e) {
    if(isMouseOverEndPoint) return
    const startCoords = startPoint.getBoundingClientRect();
    const endCoords = endPoint.getBoundingClientRect();

    const mouseX = e.clientX;
    const mouseY = e.clientY;

    let x1, y1, x2, y2;
    // 当鼠标到达终点时
    if (mouseX >= endCoords.left && mouseX <= endCoords.right && mouseY >= endCoords.top && mouseY <= endCoords.bottom) {
      isMouseOverEndPoint = true;
      x1 = startCoords.left + startCoords.width / 2;
      y1 = startCoords.top + startCoords.height / 2;
      x2 = endCoords.left + endCoords.width / 2;
      y2 = endCoords.top + endCoords.height / 2;
    } else {
      x1 = startCoords.left + startCoords.width / 2;
      y1 = startCoords.top + startCoords.height / 2;
      x2 = mouseX;
      y2 = mouseY;
    }
    connectingLine.setAttribute('x1', x1);
    connectingLine.setAttribute('y1', y1);
    connectingLine.setAttribute('x2', x2);
    connectingLine.setAttribute('y2', y2);
  };
</script>
</html>