3
respostas

Otimização de funções com LOOP

Boa noite.

Fiz uso do que foi demostrado nas ultimas aulas desse curso para adicionar funções a um programa dos módulos anteriores, só que a solução ficou muito extensa. Gostaria de saber uma maneira de otimizar a última função desse programa (ou mesmo outras partes que vocês acharem interessante melhorar). Desculpem a falta de espaços no código, mas tive que fazer isso pra conseguir postar aqui no sistema....rs.

Valeu pessoal !

Parte 1 do código :

<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', 'yellow','green','orange','white']
    var indiceCorAtual = 0; // começa com blue
    var raio = 6;
    var incremento = 2;

    function desenhaPincel() {

        var xi = 675;
        var yi = 72;
        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='13px 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() {

        pincel.fillStyle = 'black';
        pincel.fillRect(600, 0, 750, 400);
        pincel.strokeStyle='black';
        pincel.strokeRect(600,0,750,400);
        desenhaTexto("COR SELECIONADA", 615, 30);
        desenhaTexto("MUDAR DE COR",625,130);
        desenhaTexto("Botão direito do Mouse",610,150);
        desenhaTexto("ou Toque na Cor",630,170);
        //Loop para desenhar cores no mostrador
        var x = 622
        i = 0

        for(var repeticoes = 0; repeticoes < cores.length; repeticoes++) {
            opcoesCores(x,195,cores[i]);
            x = x + 21;
            i++;
        }

        desenhaTexto("SHIFT + Botão direito", 612,240);
        desenhaTexto("AUMENTA O PINCEL",610,260);
        desenhaTexto("ALT + Botão direito", 615,300);
        desenhaTexto("DIMINUI O PINCEL",613,320);
        desenhaTexto("Botão Esquerdo",625,360);
        desenhaTexto("DESENHA NA TELA",615,380);
        desenhaPincel();
        }
        desenhaMostrador();
3 respostas

Parte 2 do código :

function definePincel(evento) {

        desenha = false;
        fatorBotao = true;

        if (evento.shiftKey && evento.altKey) {
                alert('Só aperte uma tecla por vez, por favor!');
                fatorBotao = false;
        } else if(evento.shiftKey && raio + incremento <= 20) {
                raio = raio + incremento;
                fatorBotao = false;
        } else if(evento.altKey && raio - incremento >= 2) {
                raio = raio - incremento;
                fatorBotao = false;
        } else if (evento.altKey || evento.shiftKey) {
                fatorBotao = false;
        } else if(fatorBotao) {
                indiceCorAtual++;

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

        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.onclick = selecionaCor;        
        tela.oncontextmenu = definePincel;

        if((x + raio) > 600) {
            desenhaMostrador();
        }
        }   
    }

    function ativaDesenha() {
        desenha = true;
    }

    function desativaDesenha() {
        desenha = false;
    }

    function botaoEsquerdo() {
        tela.onmousemove = desenhaCirculo;
    }

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

    tela.onclick = botaoEsquerdo;

// Esta função foi adicionada por último e precisa ser otimizada.

    function selecionaCor (evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    ix = 601
    iy = 195
    posicao = 21

    if((x > (ix + (1 * posicao)) - 10 ) && (x < (ix + (1 * posicao)) + 10) && (y > iy - 10) && (y < iy + 10)) {
        indiceCorAtual = 0;
        desenhaMostrador();
    } else if((x > (ix + (2 * posicao)) - 10 ) && (x < (ix + (2 * posicao)) + 10) && (y > iy - 10) && (y < iy + 10)) {
        indiceCorAtual = 1;
        desenhaMostrador();
    } else if((x > (ix + (3 * posicao)) - 10 ) && (x < (ix + (3 * posicao)) + 10) && (y > iy - 10) && (y < iy + 10)) {
        indiceCorAtual = 2;
        desenhaMostrador();
    } else if((x > (ix + (4 * posicao)) - 10 ) && (x < (ix + (4 * posicao)) + 10) && (y > iy - 10) && (y < iy + 10)) {
        indiceCorAtual = 3;
        desenhaMostrador();
    } else if((x > (ix + (5 * posicao)) - 10 ) && (x < (ix + (5 * posicao)) + 10) && (y > iy - 10) && (y < iy + 10)) {
        indiceCorAtual = 4;
        desenhaMostrador();
    } else if((x > (ix + (6 * posicao)) - 10 ) && (x < (ix + (6 * posicao)) + 10) && (y > iy - 10) && (y < iy + 10)) {
        indiceCorAtual = 5;
        desenhaMostrador();
    }       
    }

</script>

Opa, tudo bom Rodrigo?

Cara, a minha sugestão, eh que você tente substituir esses laços if e else if, por um laço switch, que consome menos recursos da maquina, e o codigo fica menor :)

Caso tenha duvidas sobre como fazer isso, consulte o seguinte link

Espero ter ajudado. Se tiver qualquer problema, escreve ai! :D

link em portugues...