根据角度查找旋转图像的大小以匹配顶线答案

【问题标题】：Finding size of rotated image to match top-line based on angle根据角度查找旋转图像的大小以匹配顶线
【发布时间】：2019-11-06 18:02:34
【问题描述】：

（供参考的插图：https://i.stack.imgur.com/Wsge0.png）

代码示例 https://jsfiddle.net/waaentz/htrqdwjp/9/

const width = 1000;
const height = 100;
const canvas = document.createElement("canvas");
const stage = new createjs.Stage(canvas);
const img = new Image();
const bitmap = new createjs.Bitmap(img);
const baseGrid = new createjs.Shape();

const angle = 45; // Is dynamic
const magicScaleFormular = 1.39 // Find scale based on height and angle

img.src = getBase64();
img.addEventListener("load", ()=>{

    stage.addChild(baseGrid, bitmap);
    Object.assign(canvas, {width, height});

    bitmap.regX = (img.width / 2);
    bitmap.regY = img.height;
    bitmap.y = height;
    bitmap.rotation = angle;
    bitmap.scaleY = magicScaleFormular; // <-- scale to match top line

    baseGrid.graphics
        .beginStroke("red")
        .setStrokeStyle(4)
        .moveTo(0,0)
        .lineTo(width, 0)
        .moveTo(0, height)
        .lineTo(width, height)

    stage.update();
    document.body.append(canvas);
});

我有一个高度为 100 像素的图像，当根据它的角度旋转时，它需要增大大小以匹配顶部的 y 线。顶线目前是 y0，但可以是任何绳索。

Math.sin 和 Math.cos 的大小似乎出现了奇怪的跳跃，因此我不再尝试使用它们。

当图像旋转 90 度时，理论上它会增长到无限大。这种数学魔法超出了我的智力，我希望这里的聪明人能怜悯我，让我知道这个数学秘密。

【问题讨论】：

欢迎堆栈溢出。你能看看这个链接吗：stackoverflow.com/help/how-to-ask我们也需要看看你的代码。谢谢。
请给我们看一个初始图像的例子，旋转了 45 度和你想要的 90 度。
谢谢@GBouffard。我现在添加了我的代码的简化版本。我希望这会有所帮助。
@MBo 我现在添加了一个代码示例。在 90 度时，我会使用 Math.min(magicScaleFormular) 来匹配画布的宽度。我希望这是有道理的。
是的，这个比例是1/cos(angle)（角度 45 为 1,414）并且在 90 度附近变为无限大。您可以通过屏幕大小/图像大小限制 scaleY 以避免奇异性。

标签： javascript math geometry html5-canvas

【解决方案1】：

比例为1.0/cos(angle)（角度 45 为 1,414）并在 90 度附近变为无限大。

值得像这样通过最大值限制比例：（我添加了 0.3 以在 88 度查看小提琴窗口中的所有图片）

 magicScaleFormular = Math.min(0.3 * canvas.width / img.width, 
                               1 / Math.cos(angle * Math.PI / 180))

【讨论】：