如何基于矩形边框上的已知点生成另外3个对应点？

首先，我完全理解你的需求：你已经实现了在矩形边框（含margin区域）生成随机点的功能，现在需要基于这个已知点生成另外三个对称的对应点（结合你提到的图示，应该是四个点分别分布在四条边上，呈现规整的对称关系）。

核心思路：利用矩形的对称性计算坐标 #

矩形天生具备中心对称和轴对称特性，我们可以基于已知点的位置，结合矩形的宽高、margin参数，直接推导计算出另外三个点的坐标。

先明确你的矩形参数定义（和现有代码保持一致）：

• width：矩形元素的宽度（示例中为300px）
• height：矩形元素的高度（示例中为200px）
• margin：边框点距离矩形元素的外边距
• 矩形四个角的相对坐标（以矩形元素左上角为原点）：
  • 左上角：(-margin, -margin)
  • 右上角：(width + margin, -margin)
  • 右下角：(width + margin, height + margin)
  • 左下角：(-margin, height + margin)

步骤1：判断已知点所在的边 #

首先我们需要确定已知点P(x,y)在矩形的哪一条边上，这里提供两种判断方式：

方式1：基于初始随机值判断

function getEdge(point, width, height) {
  if (point <= width) return 'top';
  if (point <= width + height) return 'right';
  if (point <= width * 2 + height) return 'bottom';
  return 'left';
}

方式2：直接通过坐标判断

function getEdgeByCoord(x, y, width, height, margin) {
  if (y === -margin) return 'top';
  if (x === width + margin) return 'right';
  if (y === height + margin) return 'bottom';
  return 'left';
}

步骤2：计算三个对应点的坐标 #

假设已知点为P(x0, y0)，我们分四种边的情况推导另外三个点：

情况1：已知点在Top边（y0 = -margin）

Top边的点x范围：0 ≤ x0 ≤ width

• Bottom边对应点：与Top点垂直对称，x坐标相同，y坐标为height + margin → (x0, height + margin)
• Right边对应点：距离右上角的距离等于Top点距离左上角的距离 → (width + margin, x0)
• Left边对应点：距离左下角的距离等于Top点距离左上角的距离 → (-margin, height - x0)

情况2：已知点在Right边（x0 = width + margin）

Right边的点y范围：0 ≤ y0 ≤ height

• Left边对应点：与Right点垂直对称，y坐标相同，x坐标为-margin → (-margin, y0)
• Bottom边对应点：距离右下角的距离等于Right点距离右上角的距离 → (width - y0, height + margin)
• Top边对应点：距离左上角的距离等于Right点距离右上角的距离 → (y0, -margin)

情况3：已知点在Bottom边（y0 = height + margin）

Bottom边的点x范围：0 ≤ x0 ≤ width

• Top边对应点：与Bottom点垂直对称，x坐标相同，y坐标为-margin → (x0, -margin)
• Left边对应点：距离左下角的距离等于Bottom点距离右下角的距离 → (-margin, x0)
• Right边对应点：距离右上角的距离等于Bottom点距离右下角的距离 → (width + margin, height - x0)

情况4：已知点在Left边（x0 = -margin）

Left边的点y范围：0 ≤ y0 ≤ height

• Right边对应点：与Left点垂直对称，y坐标相同，x坐标为width + margin → (width + margin, y0)
• Top边对应点：距离左上角的距离等于Left点距离左下角的距离 → (height - y0, -margin)
• Bottom边对应点：距离右下角的距离等于Left点距离左下角的距离 → (y0, height + margin)

封装成可调用的函数 #

把上述逻辑封装成一个通用函数，输入已知点坐标和矩形参数，直接返回另外三个点的数组：

function getCorrespondingPoints(x0, y0, width, height, margin) {
  const points = [];
  const edge = getEdgeByCoord(x0, y0, width, height, margin);
  
  switch(edge) {
    case 'top':
      points.push({x: x0, y: height + margin});
      points.push({x: width + margin, y: x0});
      points.push({x: -margin, y: height - x0});
      break;
    case 'right':
      points.push({x: -margin, y: y0});
      points.push({x: width - y0, y: height + margin});
      points.push({x: y0, y: -margin});
      break;
    case 'bottom':
      points.push({x: x0, y: -margin});
      points.push({x: -margin, y: x0});
      points.push({x: width + margin, y: height - x0});
      break;
    case 'left':
      points.push({x: width + margin, y: y0});
      points.push({x: height - y0, y: -margin});
      points.push({x: y0, y: height + margin});
      break;
  }
  return points;
}

整合到你的现有代码中 #

修改测试代码，生成四个点并渲染到页面：

var width = 300, height = 200, margin = 0;
var rnd = function(min, max) {
  return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
};
var point = rnd(0, (width * 2) + (height * 2));
var set_point = function(point) {
  var coords = { x: 0, y: 0 };
  if(point <= width) { // if on top
    coords.x = point;
    coords.y = -margin;
  } else if(point <= width + height) { // if on the right
    coords.x = width + margin;
    coords.y = point - width;
  } else if(point <= (width * 2) + height) { // if on the bottom
    coords.x = ((width * 2) + height) - point;
    coords.y = height + margin;
  } else { // if on the left
    coords.x = -margin;
    coords.y = ((width * 2) + (height * 2)) - point;
  }
  return coords;
};

// 获取初始随机点
var initialPoint = set_point(point);
// 获取另外三个对应点
var otherPoints = getCorrespondingPoints(initialPoint.x, initialPoint.y, width, height, margin);
// 合并所有四个点
var allPoints = [initialPoint, ...otherPoints];

// 渲染所有点到页面
var rect = document.querySelector('.rect');
allPoints.forEach(p => {
  var dot = document.createElement('div');
  dot.className = 'point';
  dot.style.left = p.x + 'px';
  dot.style.top = p.y + 'px';
  rect.appendChild(dot);
});

// 辅助函数：判断点所在边
function getEdgeByCoord(x, y, width, height, margin) {
  if (y === -margin) return 'top';
  if (x === width + margin) return 'right';
  if (y === height + margin) return 'bottom';
  return 'left';
}

验证效果 #

这段代码会生成四个对称分布在矩形四条边上的点，完全匹配你图示的需求。你可以调整margin参数改变点与矩形元素的距离，也可以修改宽高适配不同尺寸的矩形。

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