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

Combinando exercícios

Pessoal, estou combinando dois exercícios e tentando fazer o desenho com o mouse junto com a variação do tamanho da bolinha, como se fosse aumentar ou diminuir o pincel.

Porém, quando pressiono Shift, a bolinha automaticamente ganha o maior tamanho e quando pressiono Alt ela volta para o mínimo. Não está havendo o incremento gradual.

Alguém pode me sinalizar o que estou fazendo de errado?

Obrigado!

<meta charset="UTF-8">

<title>MÓDULO II - EXERCÍCIO DESENHANDO COM O MOUSE</title>

<canvas width="1200" height="800"></canvas>
<br>
Escolha uma cor: <input type="color">

<script type="text/javascript">
    var tela = document.querySelector ("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle="lightgrey";
    pincel.fillRect(0, 0, 1200, 800);

    var raio = 10;
    var incremento = 5;
    var desenha = false;
    var paleta = document.querySelector("input");

    tela.onmousemove = function (evento) {

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

        if (evento.shiftKey && evento.altKey) {
        alert("Atenção! Pressione apenas uma tecla!");

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

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

        if (desenha) {
        pincel.fillStyle=paleta.value;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
        }

        console.log (x + " , " + y);
    }

    tela.onmousedown = function () {
        desenha = true;
    }

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

</script>
2 respostas
solução!

Olá amigo, boa noite. Para resolver essa situação você poderia criar uma nova função apenas para aumentar e diminuir o tamanho do seu pincel. Pois, da forma que está, uma vez que você pressiona o shift ou o alt, a cada movimento do mouse o seu raio é incrementado.

Se você criar uma nova função para gerenciar o aumento e diminuição do raio (pincel), tal ação só ocorrerá se a tecla especificada (no caso, shift ou alt) for pressionada. Com isso, seu código passaria para a seguinte forma:

<meta charset="UTF-8">

<title>MÓDULO II - EXERCÍCIO DESENHANDO COM O MOUSE</title>

<canvas width="1200" height="800"></canvas>
<br>
Escolha uma cor: <input type="color">

<script type="text/javascript">
    var tela = document.querySelector ("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle="lightgrey";
    pincel.fillRect(0, 0, 1200, 800);

    var raio = 10;
    var incremento = 3;
    var desenha = false;
    var paleta = document.querySelector("input");

//Nova função para detectar tecla pressionada
    document.onkeydown = function (evento) {
        if (evento.shiftKey && evento.altKey) {
            alert("Atenção! Pressione apenas uma tecla!");
        } else if (evento.shiftKey && raio + incremento <= 40) {
            raio += incremento;
        } else if (evento.altKey && raio - incremento >= 10) {
            raio -= incremento;
        }
    }

    tela.onmousemove = function (evento) {

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

        if (desenha) {
            pincel.fillStyle=paleta.value;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * Math.PI);
            pincel.fill();
        }

        console.log (x + " , " + y);
    }

    tela.onmousedown = function () {
        desenha = true;
    }

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

</script>

Muito grato, Thiago!