Нахождение размера повернутого изображения для соответствия верхней линии на основе угла - PullRequest
Новая
       16

Нахождение размера повернутого изображения для соответствия верхней линии на основе угла

1 голос
/ 06 ноября 2019

(иллюстрация для справки: 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);
});

У меня есть изображение высотой 100px, которое должно увеличиться в размере, чтобы соответствовать верхнему y-линии при повороте на угол. Верхняя линия в настоящее время y0, но может быть любым шнуром.

Math.sin и Math.cos, кажется, делают странный скачок в размере, поэтому я перестал пытатьсяиспользовать их для этого.

Когда изображение повернуто на 90 градусов, оно теоретически вырастет до бесконечного размера. Этот вид математического волшебства выходит за рамки моих умственных способностей, и я надеюсь, что кто-то умнее здесьпокажет мне милость и откроет мне этот математический секрет.

1 Ответ

0 голосов
/ 06 ноября 2019

Масштаб 1.0/cos(angle) (1414 для угла 45) и становится бесконечным около 90 градусов.

Стоит ограничить масштаб максимальным значением следующим образом: (я добавил 0,3, чтобы увидеть всю картинку в окне скрипки при 88 градусах) 

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