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

Question

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

所以我现在正在实现旋转（使用 css3 变换：旋转）。问题是，当我将图像旋转一定角度时，选择看起来与实际鼠标位置有点偏离。这曾经也发生在缩放效果中，但是由于我曾经从 x 和 y 位置分别减去添加的左侧和顶部距离，因此即使图像被缩放，我也能够绘制选择。我不明白应该如何处理旋转图像！

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

画布周围有一个 div，反映了画布。它将具有与画布相同的宽度、高度、顶部、左侧属性。这是故意完成的，因为我无法将绝对的选择添加为画布的子项。现在这个封面，当在 FireBug 中被选中时，仍然显示为一个矩形，其宽度和高度都增加了，顶部和左侧的位置也发生了变化。

我知道我必须像我已经为缩放所做的那样计算位移，但我不知道该怎么做！我花了很多时间尝试诸如毕达哥拉斯算法和旋转矩阵之类的东西等等等等！

请帮帮我！

Answer 1

你可以使用这个函数旋转每个顶点，其中“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