获取旋转图像的尺寸

Question

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

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

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

我已经为你创建了一个 JSFiddle 来适应：

http://jsfiddle.net/ZY7Ux/

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

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

您应该注意，位置值是针对图像/矩形的中心的。

谢谢。

Answer 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
);