Как я могу узнать, где мое повернутое изображение касается верхней линии? - PullRequest
Новая
       12

Как я могу узнать, где мое повернутое изображение касается верхней линии?

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

См. Проблему, показанную здесь: 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,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);
}

Этот вопрос связан с этим: Поиск размера повернутого изображения для соответствия верхней линии на основе угла

1 Ответ

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

Чтобы вычислить один катет треугольника, используя другой, вам нужен тангенс 

const magicXFormular = 100 * Math.tan(angle * Math.PI / 180);
...