Entrar Ainda não tem acesso?
3
respostas

Dúvidas a respeito da aula sobre esquadro 2

por João Guilherme Montemor de Castro Galhardo
| 62.6k xp | 6 posts
<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();

        pincel.fillStyle = 'white'
        pincel.beginPath();
        pincel.moveTo((6*xa + xc)/7, (9*ya + 5*yc)/14);
        pincel.lineTo((6*xa + xc)/7, (ya + 6*yc)/7);
        pincel.lineTo((5*xa + 9*xc)/14, (ya + 6*yc)/7);
        pincel.fill();

}

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

</script>

Pessoal estou tendo dúvidas para entender o que é essa xa+ xc, etc... Não entendi oq são essas combinações e multiplicações alguém poderia me explicar esse código todo por favor, na aula não possui nada explicando isso

3 respostas
por Raul Fernandes
| 161.1k xp | 14 posts
Desenvolvedor de Software

Opa João, tudo certo?

Então, esses 'xa', 'ya', 'xc' e 'yc' são apenas parâmetros em X e Y que foram colocados na função 'desenhaEsquadro()' para saber as posições da tela que serão utilizadas para desenhar a figura em questão, que nesse caso é um esquadro. E só será um esquadro porque ele usa esses parâmetros nas funções 'moveTo()' e 'lineTo()' que vem depois do jeito que precisa pra desenhar isso.

Ali onde vc viu que tem algumas operações de soma, multiplicação, divisão foi feito um cálculo específico para utilizar essas posições em X e Y que foram passadas e desenhar certinho o que ele queria. (Se o cálculo tivesse sido feito de outro jeito, poderia desenhar outra coisa).

pincel.moveTo(xa, ya);
pincel.lineTo(xa, yc);

Aqui, ontem tem 'pincel.moveTo(?, ?)' e 'pincel.lineTo(?, ?)' as funções precisam de um valor de X e de Y pra saber onde mover o pincel e onde desenhar a linha, respectivamente.

pincel.moveTo((6*xa + xc)/7, (9*ya + 5*yc)/14);
pincel.lineTo((6*xa + xc)/7, (ya + 6*yc)/7);
pincel.lineTo((5*xa + 9*xc)/14, (ya + 6*yc)/7);

Aqui é a mesma coisa só que, nos valores de X e de Y, o cara que fez o código usou um cálculo que ele já sabia qual deveria ser pra que o resultado final acabe desenhando a figura de um esquadro, que era o objetivo nesse caso.

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

Tanto que, se você mudar os valores passados aqui vai ver que o desenho muda, porque altera os valores no cálculo. Tipo: 

desenhaEsquadro(400, 0, 50, 50, 'black');
por João Guilherme Montemor de Castro Galhardo
| 62.6k xp | 6 posts

Obrigado pela explicação! Consegui entender o que eram esses x e y e as contas do cara, só me resta agora a dúvida de saber como ele sabia quais números deveriam ser utilizados na multiplicação

Está segunda parte de lógica de programação anda me dando uma baita dor de cabeça, principalmente com essas coisas de coordenadas, já que o instrutor não ensina como podemos ver as coordenadas do site pra saber onde colocar cada coisa

por Raul Fernandes
| 161.1k xp | 14 posts
Desenvolvedor de Software

Ah, essa parte de coordenadas acaba sendo um pouco confuso mesmo porque é diferente do que estamos acostumados, no canvas o eixo Y acaba sendo invertido e "cresce" com valores negativos, como mostra essa imagem: https://bit.ly/3jFD1IQ

Mas só tem esse conhecimento gravado na cabeça quem está habituado a utilizar isso sempre, talvez o instrutor nem soubesse exatamente os números necessários e precisou pesquisar qual o cálculo deveria usar para esse exemplo (o que é bem comum).

Acho que mais importante é focar na lógica usada para programar mesmo (variáveis, funções, parâmetros, etc), essas coisas mais específicas assim sempre dá pra pesquisar quando a gente precisa utilizar :)