1
resposta

Consigo desenhar porém não consigo mais fazer "pontos"

Fiz o exercício porém não consegui mais fazer "pontos" quando fica com o cursor do mouse parado e aperta o botão. O programa agora só consegue desenhar quando o mouse está em movimento por menor que seja mas parado não sai o desenho do círculo. Como faço?

<meta charset="utf-8">

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

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

    var cores = ['blue', 'red', 'green'];
    var indiceCorAtual = 0; // começa com blue    

    var raio = 10;

    var desenha =false;

    function exibeCirculo(clique){// o evento é o clique do mouse

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

        if (desenha){

            pincel.fillStyle = cores[indiceCorAtual];
            pincel.beginPath();
            pincel.arc(x , y, raio ,0 , 2*3.14);
            pincel.fill();
            tamanhoCirculo(clique);
        }

    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

      function desenhaPonto() {
          desenha = true;
      }

    function mudaCor(){

        indiceCorAtual ++;

        if (indiceCorAtual>=cores.length){
            indiceCorAtual=0;
        }
        alert(cores[indiceCorAtual]);
        return false;

    }

    function tamanhoCirculo(evento){
        if (evento.shiftKey && raio<=30){
            //alert('Você apertou o shift');
            raio = raio+10;
        }
        else if(evento.altKey && raio>=15){
            raio=raio -5;
        }
    }


    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onclick = desenhaPonto;

    tela.onmousemove = exibeCirculo;

    tela.onclick = exibeCirculo;// O "evento" é o clique do mouse
    tela.oncontextmenu=mudaCor; // "oncontextmenu" usa o botão direito do mouse


</script>



1 resposta

Olá José, tudo bem com você?

Então isso acontece porque não podemos ter mais do que uma função associada ao clique do mesmo elemento, veja:

tela.onclick = desenhaPonto;
tela.onclick = exibeCirculo;// O "evento" é o clique do mouse

Da maneira que você colocou quando clicarmos na tela só será executado a função de exibe círculo, entretanto quando paramos de desenhar é executado uma função para deixar desenha como false, dessa forma você está clicando e executando a função, entretanto não entra dentro do if para desenhar, além desse problema temos que a função desenhaPonto é completamente ignorada

Para corrigir podemos modificar algumas coisas:

  1. Vamos tirar o evento de clique do exibeCirculo

tela.onclick = exibeCirculo;// O "evento" é o clique do mouse

Vamos deixar o evento principal para ser o desenhaPonto, e por isso precisamos modificar algumas coisas:

      function desenhaPonto() {
          desenha = true;
      }

Antes ele apenas modificava o atributo de desenha para verdadeiro, o que eu pretendo fazer é chamar a função de exibir circulo :)

      function desenhaPonto(clique) {
        desenha = true;
        exibeCirculo(clique)
        desenha = false;
      }

Veja que eu não fiz nada de mais, habilito o desenho passo os dados que eu recebi do clique para a nossa função, e após terminar eu volto desenha para false para evitar problemas :)

E no final ficamos com esses eventos:

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onmousemove = exibeCirculo;

    tela.onclick = desenhaPonto;
    tela.oncontextmenu=mudaCor;

Compreendeu? Qualquer coisa estou a disposição!

Abraços e Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software