Javascript 获取旋转图像的尺寸

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

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

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

我创建了一个JSFIDLE供您调整：

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

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

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

---

谢谢。

旋转图像，使新宽度成为以下各项的组合：

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

类似的计算适用于新高度

---

旋转图像，使新宽度成为以下各项的组合：

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

类似的计算适用于新高度

---

这不是纯几何吗？边界矩形的大小不是[width*（sin（x）+cos（x）），height*（sin（x）+cos（x））]吗？这不是纯粹的几何图形吗？边界矩形的大小不是[width*（sin（x）+cos（x）），height*（sin（x）+cos（x））]吗？谢谢！这正是我所需要的，也是一个很好的解释。@CHRIS:请注意，当负角度/角度大于90度时，此计算失败，因为其背后的想法不适用于这种情况。我很难将其调整为适用于-360到360之间的所有值。我试过做一个Primitive if（imageRotation>=90）。。。其他的但我认为可以做得更好。请帮忙，谢谢。我真的不明白怎么做：上下文[I？“lineTo”：“moveTo”]（xM[I]，yM[I]）；作品存储矩形的起始X和Y以及结束X和Y或宽度和高度的变量是什么？我尝试记录xM和yM的所有值，并将线条绘制代码更改为：context.strokeStyle=“#00F”；strokeRect（X+xM[0]，Y+yM[0]，X+xM[1]，Y+yM[1]）；但正如我所说，我不确定xM和yM变量到底存储了什么。@克里斯：每对

xM[I]，yM[I]

都是边界矩形的一角。它由旋转矩形的最小/最大x/y组成。谢谢！这正是我所需要的，也是一个很好的解释。@CHRIS:请注意，当负角度/角度大于90度时，此计算失败，因为其背后的想法不适用于这种情况。我很难将其调整为适用于-360到360之间的所有值。我试过做一个Primitive if（imageRotation>=90）。。。其他的但我认为可以做得更好。请帮忙，谢谢。我真的不明白怎么做：上下文[I？“lineTo”：“moveTo”]（xM[I]，yM[I]）；作品存储矩形的起始X和Y以及结束X和Y或宽度和高度的变量是什么？我尝试记录xM和yM的所有值，并将线条绘制代码更改为：context.strokeStyle=“#00F”；strokeRect（X+xM[0]，Y+yM[0]，X+xM[1]，Y+yM[1]）；但正如我所说，我不确定xM和yM变量到底存储了什么。@克里斯：每对

xM[I]，yM[I]

都是边界矩形的一角。它由旋转矩形的最小/最大x/y组成。

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