Realizar as alterações usando função | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Renan Lino Cunha

| 107k xp | 2 posts

Pessoal, surgiu uma dúvida que não consegui sanar. Consegui resolver o exercício usando if's diretamente na função principal desenhaCirculo. Tentei replicar o comportamento usando uma nova função sendo chamada dentro da função principal, mas não consegui êxito. Como conseguiria reaproveitar esse código numa função externa?

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

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

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

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

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

    console.log("Posição do click foi: " + x + "," + y);
  }

  function alteraTamanho(raio) {
    if (event.shiftKey && (raio <= 40)) {
      raio = raio + 10;
    }
    if (event.ctrlKey && (raio > 5)) {
      raio = raio - 5;
    }
      return raio;
  }

  tela.onclick = desenhaCirculo;
</script>

2 respostas

solução!

por Wanderson Macêdo

| 3966.1k xp | 8086 posts

Instrutor Desenvolvedor

02/08/2018

Oi Renan, estou na dúvida se vale mesmo a pena fazer essa extração. É apenas um pequeno if. Remover ele da função de desenho do círculo pode complicar ainda mais o código. Prefira a simplicidade.

por Wanderson Macêdo

| 3966.1k xp | 8086 posts

Instrutor Desenvolvedor

02/08/2018

Por curiosidade, eu dei uma alterada no seu código pra ver se é isso que quer. Veja que eu preciso calcular o tamanho do raio antes.

Como o raio é uma propriedade do círculo, eu deixei a variável dentro da função e criei outra que será o raio base de onde as contas para maior ou menor serão feitas.

Mudei o nome da função pra refletir melhor a função dela.

Dá uma olhada...

  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  var raioBase = 10;

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

  function desenhaCirculo (evento) {
    var raio = defineTamanho(raioBase, evento);
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

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

    console.log("Posição do click foi: " + x + "," + y);
  }

  function defineTamanho(raio, event) {
    if (event.shiftKey && (raio <= 40)) {
      raio = raio + 10;
    } if (event.ctrlKey && (raio > 5)) {
      raio = raio - 5;
    }
      return raio;
  }

  tela.onclick = desenhaCirculo;