javascript - math - 在 Javascript 中获取旋转后的图像尺寸

Question

这都是关于数学的。可惜我在学校学到的东西都忘记了。

好的，我正在尝试在 Javascript 中以一定 Angular 旋转(使用 Canvas )后获取图像尺寸。

Answer 1

由于我这里除了 MSPaint 之外没有任何工具，因此我将重新使用您的图像:

假设您原始矩形的大小为 R(长方形)W(idth) * RH(八)，

在本例中RW=200 , RH=80 ;

逆时针旋转一定 Angular A后，

哪里0deg <= A <= 90deg以度为单位(或 0 <= A <= Math.PI/2 以弧度为单位)，

在本例中A=30deg或A=Math.PI/6 ,

在新的“外部”矩形中，每条边都分为两部分(为了描述方便；与图像相对应)。

在左侧，假设上部(紫色)部分称为 N(ew)H(8)U(p)，下部(红色) ) 部分称为 NHL(ow)；

底部的规则相同，我们有 NW(idth)L(eft)(蓝色)和 NWR(ight)(橙色)。

因此新矩形的大小(面积)将为 (NHU + NHL) * (NWL + NWR)

根据sin的定义和cos :

NWL = RW * Math.cos(A); //where A is in radians
NHL = RW * Math.sin(A);

NHU = RH * Math.cos(A);
NWR = RH * Math.sin(A);

(如果您使用 A 以度为单位，请将 A 替换为 Math.PI*A/180 )。

因此新的“外部”宽度将是 NWL + NWR ，新的“外部”高度将为 NHU + NHL ，现在您可以计算一切。