0

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

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

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

旋转时的选择问题

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

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

请帮帮我！

4

1 回答 1

0

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

于 2013-01-11T17:26:30.207 回答