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

Isolar função do SHIFT e ALT da MUDANÇA DE COR

Bom dia pessoal.

Nesse script que eu fiz com o que foi aprendido até o momento, gostaria de saber se existe uma maneira de que, quando o usuário apertar as tecla SHIFT + botão direito do mouse ou ALT + botão direito do mouse, o pincel mude de tamanho mais não de cor, que é o que está acontecendo no momento. A mudança de cor deve acontecer somente quando nenhuma das duas teclas for acionada. Será que tem como ? Obrigado !

<meta charset="UTF-8">

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

<script>

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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 750, 400);
    pincel.strokeStyle='black';
    pincel.strokeRect(0,0,750,400);

    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);
    pincel.strokeStyle='black';
    pincel.strokeRect(0,0,600,400);

    var cores = ['blue', 'red', 'green','yellow','orange']
    var indiceCorAtual = 0; // começa com blue
    var raio = 6;
    var incremento = 2;

    function desenhaPincel() {

        var xi = 675
        var yi = 90

        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(xi, yi, raio, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaTexto(texto, x , y) {

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

        pincel.font='15px Georgia';
        pincel.fillStyle='white';
        pincel.fillText(texto, x, y);    

    }

    function opcoesCores(x,y,cor) {

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

    }

    function desenhaMostrador() {

        desenhaTexto("Cor Selecionada", 625, 30);
        desenhaTexto("Botão direito",633,170);
        desenhaTexto("Alterna cor",638,190);

        //Loop para desenhar cores no mostrador

        var x = 635
        i = 0

        for(var repeticoes = 0; repeticoes < cores.length; repeticoes++) {

            opcoesCores(x,210,cores[i]);
            x = x + 20;
            i++;

        }

        desenhaTexto("Shift + Botão direito", 610,240);
        desenhaTexto("Aumenta o pincel",620,260);
        desenhaTexto("Alt + Botão direito", 615,300);
        desenhaTexto("Diminui o pincel",620,320);
        desenhaTexto("Botão Esquerdo",625,360);
        desenhaTexto("Desenha na tela",625,380);

        desenhaPincel();

    }

    desenhaMostrador();

    function definePincel(evento) {

        desenha = false;

        indiceCorAtual++;

        if(indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // volta para a primeira cor, azul

        }

        if (evento.shiftKey && evento.altKey) {
                alert('Só aperte uma tecla por vez, por favor!');

        } else if(evento.shiftKey && raio + incremento <= 20) {
                raio = raio + incremento;

        } else if(evento.altKey && raio - incremento >= 2) {
                raio = raio - incremento;

        }

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

        desenhaMostrador();

        return false; // para não exibir o menu padrão do canvas

    }

    tela.oncontextmenu = definePincel;

    desenha = false;

    function desenhaCirculo(evento) {

        if(desenha) {

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

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

    tela.oncontextmenu = definePincel;

    }

    }

function ativaDesenha() {

    desenha = true;

}

function desativaDesenha() {

    desenha = false;

}

function botaoEsquerdo() {

    tela.onmousemove = desenhaCirculo;

}


tela.onmousedown = ativaDesenha;
tela.onmouseup = desativaDesenha;

tela.onclick = botaoEsquerdo;  

</script>
2 respostas
solução!

Olá Rodrigo,

o problema está na função definePincel, que é executado quando o usuário interage com a tela:

function definePincel(evento) {

        desenha = false;

        indiceCorAtual++;

        if(indiceCorAtual >= cores.length) {
                indiceCorAtual = 0; // volta para a primeira cor, azul
        }

        if (evento.shiftKey && evento.altKey) {
                alert('Só aperte uma tecla por vez, por favor!');

        } else if(evento.shiftKey && raio + incremento <= 20) {
                raio = raio + incremento;

        } else if(evento.altKey && raio - incremento >= 2) {
                raio = raio - incremento;

        }

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

        desenhaMostrador();

        return false; // para não exibir o menu padrão do canvas

}

Note que sempre, independente da situação se clicou ou não em alguma tecla, ele sempre atualiza o índice da cor:

        indiceCorAtual++;

        if(indiceCorAtual >= cores.length) {
                indiceCorAtual = 0; // volta para a primeira cor, azul
        }

Para fazer o comportamento que você deseja, precisa adicionar uma condição/if em que este código só será executado caso o usuário não tenha clicado nem no SHIFT e nem no ALT.

Funcionou amigo ! ( Não sei se consegui da melhor maneira...rs ).

Muito Obrigado !!!