Dúvida Lógica de Programação II | Aula 08

Opa Marcelo, tudo bem?

Confesso que me bati entender o que estava acontecendo rsrs espero que minha explicação fique clara.

O problema está na chamada da função desenhaPaletaDeCores() dentro da função trocaCor(), note que ao final do seu código você já havia chamado a função que habilita as paletas de cores.

Quando abrimos pela primeira vez o código no navegador, ocorre a primeira chamada da função desenhaPaletaDeCores(), pois a mesma está fora de qualquer função ao fim do código (este é o correto), porém quando clicamos sobre o canva a instrução tela.onclick = trocaCor; é executada, no qual é feito a chamada da função trocaCor(), que por sua vez, novamente chama a função desenhaPaletaDeCores(), ou seja, ele está criando uma paleta de cor a cada clique, não é possível visualizar por que uma é criada sobre a outra.

Isto também está ligado ao fato da cor do pincel ficar azul ao final do desenho, a função desenhaPaletaDeCores() por sua vez, faz a chamada da função desenhaQuadrado(x, y, tamanho, cor) passando estes parametros, então ela irá desenhar a paleta de cores novamente, porém a ultima linha de parametros passado foi esta:

desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

A função desenhaQuadrado tem estas duas instruções mostrada abaixo e ela recebe o parametro "cor" por último como "blue" :

pincel.fillStyle = cor;
pincel.fill();

pincel.fillStyle -> Atribuir uma cor ao pincel; pincel.fill() -> preencher o espaço com as informações anteriores.

Desta forma, ele atribui a cor "blue" ao pincel e preenche nosso circulo desta cor, por isso ao final do movimento ela fica azul.

Para solucionar basta retirar a função desenhaPaletaDeCores() de dentro da função trocaCor(), pois só precisamos exibir uma vez as palestas de cores e logo na primeira vez que for carregado o programa.

Espero ter ajudado e lhe te respondido de forma clara ;).

Caso queira visualizar a criação das paletas a cada clique, teste o código desta forma:

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>

    function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaPaletaDeCores(x, y) {

        desenhaQuadrado(x, y, tamanhoQuadrados, 'red');
        desenhaQuadrado(x + 50, y, tamanhoQuadrados, 'green');
        desenhaQuadrado(x + 100, y, tamanhoQuadrados, 'blue');

    }

    function lidaComMovimentoDoMouse(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if(desenha) {

            desenhaCirculo(x, y, 5, corAtual);
        }
    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    function trocaCor(evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if(x < 50 && y < tamanhoQuadrados){

            corAtual = "red";
        }

        if(x > 50 && x < 100 && y < tamanhoQuadrados){

            corAtual = "green";
        }

        if(x > 100 && y < tamanhoQuadrados){

            corAtual = "blue";
        }

        desenhaPaletaDeCores(x, y);
    }


    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;
    var corAtual = "blue";
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

    tela.onmousemove = lidaComMovimentoDoMouse;
    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;
    tela.onclick = trocaCor;

</script>

Entendi, obrigado!

Eu tinha feito daquela forma para redesenhar a paleta de cores "a todo custo" a cada pincelada e não permitir que o usuário fosse desenhar por cima dela. Claro, é uma solução meio gambiarra mas foi uma forma que de primeiro momento eu encontrei.

Vi também que no código do professor ele criou uma variável que permitia ou não que desenhasse por cima. De toda forma, testando o código acima, ele acaba desenhando a paleta de cores no final do traçado soltando o clique do mouse hehehehe

A ideia é só que a bolinha azul no final de cada traçado não apareça.

A entendi, excelente intenção, se quiser dar uma olhada, o meu ficou assim no final:

<meta charset="utf-8">

<canvas width="600" height="400"></canvas>

<script type="text/javascript">

    function desenhaQuadrado(x, y, tamanho, cor) {
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*Math.PI);
        pincel.fill();
    }

    function desenhaPaletaDeCores(){
        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
        desenhaQuadrado(xLaranja, yQuadrados, tamanhoQuadrados, 'orange');
    }

    function lidaComMovimentoDoMouse(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if (x >= 0 && x <= 204 && y >= 0 && y <= 54) {
            desabilitaDesenhar();
        } else if (desenha){
            desenhaCirculo(x, y, 5, corAtual);
        }
    }

    function trocaCor(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

         if (x < 50 && y < 50) {
            corAtual = 'red';
        } else if (x > 50 && x < 100 && y < 50){
            corAtual = 'green'; 
        } else if (x > 100 && x <= 150 && y < 50) {
            corAtual = 'blue';
        } else if (x > 150 && x <= 200 && y < 50) {
            corAtual = 'orange';
        }
    }

    function habilitaDesenhar(){
        desenha = true;
    }

    function desabilitaDesenhar() {
        desenha = false
    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;
    var corAtual = 'black';
    var xVermelho = 0;
    var xVerde = 50;
    var xAzul = 100;
    var xLaranja = 150;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores();

    tela.onmousemove = lidaComMovimentoDoMouse;
    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;
    tela.onclick = trocaCor;

</script>

Opa!

Acho que o que acabou resolvendo mesmo foi a criação de uma área bloqueável, pois a "rechamada" da desenhaPaletaDeCores acabava acionando novamente o desenha círculo, por algum motivo.

Valeu!