Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Consegui, mas estou com uma dúvida violenta sobre o eventos do mouse

Olá! bom dia!!!!

Seguinte, eu quis fazer uma gracinha e criei uma função chamada limpaTudo que é acionada quando clico com o botão direito do mouse na tela. Essa função redesenha o fundo cinza e a paleta em cima de tudo, deixando zeradinho para rabiscar mais.

Poréeeem,

Percebi que o evento onmousedown ou o onmousemove (aí vocês me digam qual é, pois não sei qual está causando isso) é acionado com qualquer botão, o direito aciona, o esquerdo e até o scroll.

Quando eu clico com o botão direito do mouse na tela, ela limpa, porém um círculo é deixado para trás na tela. O último círculo que foi desenhado antes de limpar a tela, fica. E detalhe, não importa a cor que eu estava usando, esse último círculo permanece na tela e fica azul AHUahuaHUahuhUAahuhuAHUa

Aproveitando, uma outra dúvida, rapidão XD

Essa função limpaTudo, como disse, foi associada ao evento de click oncontextmenu. Quando criei essa função, fiz tanto ela sem parâmetro, quanto usando o parâmetro evento igual as demais funções associadas a uma ação, porém, das duas maneiras funcionou certinho.

Alguem ajuda ai? hehe

Vou deixar meu código e também uns prints do que acontece alí na primeira dúvida:

Código:

<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();      
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, tamanho, tamanho); //desenha a borda a área informada
    }

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

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

    }

    function desenhaPaletaDeCores() {

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

    }

    function lidaComMovimentoDoMouse(evento) {

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

        if(desenha) {

            if ((x <= 150) && (y <= tamanhoQuadrados + 2)) {


            } else {

                desenhaCirculo(x, y, 5, corAtual);

            }

        }
    }


    function limpaTudo(evento) {

        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
        desenhaPaletaDeCores();

        return false;

    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    function selecionaCor(evento) {

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

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

            corAtual = 'red';

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

            corAtual = 'green';

        } else if ((x > 100) && (x < 150) && (y <= tamanhoQuadrados)) {

            corAtual = 'blue';
        }        

    }


    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    limpaTudo();
    //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 = selecionaCor;

    tela.oncontextmenu = limpaTudo; //redesenha o fundo cinza e a paleta de cores

</script>

Abaixo, um rabisco na minha tela com a cor verde. Importante dizer que esse rabisco começou a ser feito na esquerda e terminou na direita:

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Agora que vocês viram onde foi o último círculo desenhado, vou clicar com o botão direito do mouse na tela para limpá-la e o resultado será esse:

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Óia lá que belezinha kkkk Aquele último círculo que era verde, não limpou e voltou pra cor "standard" qe era azul kkkk

Me ajuda aí gente, por favooor!

3 respostas

up up

solução!

Oi Guilherme

Na função desenhaQuadrado você não precisa de utilizar o pincel.fill(); depois de criar o quadrado com o fillRect.

Pode ficar só assim:

function desenhaQuadrado(x, y, tamanho, cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho); // aqui ele já desenha o quadrado
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, tamanho, tamanho);
  }

Outro detalhe importante também é sobre o beginPath, quando iniciá-lo garanta que irá fechá-lo, assim por exemplo:

function desenhaQuadrado(x, y, tamanho, cor) {
    pincel.beginPath();
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho);
    pincel.fill();
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, tamanho, tamanho); 
    pincel.closePath();
  }

Se fizer assim não precisará retirar o pincel.fill();

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

Heey Guilherme!

Resolveu minha vida aqui! Muito obrigado mesmo pelo seu tempo =D