xa = 50 ya = 50 xc = 400 yc = 400
valores a cima são um exemplo
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);
xa = 50 ya = 50 xc = 400 yc = 400
valores a cima são um exemplo
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);
Fala, Eduardo! Tudo bom contigo?
Vamos lá ;-)
Podemos deixar o código com os valores estabelecidos
pincel.fillStyle="black";
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(50, 400);
pincel.lineTo(400, 400);
pincel.fill();
pincel.fillStyle="white";
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.lineTo(100, 350);
pincel.lineTo(275, 350);
pincel.fill();
Ou podemos criar uma função para que possa inserir esses valores sem ter que mexer em muitas linhas de código
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');
Até aí, tudo bem!!!
Vamos nos focar nessa segunda opção.
Quando chamo a função
desenhaEsquadro(50, 50, 400, 400, 'black');
estou dizendo que vou iniciar meu desenho na posição x=50
e x=400
na posição horizontal e y=50
com y=400
na posição vertical. Por fim, digo a cor desse esquadro.
Agora vou desenhar o esquadro interno, porém utilizando as mesmas medidas que informei nos parâmetros da função com as adaptações que estipulei. Não preciso ir dentro do código e inserir dado por dado.
pincel.moveTo((6*xa + xc)/7, (9*ya + 5*yc)/14);
Aqui eu posiciono o pincel
x=50
, somo com meu outro x=400
e divido por 7 resultando em 100. O mesmo com o segundo bloco resultando em 175. E assim faço com os demais pincel.lineTo((6*xa + xc)/7, (ya + 6*yc)/7);
pincel.lineTo((5*xa + 9*xc)/14, (ya + 6*yc)/7);
Perceba que o resultado desses valores são os mesmos do inicio do exercício
pincel.fillStyle="white";
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.lineTo(100, 350);
pincel.lineTo(275, 350);
pincel.fill();
A diferença, e o que evita de ter o re-trabalho de ficar alterando o código, é a criação dessa função, pois você estipula os valores no início da função uma única vez e deixa que esses valores construam os dois esquadros de uma única vez.
Espero ter esclarecido, Eduardo!
Um abraço e bons estudos
Isso eu entendi, o que eu quero saber como ele chegou nesses valores fixo, como o ("6"xa + xc )/"7" ou "6"400. Como ele chegou a conclusão de por esses valores fixos no cálculo.
Essa forma que foi colocada no exercício ficou bem diferente mesmo, eu entendi que criou um padrão e tal, usando um pouco mais de cálculos para chegar nesses resultados. Bem estranho ahahah surgir isso do nada sem mostrar de onde saiu, não condiz com a a didática do curso, no meu ponto de vista. Vida que segue.
Dá uma olhada na forma que este colega montou, eu montei de um jeito bem parecido, e alterando os valores de x ou y, não achei mudança extremamente significativa na escala do desenho.
https://cursos.alura.com.br/forum/topico-montar-o-esquadro-chamando-a-funcao-uma-unica-vez-107621
vou dar uma pesquisada sobre cálculos geométricos em plano cartesiano, e vê se acho algum padrão para posicionar as coordenadas X,Y na tela,
Olá pessoal!
Segue minha avaliação de como o professor deve ter chegado a esta formatação do código.
Vou escrever com letras MAIÚSCULAS para o triângulo preto e com letras minúsculas para o triângulo branco.
Vamos avaliar o eixo "x" do ponto "a". Para os demais, o raciocício é o mesmo.
Xa = 50
Xc = 400
No exemplo dado, temos o triângulo branco posicionado em xa = 100
A Largura do triângulo preto será:
L = Xc - Xa
L = 350
E o ponto "a" do triângulo banco está a uma distância horizontal de xa - Xa = 50
Ou seja, está a 1/7 de distância em relação à largura do triângulo preto.
d = (xa - Xa)/(Xc - Xa)
d = 50 / 350
d = 1/7
Dessa forma, podemos calcular a posição de xa a partir de Xa e Xc. Ficaria assim:
d = (xa - Xa) / (Xc - Xa)
(xa - Xa) = (Xc - Xa)*d
xa = Xa + (Xc - Xa)*d
xa = Xa + (Xc - Xa) * (1/ 7)
xa = Xa + (Xc - Xa) / 7
Fatorando:
xa = (7*Xa + Xc - Xa)/7
Que finalmente resulta em:
xa = (6*Xa + Xc)/7