Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Fiz cálculos de proporção. Teria um jeito mais fácil ou organizado de ser feito?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Esquadro #2

por Mathaus Cainã Vasconcelos Guimarães
| 95.6k xp | 11 posts

Na primeira vez ue fiz a função, ao colocar os pontos Xa e Ya como "0, 0" o esquadro era desfeito. então fiz uma proporção das distâncias dos pontos.

<meta charset="utf-8">

<canvas width="1000" height="900"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    function desenhaEsquadro(Xa, Ya, Xc, Yc, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(Xa, Ya);
        pincel.lineTo(Xa, Yc);
        pincel.lineTo(Xc, Yc);
        pincel.fill();

        //tive que fazer várias operações matemáticas de proporção pra manter o esquadro no mesmo formato e podendo começar do ponto 0.

        pincel.fillStyle = "white";
        pincel.beginPath();
                                   //xa                      ya
        pincel.moveTo(Xa + (0.14286 * (Xc - Xa)), Ya + (0.35714 * (Yc - Ya)));
                                  //xa                       yc  
        pincel.lineTo(Xa + (0.14286 * (Xc - Xa)), Yc - (0.14286 * (Yc - Ya)));
                                  //xc                       yc  
        pincel.lineTo(Xc - (0.35714 * (Xc - Xa)), Yc - (0.14286 * (Yc - Ya)));
        pincel.fill();
    }

    desenhaEsquadro(50, 50, 400, 400, 'black');

</script>

Existiria um jeito mais simples ou mais organizado de fazer essa função?

1 resposta
solução!
por Gabriel Leite
| 3484k xp | 5398 posts
Instrutor

Boa tarde, Mathaus! Como vai?

Não tem escapatória, vc terá que fazer isso aí mesmo! Mas pra deixar o código mais legível eu indicaria vc extrair para uma variável os valores constantes 0.14286 e 0.35714 além de tbm colocar numa variável o cálculo da diferença entre as coordenadas Xc - Xa e Yc - Ya.

Poderia ser algo assim:

var deltaX = Xc - Xa;
var deltaY = Yc - Ya;
var constLado1 = 0.14286;
var constLado2 = 0.35714;

pincel.moveTo(Xa + (constLado1 * deltaX), Ya + (constLado2 * deltaY));
pincel.lineTo(Xa + (constLado1 * deltaX), Yc - (constLado1 * deltaY));
pincel.lineTo(Xc - (constLado2 * deltaX), Yc - (constLado1 * deltaY));

Claro que os nomes poderiam mudar de acordo com o que vc achar melhor.

Além disso, repare que as expressões constLado1 * deltaX e constLado1 * deltaY se repetem, então vc tbm poderia transformar elas numa variável.

Grande abraço e bons estudos!