4

Essencialmente meu programa cria uma "tela" de "pixels" onde as divs são os pixels.

Ele gera aleatoriamente as cores na imagem e o usuário pode usar uma paleta que fica embaixo pra trocar, como se fosse pintar.

No entanto, estou com um dilema: Gostaria que o usuário pudesse clicar com o mouse e arrastar para pintar, ao invés de clicar div a div. Tentei alguns listeners, mas não funcionou.

Segue os códigos! Desde já, agradeço!

var updateTela = false;
var corSelecionada = "white";

window.onload = function() {
  geraPegaCor();

}

function iniciaGerador() {


  if (updateTela == false) { //Se a tela ainda não foi gerada
    updateTela = true;
    geraTela();
  } else if (updateTela == true) { //Se a tela já foi gerada

    geraImagem(1290);
  } else { //MSG de Erro
    alert("error");
  }
}

function geraTela() { //Gera a tela (os pixels e o palco de pixels)

  var palco = document.getElementById('palcopixel'); //holder do palco de          pixels
  palco.style.height = "363px";
  //começa a montar os pixels, div a div

  //laço de numerode linhas
  var nLinhas = 0;
  var nPixel = 0;
  while (nLinhas < 30) {
    var n = 1;
    while (n < 44) {
      nPixel++;

      var divPixel;
      divPixel = document.createElement("div");
      divPixel.setAttribute("id", "pixel" + nPixel)
      divPixel.setAttribute("class", "pixel");
      palco.appendChild(divPixel);
      n++;
    }

    nLinhas++;
  }

  geraImagem(nPixel);
}

function geraImagem(numeroPixel) {
  var contaDiv = 1;

  while (contaDiv <= numeroPixel) {
    var corRandom;
    var tabelaCores = ['blue', 'yellow', 'red', 'green', 'pink', 'cyan', 'black', 'brown', 'tomato', 'violet'];
    var pixelClassHolder;

    corRandom = Math.floor(Math.random() * 10);

    pixelClassHolder = document.getElementById("pixel" + contaDiv);

    corSelecionada = tabelaCores[corRandom];
    //console.log(corSelecionada);
    pixelClassHolder.style.background = tabelaCores[corRandom]
    pixelClassHolder.setAttribute("onclick", "pintaTela('pixel" + contaDiv + "')");
    contaDiv++;


  }

  var corSelecionada = "white";

}

function geraPegaCor() {

  var paletaPegaCor = document.getElementById('pegaCor');
  var contaPegaCor = 0;
  var tabelaCores = ['blue', 'yellow', 'red', 'green', 'pink', 'cyan', 'black', 'brown', 'tomato', 'violet'];

  while (contaPegaCor < tabelaCores.length) {

    var divColorPicker;
    divColorPicker = document.createElement("div");
    divColorPicker.setAttribute("id", "corPegavel" + contaPegaCor)
    divColorPicker.setAttribute("class", "corPegavel");
    paletaPegaCor.appendChild(divColorPicker);
    divColorPicker.style.background = tabelaCores[contaPegaCor];
    divColorPicker.setAttribute("onclick", "cataCor('" + tabelaCores[contaPegaCor] + "')")


    contaPegaCor++;
  }
}

/******************************/
/*   FERRAMENTAS DE PINTURA   */
/******************************/
function cataCor(corCatada) { //PEGA COR DOS CONTROLES

  $("#corselecionada").css("color", corCatada);
  $("#corselecionada").text(corCatada);
  corSelecionada = corCatada;
  document.body.style.cursor = "crosshair";

}

function limpaCor() {
  $("#corselecionada").css("color", "black");
  $("#corselecionada").text("Branco");
  document.corSelecionada = "white";
}

function pintaTela(divSelecionada) {


  $("#" + divSelecionada + "").css("background", "" + corSelecionada + "");

  console.log(corSelecionada);


}







/*****************************/
/*         ESTETICA         */
/***************************/
//HOVER DAS CORES
$(".corPegavel").hover(function() {
  $(this).animate({
    opacity: 0.25
  }, 200);

});

$(".corPegavel").mouseleave(function() {
  $(this).animate({
    opacity: 1
  }, 100);
});
//
body {}

#palcopixel {
  width: 483px;
}

.pixel {
  width: 10px;
  height: 10px;
  background-color: blue;
  float: left;
  margin-right: 1px;
  margin-bottom: 1px;
}

#controles {}

#pegaCor {
  margin-top: 5px;
  /*float: left;
    position: relative;*/
}

