如何用js实现SVG图形的端点捕捉功能

要实现SVG图形的端点捕捉功能，可以使用JavaScript结合SVG的事件监听和计算逻辑来实现。以下是一个简单的实现示例：

1. 首先，创建一个SVG元素，并在其中绘制你所需的图形，例如一个矩形：

<svg id="my-svg" width="400" height="400">
  <rect id="my-rect" x="100" y="100" width="200" height="200" fill="blue"/>
</svg>

2. 在JavaScript中，获取SVG元素和矩形元素的引用：

const svg = document.getElementById('my-svg');
const rect = document.getElementById('my-rect');

3. 添加鼠标移动事件监听器到SVG元素上，以便实时捕捉鼠标位置：

svg.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  
  // 在这里编写端点捕捉的逻辑
});

4. 在鼠标移动事件处理程序中，编写端点捕捉的逻辑。可以通过计算鼠标位置与图形的端点位置之间的距离，找到最近的端点：

const rectPoints = [
  { x: rect.x.baseVal.value, y: rect.y.baseVal.value }, // 左上角
  { x: rect.x.baseVal.value + rect.width.baseVal.value, y: rect.y.baseVal.value }, // 右上角
  { x: rect.x.baseVal.value, y: rect.y.baseVal.value + rect.height.baseVal.value }, // 左下角
  { x: rect.x.baseVal.value + rect.width.baseVal.value, y: rect.y.baseVal.value + rect.height.baseVal.value } // 右下角
];

let closestPoint = null;
let minDistance = Infinity;

rectPoints.forEach((point) => {
  const distance = Math.sqrt(Math.pow(mouseX - point.x, 2) + Math.pow(mouseY - point.y, 2));
  
  if (distance < minDistance) {
    minDistance = distance;
    closestPoint = point;
  }
});

console.log('最近的端点：', closestPoint);

在上述代码中，我们首先定义了矩形的四个端点坐标，并使用欧氏距离公式计算鼠标位置与每个端点的距离。然后，通过比较距离找到最近的端点，并将其输出到控制台。

你可以根据实际需求对上述代码进行扩展和优化，例如添加拖拽功能、增加其他图形的捕捉等。希望对你有所帮助！