JavaScript图像旋转与平移问题：拼接图像单图旋转平移的坐标计算及替代方案求助

嘿，我来帮你搞定这个拼接小图单独旋转平移实现整体旋转的问题！核心难点确实是计算每个小图旋转后的平移坐标，我先给你讲清楚坐标计算的逻辑，再提供几种可行的方案。

一、核心：平移坐标的计算方法 #

要让四张小图旋转后仍拼成整体旋转的效果，关键是让每个小图绕原始大图的中心旋转，而不是各自的中心。具体计算步骤如下：

1. 确定基础坐标

   • 先明确原始大图的中心坐标 (cx, cy)：如果大图宽为totalWidth，高为totalHeight，那么 cx = totalWidth/2，cy = totalHeight/2。
   • 确定每个小图的原始中心坐标 (ix, iy)：比如2x2排列的话，左上小图的中心是(imgWidth/2, imgHeight/2)，右上是(totalWidth - imgWidth/2, imgHeight/2)，以此类推。

2. 计算偏移向量的旋转

   • 先把角度转换成弧度：rad = angle * Math.PI / 180
   • 计算小图中心相对于大图中心的偏移：dx = ix - cx，dy = iy - cy
   • 对这个偏移向量进行旋转（旋转矩阵运算）：

     dxRot = dx * cos(rad) - dy * sin(rad)
     dyRot = dx * sin(rad) + dy * cos(rad)
     

   • 旋转后小图的新中心坐标：ixRot = cx + dxRot，iyRot = cy + dyRot

3. 调整平移坐标适配旋转后的包围盒
   小图旋转后，自身的包围盒会变大，所以需要根据旋转后的包围盒尺寸，计算左上角的平移位置：

   • 旋转后小图的半宽/半高：

     rotHalfWidth = (imgWidth * Math.abs(cos(rad)) + imgHeight * Math.abs(sin(rad))) / 2
     rotHalfHeight = (imgWidth * Math.abs(sin(rad)) + imgHeight * Math.abs(cos(rad))) / 2
     

   • 最终平移坐标：x = ixRot - rotHalfWidth，y = iyRot - rotHalfHeight

代码实现示例 #

function getTranslateCoords(angle, imgIdx, imgW, imgH, totalW, totalH) {
  const rad = angle * Math.PI / 180;
  const cos = Math.cos(rad);
  const sin = Math.sin(rad);

  // 大图中心
  const cx = totalW / 2;
  const cy = totalH / 2;

  // 各小图原始中心坐标（2x2排列）
  let ix, iy;
  switch(imgIdx) {
    case 1: // 左上
      ix = imgW / 2;
      iy = imgH / 2;
      break;
    case 2: // 右上
      ix = totalW - imgW / 2;
      iy = imgH / 2;
      break;
    case 3: // 左下
      ix = imgW / 2;
      iy = totalH - imgH / 2;
      break;
    case 4: // 右下
      ix = totalW - imgW / 2;
      iy = totalH - imgH / 2;
      break;
  }

  // 计算偏移向量旋转后的结果
  const dx = ix - cx;
  const dy = iy - cy;
  const dxRot = dx * cos - dy * sin;
  const dyRot = dx * sin + dy * cos;

  // 旋转后的小图中心
  const newCenterX = cx + dxRot;
  const newCenterY = cy + dyRot;

  // 旋转后小图的包围盒半尺寸
  const rotHalfW = (imgW * Math.abs(cos) + imgH * Math.abs(sin)) / 2;
  const rotHalfH = (imgW * Math.abs(sin) + imgH * Math.abs(cos)) / 2;

  // 最终平移坐标（左上角）
  return {
    x: newCenterX - rotHalfW,
    y: newCenterY - rotHalfH
  };
}

// 使用示例
const angle = 30;
const imgSize = 200;
const totalSize = 400;

// 处理每张图
const img1Coords = getTranslateCoords(angle, 1, imgSize, imgSize, totalSize, totalSize);
document.getElementById("img1").style.transform = `translate(${img1Coords.x}px, ${img1Coords.y}px) rotate(${angle}deg)`;

const img2Coords = getTranslateCoords(angle, 2, imgSize, imgSize, totalSize, totalSize);
document.getElementById("img2").style.transform = `translate(${img2Coords.x}px, ${img2Coords.y}px) rotate(${angle}deg)`;

// 同理处理img3和img4

二、其他可行方案 #

如果DOM元素的transform计算太繁琐，还有两种替代思路：

1. Canvas绘制方案 #

用Canvas来实现整体旋转会更直观，不需要手动计算每个小图的偏移：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const angle = 30;
const rad = angle * Math.PI / 180;
const imgW = 200;
const imgH = 200;
const totalW = 400;
const totalH = 400;

// 先加载好四个小图（假设为img1、img2、img3、img4）
// 坐标变换：平移到中心→旋转→平移回原点
ctx.translate(totalW/2, totalH/2);
ctx.rotate(rad);
ctx.translate(-totalW/2, -totalH/2);

// 绘制四张小图到原始位置
ctx.drawImage(img1, 0, 0, imgW, imgH);
ctx.drawImage(img2, imgW, 0, imgW, imgH);
ctx.drawImage(img3, 0, imgH, imgW, imgH);
ctx.drawImage(img4, imgW, imgH, imgW, imgH);

这种方式直接通过Canvas的坐标变换实现整体旋转，代码更简洁，适合不需要保留独立DOM元素的场景。

2. 容器旋转（不符合需求但可参考） #

虽然你明确要求不能旋转容器，但还是提一下：如果允许把所有小图放在一个容器div里，直接旋转容器就能实现整体效果，代码最简单：

.container {
  transform: rotate(30deg);
  /* 可选：添加transform-origin指定旋转中心为容器中心 */
  transform-origin: center center;
}

但因为你需要单独操作每个小图，所以这个方案不适用，仅作参考。

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