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

Question

这都是关于数学的。很遗憾我忘记了我在学校学到的那些。

好的，我正在尝试在 Javascript 中以一定角度旋转（使用画布）后获取图像尺寸。

Answer 1

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

假设您的原始矩形大小为 R(ectangle)W(idth) * RH(eight)，

在这种情况下RW=200，RH=80;

逆时针旋转一定角度A后，

0deg <= A <= 90deg以度（或0 <= A <= Math.PI/2弧度）为单位，

在这种情况下，A=30deg或A=Math.PI/6

在新的“外”矩形中，每条边被分成两部分（为了描述方便；对应图像）。

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

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

所以新矩形的大小（面积）为(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，现在你可以计算一切了。

Answer 2

这是一个实现@Passerby 的解决方案 + 其他一些保护措施的插入式函数：

function imageSizeAfterRotation(size, degrees) {
    degrees = degrees % 180;
    if (degrees < 0) {
        degrees = 180 + degrees;
    }
    if (degrees >= 90) {
        size = [ size[1], size[0] ];
        degrees = degrees - 90;
    }
    if (degrees === 0) {
        return size;
    }
    const radians = degrees * Math.PI / 180;
    const width = (size[0] * Math.cos(radians)) + (size[1] * Math.sin(radians));
    const height = (size[0] * Math.sin(radians)) + (size[1] * Math.cos(radians));
    return [ width, height ];
}

// USAGE:
imageSizeAfterRotation([ 200, 80 ], 30) // [ 213.20508075688775, 169.28203230275508 ]