JavaScript鼠标最近坐标点查询函数实现及原点设置咨询

没问题，我来帮你搞定这个需求！其实核心思路就是计算每个坐标点到鼠标位置的距离，然后找出距离最小的那个点。这里有个实用小技巧：我们不需要计算实际的欧几里得距离（开根号），只需要比较距离的平方就可以了——因为平方运算不会改变距离的大小排序，还能节省计算资源，尤其是当你的坐标点数量很多的时候。

下面是具体的JavaScript函数实现：

// 定义你的坐标数组，格式为 [x, y] 的二维数组
const gridPoints = [[92, 81], [82, 47], [81, 3]];

function getClosestPoint(mouseX, mouseY, points) {
  // 初始化最近点为null，最小距离平方设为无穷大
  let closestPoint = null;
  let minDistanceSquared = Infinity;

  // 遍历所有坐标点
  for (const [x, y] of points) {
    // 计算当前点与鼠标位置的距离平方
    const dx = mouseX - x;
    const dy = mouseY - y;
    const distanceSquared = dx * dx + dy * dy;

    // 如果当前点的距离平方更小，更新最近点和最小距离
    if (distanceSquared < minDistanceSquared) {
      minDistanceSquared = distanceSquared;
      closestPoint = [x, y];
    }
  }

  return closestPoint;
}

// 示例调用：假设鼠标位置是 (80, 40)
const mouseX = 80;
const mouseY = 40;
const closest = getClosestPoint(mouseX, mouseY, gridPoints);
console.log("距离鼠标最近的坐标点是：", closest); // 输出 [82, 47]

补充说明： #

• 如果存在多个点与鼠标的距离完全相同，这个函数会返回第一个遇到的点。如果你需要返回所有距离最近的点，可以修改函数，把符合条件的点都收集到一个数组里返回。
• 这个方法适用于任何数量的坐标点，哪怕是100x100网格里的所有点，性能也不会有问题。

内容的提问来源于stack exchange，提问作者Pancake_