1

我有一个画布，可以在上面绘制图像。图像可以在绘制之前旋转一定的度数（EG：30）。

我需要绘制一个框来包含绘制的图像；这很容易，但宽度和高度会根据图像旋转的角度而变化。

我在这里看到了一些非常相似的问题，但我无法将答案实现到我的代码中，因为它们要么是用另一种语言（如 ActionScript）编写的，要么它们正在旋转 div 或不在画布内的其他元素。我无法弄清楚它背后的主要数学原理。

我创建了一个 JSFiddle 供您适应：

http://jsfiddle.net/ZY7Ux/

我在这个 JSFiddle 中创建了两个函数：

drawImageToCanvasRotated(URL, X, Y, Angle);
drawRectangle(X, Y, Width, Height);

您应该注意，位置值适用于图像/矩形的中心。

谢谢。

4

1 回答 1

1

您旋转图像，因此新宽度变为以下组合：

  • 宽度的 x 尺寸，比全宽略小（使用余弦）
  • 高度的 x 维度，略高于 0（使用正弦）

类似的计算适用于新高度。http://jsfiddle.net/ZY7Ux/1/

var a = Width * Math.cos(Angle);
var b = Height * Math.sin(Angle);
var c = a + b;

var p = Width * Math.sin(Angle);
var q = Height * Math.cos(Angle);
var r = p + q;

context.strokeRect(
    X - c / 2,
    Y - r / 2,
    c,
    r
);
于 2012-12-08T19:37:47.520 回答