JavaScript多边形旋转问题：旋转后多边形变大求助

你的旋转公式本身是完全正确的——绕质心旋转的标准实现没有问题，那为什么每次旋转后多边形会“变大”呢？我猜测问题出在旋转中心的反复计算上：

• 你当前的流程可能是：旋转多边形 → 用旋转后的新顶点重新计算质心 → 再基于这个新质心进行下一次旋转。
• 理想情况下，绕质心旋转后的多边形质心应该和原始质心完全重合，但因为JavaScript浮点数的精度限制（比如0.1 + 0.2 !== 0.3这类精度误差），每次计算新顶点的质心都会产生微小的偏移。
• 多次旋转后，这个偏移会累积：每次都绕一个稍微偏离原始位置的点旋转，顶点会逐渐远离初始区域，视觉上就表现为多边形“变大”了。

修复方案 #

只需要计算一次原始多边形的质心，之后所有旋转操作都固定使用这个原始质心，而不是每次旋转后重新计算：

// 1. 先计算并保存原始多边形的质心（只执行一次）
const originalCoords = [ [-17.999999999999986, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ];
const originalCentroid = getCentroid(originalCoords);

// 2. 旋转函数保持不变，但每次旋转都使用原始质心
function rotatePolygon(coords, angle) {
  return coords.map(coord => {
    return rotate(originalCentroid[0], originalCentroid[1], coord[0], coord[1], angle);
  });
}

// 3. 后续旋转都基于原始坐标或上一次旋转后的坐标，但始终用原始质心
let currentCoords = [...originalCoords];
currentCoords = rotatePolygon(currentCoords, 90); // 第一次旋转
currentCoords = rotatePolygon(currentCoords, 90); // 第二次旋转，依然用原始质心

额外建议 #

如果浮点数精度误差还是带来了微小的偏移，可以在旋转后对坐标进行适当的精度截断，比如保留2-4位小数：

function rotate(CX, CY, X, Y, angle) {
  var rad = angle * (Math.PI / 180.0);
  var nx = Math.cos(rad) * (X-CX) - Math.sin(rad) * (Y-CY) + CX;
  var ny = Math.sin(rad) * (X-CX) + Math.cos(rad) * (Y-CY) + CY;
  // 保留4位小数，减少精度误差累积
  return [Number(nx.toFixed(4)), Number(ny.toFixed(4))];
}

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