查看此处显示的问题：https://i.stack.imgur.com/fuy8c.png

我有一个根据角度旋转的图像，并拉伸以匹配底线和顶线。 我的问题是：如何找到图像触及顶行的X。

JsFiddle与示例http://jsfiddle.net/waaentz/htrqdwjp/43/

X是在第28行上计算的（错误的）

let angle = 0; // Is dynamic

const width = 500;
const height = 100;
const padding = 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 point = new createjs.Shape();

// Update angle each 30ms
setInterval(()=>{
  if (angle++ > 90) angle = 0;
  draw();
},30)

// Draw when image is loaded (arrow image)
img.src = getBase64();
img.addEventListener("load",()=>{
    draw();
});

// Draw function
function draw(){
  const magicScaleFormular = 1 / Math.cos(angle * Math.PI / 180) 
  const magicXFormular = width - (width / magicScaleFormular); // <-- X formular

    stage.y = padding;
    stage.addChild(baseGrid,bitmap,point);
    Object.assign(canvas,{width,height: height + (padding * 2)});

    bitmap.regX = (img.width / 2);
    bitmap.regY = img.height;
    bitmap.y = height;
    bitmap.rotation = angle;
    bitmap.scaleY = magicScaleFormular; 

  point.graphics.clear()
    .beginFill("red")
    .drawCircle(0,10);

  point.x = magicXFormular;

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

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

这个问题与此有关：Finding size of rotated image to match top-line based on angle