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

Question

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

所以我现在正在实现一个旋转（使用css3 transform：rotate）。问题是，当我将图像旋转一定角度时，选择显示距离实际鼠标位置稍微偏离。这也常见于缩放效果，但由于我曾经从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