Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Problema ao Implementar a Paleta em formato Array

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Desenhando com o mouse com infinitas cores

por Patrick Mantovani
| 72.4k xp | 23 posts
Designer Gráfico

Boa noite, pessoal. Como estou usando um código "aprimorado" conforme os exercícios, percebi que ao tentar aplicar a Paleta de Cor por INPUT no código, usando Array de Cores, não funciona como o esperado.

Selecione uma nova cor: <input type="color">
<br>
<canvas width="600" height="400"></canvas>


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

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

    var cores = [paleta.value, 'blue', 'red', 'green'];
    var indiceCorAtual = 0;
    var raio = 10;
    var desenha = false;

    function desenhaCirculo(evento) {

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

            if (evento.shiftKey && evento.altKey) {
                alert('Só aperte uma tecla por vez, por favor.');
            } else if (evento.shiftKey && raio <= 40) {
                raio = raio + 1;
            } else if (evento.altKey && raio >= 10) {
                raio = raio - 1;
            }

            pincel.fillStyle = cores[indiceCorAtual];
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * Math.PI);
            pincel.fill();
        }
        console.log(x + ', ' + y);
    }

    /*
    tela.onclick = desenhaCirculo; // Sem (), pra não executar automaticamente. Precisa ser "Clicado" pra funcionar.
    */

    tela.onmousemove = desenhaCirculo;

    // Exemplos de Funções Anônimas:
    tela.onmousedown = function() {
        desenha = true;
    }

    tela.onmouseup = function() {
        desenha = false;
    }

    tela.oncontextmenu = function() {
        indiceCorAtual++;

        if(indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // Volta pra cor Azul.
        }

        return false; // Para não exibir o menu padrão do Canvas.
    }

</script>

Entretanto, se eu mudo essa linha:

pincel.fillStyle = cores[indiceCorAtual];

Para essa:

pincel.fillStyle = paleta.value;

Assim funciona perfeitamente na questão de poder selecionar a cor e o pincel pintar naquela cor escolhida. Mas se eu tento fazer conforme o Array no meu código acima, ele não "ativa" aquela cor escolhida e por PADRÃO, ele mantem a cor PRETA.

Alguém sabe corrigir isso? Obrigado.

1 resposta
por Andrieli Gonçalves
| 981.4k xp | 1973 posts
Alura Scuba Team Monitora Escola Semente | Fórum Ops

Oi, Patrick! Tudo bom contigo?

Peço desculpas pelo tempo que aguardou por uma resposta.

A permanência do pincel com a cor preta deve-se ao seguinte trecho de código, observe:

var cores = [paleta.value, 'blue', 'red', 'green'];
var indiceCorAtual = 0;

Quando o navegador realizou a leitura do seu código HTML, paleta.value continha a cor preta (#000000). Nesse sentido, como o Array cores está fora de qualquer função e não é atualizado durante o seu script, a cor preta continuará sendo o primeiro índice da lista — ainda que o usuário troque a cor do pincel.

O comando pincel.fillStyle = paleta.value permite a modificação da cor do pincel, pois ele se encontra dentro da função desenhaCirculo(). Toda vez que ela é chamada, atualiza-se o valor de paleta.value.

Tendo isso em mente, uma maneira interessante de resolver o problema relatado é utilizando o método addEventListener(), que irá "escutar" as mudanças no input da paleta de cores!

Abaixo trago um exemplo da utilização deste método em seu código, o qual se encontra reduzido:

var cores = [paleta.value, 'blue', 'red', 'green'];
var indiceCorAtual = 0;
var raio = 10;
var desenha = false;

paleta.addEventListener('input', function() {
    cores[0] = paleta.value;
});

function desenhaCirculo(evento) {
    // código ocultado
}

Agora, sempre que o usuário alterar a cor de seu pincel, o método addEventListener() irá notar que o valor do input foi substituído e, consequentemente, executará uma função que modifica o primeiro valor do nosso Array cores (cujo índice é 0).

Patrick, espero ter ajudado! Qualquer dúvida, estarei por aqui.

Um abraço.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!