Html 计算旋转div内div的精确x和y位置

我已经在HTML5画布上实现了缩放和裁剪。缩放实际上是增加画布的高度和宽度，使其看起来被缩放。对于裁剪，我编写了一个算法，使用鼠标选择一个矩形区域，然后进行裁剪。现在，如果我想在图像放大或缩小时选择作物区域，我必须考虑由于缩放引起的顶部和左侧位置位移，这很好。

所以我现在实现了一个rotate（使用css3转换：rotate）。问题是，当我将图像旋转一定角度时，所选内容看起来与实际鼠标位置有点偏离。缩放效果也会出现这种情况，但因为我习惯于从x和y位置减去增加的左距离和顶距离，所以即使在缩放图像时，我也能够绘制选择。我不明白我该怎么做旋转图像

下图可能会帮助您更清楚地理解我的问题：

画布周围有一个div，反映了画布。它将具有与画布相同的宽度、高度、顶部和左侧属性。这是故意的，因为我不能添加选择，这是绝对的，作为画布的子级。现在，当在FireBug中选择此封面时，它仍然显示为一个矩形，增加了宽度和高度，改变了顶部和左侧的位置

我知道我必须像计算zoom一样计算位移，但我不知道怎么做！我花了很多时间尝试毕达哥拉斯算法和旋转矩阵之类的东西

---

请帮帮我

您可以使用此函数旋转每个顶点，其中“pnt”是一个顶点，“pivot”是您正在旋转的点，“angle”是以弧度表示的角度

function rotatePoint(pnt, pivot, angle){
   var data = figureAngle(pivot, pnt),
      theta = data.angle + angle,
      rise = Math.sin(theta) * data.length,
      run = Math.cos(theta) * data.length;

   return {
      x: pivot.x + run,
      y: pivot.y + rise
   }
}

function figureAngle(start, end){
   var rise = (end.y - start.y),
        run = (end.x - start.x),
        length = Math.sqrt(Math.pow(rise, 2) + Math.pow(run, 2));

   return {length: length, angle: Math.atan2(-rise, -run) + Math.PI};
}

然后你的水平位移将是4个新顶点中最小的x，垂直位移将是最小的y

---

编辑：旋转前，假设左上角坐标为[0,0]。如果不是，则需要从结果中减去起始坐标，即如果左上角从[50,100]开始，则水平位移为xMin-50，垂直位移为yMin-100

我使用旋转变换，因此我认为轴是图像的中心。还有，我必须对选择的所有4个角都这样做吗？不，我猜你是指鼠标点击的x和y坐标。。。对吗？如果css从矩形的中间旋转，那么yes pivot将是矩形的中心，yes您需要为矩形的每个角运行该函数。你将得到旋转矩形的新角点的坐标。我很困惑！什么是

figureAngle

以及

data.angle

从何而来？此外，每个点是一组x和y坐标。。。我应该如何在你的函数中替换它们呢？哦，对不起，从我的一些代码中复制了它们，我忘了它有依赖项。更新