Esse exercício do esquadro, foi o mais polêmico e com mais tópicos, pelo que vi até agora (faz falta um contador de tópicos na página para facilitar essa métrica, já fica aí uma sugestão aos devs da plataforma do curso). Reforço a crítica do colega Gabriel Misturini Reinhardt (76k4 xp, 32 posts) em https://cursos.alura.com.br/forum/topico-qual-formula-geometrica-o-professor-usou-para-chegar-a-esse-resultado-ja-estou-um-bom-tempo-pensando-nisso-e-nao-cheguei-a-uma-conclusao-alguem-pode-me-ajudar-110604 jogar números "misteriosos", sem o mínimo de explicação, como foi neste exercício fugiu à didática padrão do curso até então, causando uma confusão desnecessária e totalmente evitável, como se pôde acompanhar pelo fórum. Custava nada colocar um comentário explicativo, elucidando o raciocínio como fez o colega LUCCAS DA SILVA OLIVEIRA (24k1 xp, 2 posts), no link já referido (pfv, me ensinem a referenciar links e pessoas aqui na plataforma! Onde acho um tutorial com essas e outras formatações que funcionam aqui?). Da maneira que foi apresentada a solução, só serve para o cálculo daquele esquadro específico. Em suma, foi uma solução preguiçosa e limitada. Rodei bastante este tópico, e as soluções apresentadas pelos colegas, não fugiram desta limitação, basicamente serviam para desenhar bem ou razoavelmente o esquadro proposto, ficando bem distorcido para outros de outras dimensões. Como programadores, creio que sempre buscamos automatizar processos e definir padrões lógicos e intuitivos replicáveis. Ainda bem que fui tentar fazer meu programa antes de ver esta polêmica "solução" do instrutor.
<canvas width="600" height="500"></canvas>
<! altura aumentado para 500 para o esquadro ficar bem
enquadrado >
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'gray';
pincel.fillRect(0, 0, 600, 500);
//fundo de tela do canvas
function desenhaTexto(x, y, texto, cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font='36px Georgia';
pincel.fillStyle=cor;
pincel.fillText(texto, x, y);
}
function desenhaEsquadro(xa, ya, xc, yc, espessura, cor){
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle=cor; //corpo do esquadro
pincel.beginPath();
pincel.moveTo(xa, ya);
pincel.lineTo(xa, yc);
pincel.lineTo(xc, yc);
pincel.fill();
pincel.fillStyle="gray"; //mesma cor de fundo
pincel.beginPath();
pincel.moveTo(xa + espessura, ya + 2*espessura);
pincel.lineTo(xa + espessura, yc - espessura);
pincel.lineTo(xc - 2*espessura, yc - espessura);
pincel.fill();
desenhaTexto (xa + 10, ya + 60, 'A', 'red');
desenhaTexto (xa + 10, yc - 10, 'B', 'red');
desenhaTexto (xc - 60, yc - 10, 'C', 'red');
//empiricamente foi colocado fator 2 nos pontos A e C para adequar o esquadro; devo investigar matematicamente isto posteriormente. Percebi que fica distorcido se o esquadro for muito assimétrico
// Resolvi também desenhar localização dos pontos
}
desenhaEsquadro(50,50,400,400,50, 'black');
desenhaEsquadro(300,50,600,300,30, 'black');
//atenção na escolha das cores
</script>Basicamente criei um parâmetro para a mais, a espessura, e empiricamente, percebi que o fator 2 na espessura (vide código) "servia" para o esquadro ficar harmônico. Percebi também que para esquadros muito assimétricos, o vazamento interno fica torto. Para acumular funcionalidade, acrescentei também a indicação dos pontos. Para o código ficar verdadeiramente genérico para qualquer esquadro, os fatores tem que ser adequados, acredito que o raciocínio apresentado pelo Luccas, pode ajudar na melhor adequação desses parâmetros. Um possível melhoramento para quando aprender tratamento de erros, será também avaliar se as dimensões da espessura, são coerentes com os pontos A e C dos parâmetros e não sendo, informar ao usuário para reajuste. Aberto à sugestão dos colegas para melhoramento de código e elucidação da geometria envolvida e também para dicas de formatação pedidas.
