Question

我有一张画布，我将图像画到上面。在绘制之前，图像可以旋转到一定程度（EG：30）。

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

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

我已经创建了一个JSFiddle供您调整：

我在这个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
);

获取旋转图像的尺寸

1 个答案: