如何在JavaScript中获取矩形边缘附近的随机点？代码问题求助

先把你给出的代码片段贴出来，方便分析：

function Point(x, y) { this.x = x; this.y = y; }
function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function getRandomPointNearEdges(rectPos, width, height, border) { 
  var point = new Point(rectPos.x, rectPos.y); 
  if (randomNumber(0, 1) == 0) { 
    point.x = randomNumber(rec...

看得出来你的代码还没写完，而且有几个明显的问题导致它无法运行，我来帮你梳理并修复：

原代码的问题 #

• 变量拼写错误：你写到randomNumber(rec...的时候截断了，这里应该是rectPos，拼写错误会直接导致变量未定义的报错。
• 逻辑不完整：目前只处理了x轴的二选一情况，完全没涉及y轴的边缘逻辑，也没用到border参数来控制“边缘附近”的范围。
• 初始化逻辑不合理：一开始就把点设为矩形的左上角，之后只修改x或y，这样生成的点范围会非常受限，不符合“边缘附近随机点”的需求。

修复后的完整代码 #

下面是实现了完整功能的代码，我会在后面解释关键逻辑：

// 点构造函数保持你的写法不变
function Point(x, y) { this.x = x; this.y = y; }

// 整数随机数生成函数，如果需要浮点数可以去掉Math.floor
function randomNumber(min, max) { 
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

function getRandomPointNearEdges(rectPos, width, height, border) {
  // 先算出矩形的四个边界坐标，方便后续计算
  const rectLeft = rectPos.x;
  const rectRight = rectPos.x + width;
  const rectTop = rectPos.y;
  const rectBottom = rectPos.y + height;

  // 随机挑选四条边缘中的一条：0=上，1=下，2=左，3=右
  const selectedEdge = randomNumber(0, 3);
  let x, y;

  // 根据选中的边缘，计算随机点的坐标范围
  switch(selectedEdge) {
    case 0: // 上边缘附近：y在顶部border范围内，x覆盖整个矩形宽度
      x = randomNumber(rectLeft, rectRight);
      y = randomNumber(rectTop, rectTop + border);
      break;
    case 1: // 下边缘附近：y在底部border范围内，x覆盖整个矩形宽度
      x = randomNumber(rectLeft, rectRight);
      y = randomNumber(rectBottom - border, rectBottom);
      break;
    case 2: // 左边缘附近：x在左侧border范围内，y覆盖整个矩形高度
      x = randomNumber(rectLeft, rectLeft + border);
      y = randomNumber(rectTop, rectBottom);
      break;
    case 3: // 右边缘附近：x在右侧border范围内，y覆盖整个矩形高度
      x = randomNumber(rectRight - border, rectRight);
      y = randomNumber(rectTop, rectBottom);
      break;
  }

  return new Point(x, y);
}

关键逻辑说明 #

1. 边界计算：先算出矩形的左右上下四个边界，避免重复计算，让代码更清晰。
2. 随机选边缘：通过0-3的随机数选中四条边缘之一，保证四个边缘都有机会生成随机点。
3. 边缘范围控制：利用border参数控制每个边缘附近的区域宽度，比如上边缘的点会落在矩形顶部向下border长度的范围内。
4. 可选调整：如果需要生成浮点数坐标，只需要修改randomNumber函数，去掉Math.floor即可：

   function randomNumber(min, max) { 
     return Math.random() * (max - min) + min; 
   }
   

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