旋转矩形的宽高计算及不同角度矩形绘制技术疑问

嘿，我来帮你理清这个旋转矩形的问题！首先得明确两个核心点：旋转本身不会改变矩形的实际宽高，只是改变它的朝向和位置；如果你纠结的是旋转后在坐标系中占据的轴对齐区域的宽高，那才需要额外计算。下面分两种情况给你讲清楚：

一、直接绘制旋转后的矩形（不需要重新计算宽高） #

你已经有了点旋转的函数，其实绘制旋转矩形的核心是旋转矩形的四个顶点，然后把旋转后的顶点连起来就行，步骤如下：

步骤1：定义原矩形的四个顶点 #

假设你已知原矩形的左上角坐标(x1, y1)、宽度w、高度h，那四个顶点坐标是：

• 左上角：(x1, y1)
• 右上角：(x1 + w, y1)
• 右下角：(x1 + w, y1 + h)
• 左下角：(x1, y1 + h)

步骤2：确定旋转原点 #

可以选矩形的中心（最常用），或者某个顶点，比如中心坐标是：

const originX = x1 + w / 2;
const originY = y1 + h / 2;

步骤3：用你的旋转函数处理所有顶点 #

先把你的旋转函数补全（看起来之前的代码没写完）：

// 完整的点旋转函数
function rotate(originX, originY, pointX, pointY, angle) {
  angle = angle * Math.PI / 180.0;
  const dx = pointX - originX;
  const dy = pointY - originY;
  return {
    x: originX + Math.cos(angle) * dx - Math.sin(angle) * dy,
    y: originY + Math.sin(angle) * dx + Math.cos(angle) * dy
  };
}

然后批量旋转四个顶点：

// 原矩形顶点数组
const originalPoints = [
  { x: x1, y: y1 },
  { x: x1 + w, y: y1 },
  { x: x1 + w, y: y1 + h },
  { x: x1, y: y1 + h }
];

// 旋转所有顶点
const rotatedPoints = originalPoints.map(point => 
  rotate(originX, originY, point.x, point.y, rotationAngle)
);

步骤4：绘制旋转后的矩形 #

以Canvas为例，直接连接四个旋转后的顶点：

const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
rotatedPoints.forEach((point, index) => {
  if (index === 0) {
    ctx.moveTo(point.x, point.y);
  } else {
    ctx.lineTo(point.x, point.y);
  }
});
ctx.closePath();
ctx.stroke();

二、计算旋转后轴对齐外接矩形的宽高 #

如果需要给旋转后的矩形套一个轴对齐的框（比如用于碰撞检测、布局），那就要计算所有旋转后顶点的坐标极值：

// 提取所有旋转后顶点的x和y值
const allX = rotatedPoints.map(p => p.x);
const allY = rotatedPoints.map(p => p.y);

// 外接矩形的宽高就是极值差
const outerWidth = Math.max(...allX) - Math.min(...allX);
const outerHeight = Math.max(...allY) - Math.min(...allY);

关键提醒 #

• 矩形本身的宽高w和h在旋转后是不变的，旋转只是改变了它的空间朝向
• 旋转原点的选择很重要，选中心旋转是最自然的，如果你选其他点（比如左上角），记得在旋转函数中传入对应的originX和originY

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