.corPegavel {
  margin-right: 1px;
  float: left;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="palcopixel"></div>
<div id="controles">
  <input type="button" name="geraimagembotao" onclick="iniciaGerador()" value="Gere a imagem">
  <input type="button" name="limpadordecor" onclick="limpaCor()" value="Limpar Pincel">
  <div>Cor Selecionada: <span id="corselecionada">Branco</span></div>
  <div id="pegaCor">

  </div>
</div>

1
  • 3
    Melhorei sua pergunta removendo textos desnecessários e criando o snippet de forma que o código fique reproduzível no site. Você pode fazer o tour, ler o guia de Como perguntar e acessar a central de ajuda para aprender mais do funcionamento do site. Em caso de dúvida, pode perguntar no Stack Overflow em Português Meta. Seja bem-vindo.
    – Woss
    26/10/2018 às 19:11

1 Resposta 1

4

De uma forma bem trivial, sem analisar todo o seu código, você pode criar uma variável clicado, do tipo booleana, que será verdadeira enquanto o mouse estiver pressionado. No evento mousedown dos seus elementos você define ela como verdadeira e no evento mouseup ela como falsa. No evento mouseover, que é quando o mouse está sobre o elemento, você verifica se a variável é verdadeira e, se sim, muda a cor de fundo.

Fiz isso basicamente adicionando o código:

divPixel.addEventListener('mousedown', function () {
  clicado = true;
});

divPixel.addEventListener('mouseup', function () {
  clicado = false;
});

divPixel.addEventListener('mouseover', function () {
  if (clicado) {
    this.style.backgroundColor = corSelecionada;
  }
});

Veja como ficou:

var updateTela = false;
var corSelecionada = "white";
var clicado = false;

window.onload = function() {
  geraPegaCor();

}

function iniciaGerador() {


  if (updateTela == false) { //Se a tela ainda não foi gerada
    updateTela = true;
    geraTela();
  } else if (updateTela == true) { //Se a tela já foi gerada

    geraImagem(1290);
  } else { //MSG de Erro
    alert("error");
  }
}

function geraTela() { //Gera a tela (os pixels e o palco de pixels)

  var palco = document.getElementById('palcopixel'); //holder do palco de          pixels
  palco.style.height = "363px";
  //começa a montar os pixels, div a div

  //laço de numerode linhas
  var nLinhas = 0;
  var nPixel = 0;
  while (nLinhas < 30) {
    var n = 1;
    while (n < 44) {
      nPixel++;

      var divPixel;
      divPixel = document.createElement("div");
      divPixel.setAttribute("id", "pixel" + nPixel)
      divPixel.setAttribute("class", "pixel");
      
      divPixel.addEventListener('mousedown', function () {
        clicado = true;
      });
      
      divPixel.addEventListener('mouseup', function () {
        clicado = false;
      });
      
      divPixel.addEventListener('mouseover', function () {
        if (clicado) {
          this.style.backgroundColor = corSelecionada;
        }
      });
      
      palco.appendChild(divPixel);
      n++;
    }

    nLinhas++;
  }

  geraImagem(nPixel);
}

function geraImagem(numeroPixel) {
  var contaDiv = 1;

  while (contaDiv <= numeroPixel) {
    var corRandom;
    var tabelaCores = ['blue', 'yellow', 'red', 'green', 'pink', 'cyan', 'black', 'brown', 'tomato', 'violet'];
    var pixelClassHolder;

    corRandom = Math.floor(Math.random() * 10);

    pixelClassHolder = document.getElementById("pixel" + contaDiv);

    corSelecionada = tabelaCores[corRandom];
    //console.log(corSelecionada);
    pixelClassHolder.style.background = tabelaCores[corRandom]
    pixelClassHolder.setAttribute("onclick", "pintaTela('pixel" + contaDiv + "')");
    contaDiv++;


  }

  var corSelecionada = "white";

}

function geraPegaCor() {

  var paletaPegaCor = document.getElementById('pegaCor');
  var contaPegaCor = 0;
  var tabelaCores = ['blue', 'yellow', 'red', 'green', 'pink', 'cyan', 'black', 'brown', 'tomato', 'violet'];

  while (contaPegaCor < tabelaCores.length) {

    var divColorPicker;
    divColorPicker = document.createElement("div");
    divColorPicker.setAttribute("id", "corPegavel" + contaPegaCor)
    divColorPicker.setAttribute("class", "corPegavel");
    paletaPegaCor.appendChild(divColorPicker);
    divColorPicker.style.background = tabelaCores[contaPegaCor];
    divColorPicker.setAttribute("onclick", "cataCor('" + tabelaCores[contaPegaCor] + "')")


    contaPegaCor++;
  }
}

/******************************/
/*   FERRAMENTAS DE PINTURA   */
/******************************/
function cataCor(corCatada) { //PEGA COR DOS CONTROLES

  $("#corselecionada").css("color", corCatada);
  $("#corselecionada").text(corCatada);
  corSelecionada = corCatada;
  document.body.style.cursor = "crosshair";

}

function limpaCor() {
  $("#corselecionada").css("color", "black");
  $("#corselecionada").text("Branco");
  document.corSelecionada = "white";
}

function pintaTela(divSelecionada) {


  $("#" + divSelecionada + "").css("background", "" + corSelecionada + "");

  console.log(corSelecionada);


}







/*****************************/
/*         ESTETICA         */
/***************************/
//HOVER DAS CORES
$(".corPegavel").hover(function() {
  $(this).animate({
    opacity: 0.25
  }, 200);

});

$(".corPegavel").mouseleave(function() {
  $(this).animate({
    opacity: 1
  }, 100);
});
//
body {}

#palcopixel {
  width: 483px;
}

.pixel {
  width: 10px;
  height: 10px;
  background-color: blue;
  float: left;
  margin-right: 1px;
  margin-bottom: 1px;
}

#controles {}

#pegaCor {
  margin-top: 5px;
  /*float: left;
    position: relative;*/
}

.corPegavel {
  margin-right: 1px;
  float: left;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="palcopixel"></div>
<div id="controles">
  <input type="button" name="geraimagembotao" onclick="iniciaGerador()" value="Gere a imagem">
  <input type="button" name="limpadordecor" onclick="limpaCor()" value="Limpar Pincel">
  <div>Cor Selecionada: <span id="corselecionada">Branco</span></div>
  <div id="pegaCor">

  </div>
</div>

Fato é que assim se você clicar sobre a imagem, arrastar para fora dela e soltar o mouse, ficará pintando continuamente mesmo sem pressionar o mouse, pois o evento mouseup não ocorre no elemento e, por isso, a variável não volta para falso. Você pode alterar isso conforme sua necessidade, capturando os devidos eventos no JavaScript.

1
  • Caraca, meu, incrível como JS tem umas saídas tão tranquilas. Funcionou perfeitamente! 26/10/2018 às 19:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .