Finding size of rotated image to match top-line based on angle

问题

(illustration for reference: https://i.stack.imgur.com/Wsge0.png)

Code example 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);
});

I have an image of 100px height, that needs to grow in size to match a top y-line when being rotated based on it's angle. The top line is currently y0, but could be any cord.

Math.sin and Math.cos seems to make a strange jump in size, so I have stopped trying to use them for this.

When the image is rotated 90 degrees, it would, in theory, grow to an infinite size. This kind of math wizardry goes beyond my mental capacity, and I hope someone smarter in here will show me mercy and let me in on this math secret.

回答1:

Scale is 1.0/cos(angle) (1,414 for angle 45) and becomes infinite near 90 degrees.

It is worth to limit scale by max value like this: (I added 0.3 to see all picture in the fiddle window at 88 degrees)

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

来源：https://stackoverflow.com/questions/58720069/finding-size-of-rotated-image-to-match-top-line-based-on-angle