Entrar Ainda não tem acesso?
1
resposta

DESAFIO FINAL - porém surgiu uma dúvida na minha resposta

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Nosso primeiro jogo e atividade Desenhe obras de arte

por Cyro Escobar Ribeiro Neto
| 41.8k xp | 26 posts

Olá a todos, eu consegui fazer a solução porém houve uma particularidade que eu não consegui resolver.

Eu consigo selecionar a cor desde que eu "esfregue o mouse" na cor, se eu apenas clicar não funciona, tenho de clicar e mover o mouse pela cor para que ele selecione a cor. Alguém saberia me explicar o porquê? Estou há uma hora e não consigo entender o porquê desse comportamento.

Obrigado a todos

Desenhe obras de arte

<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 * Math.PI);
        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) 
            &&(x => xVermelho)
            &&(y=>0)
            &&(x< 50) 
            &&(y<= tamanhoQuadrados)){

            corAtual = 'red';
            desabilitaDesenhar();
        }

        // verificar se clicou na cor verde

            if ((desenha) 
            &&(x => xVerde)
            &&(x <xAzul) 
            &&(y =>0)
            && (y<=tamanhoQuadrados))

            {
               corAtual = 'green';
            desabilitaDesenhar();

        }

        // verificar se clicou na cor Azul
          if ((desenha) &&(x => xAzul)&& (x < xAzul+50) && (y =>0)&&(y<=tamanhoQuadrados)){

            corAtual = 'blue';
            desabilitaDesenhar();
        }

        if(desenha) {

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

    }

    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 = '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;


</script>
1 resposta
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Cyro

A ação de mudar a cor que o professor criou está utilizando o onclick e tem uma função separada pra isso.

Mas para implementar na sua solução você precisa chamar a função que tem a lógica da mudança da cor no onmousedown, assim: 

 function habilitaDesenhar(evento) {
    desenha = true;
    lidaComMovimentoDoMouse(evento);
 }

Aqui está o código completo:

Desenhe obras de arte

<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 * Math.PI);
    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 &&
      ((x) => xVermelho) &&
      ((y) => 0) &&
      x < 50 &&
      y <= tamanhoQuadrados
    ) {
      corAtual = 'red';
      desabilitaDesenhar();
    }

    // verificar se clicou na cor verde

    if (
      desenha &&
      ((x) => xVerde) &&
      x < xAzul &&
      ((y) => 0) &&
      y <= tamanhoQuadrados
    ) {
      corAtual = 'green';
      desabilitaDesenhar();
    }

    // verificar se clicou na cor Azul
    if (
      desenha &&
      ((x) => xAzul) &&
      x < xAzul + 50 &&
      ((y) => 0) &&
      y <= tamanhoQuadrados
    ) {
      corAtual = 'blue';
      desabilitaDesenhar();
    }

    if (desenha) {
      desenhaCirculo(x, y, 5, corAtual);
    }
  }

  function habilitaDesenhar(evento) {
    desenha = true;
    lidaComMovimentoDoMouse(evento);
  }

  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 = '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;
</script>