Seria uma particularidade do onmousemove e onmousedown/up precisar colocar uma variável true/false? Não existe uma possibilidade de só colocar if onmousedoup como condição?
Seria uma particularidade do onmousemove e onmousedown/up precisar colocar uma variável true/false? Não existe uma possibilidade de só colocar if onmousedoup como condição?
Oi Tainã, tudo bem?
Os eventos de mouse, como onmousedown
, onmouseup
, como o próprio nome já diz, são eventos. Ou seja, vão realizar alguma função quando forem acionados. Por exemplo, o onmousedown
, vai realizar uma função quando o clique do mouse estiver pressionado, enquanto o onmouseup
vai executar uma função quando liberarmos o clique do mouse.
Não entendi muito bem sua dúvida em relação a variáveis true/false. Quando um evento é acionado, uma função é dispada. Veja o exemplo a seguir:
tela.onmousedown = function() {
console.log('Clique do mouse');
}
Veja que atribuímos uma função para o evento de mouse. E quando esse evento for disparado, a função será chamada e será printado na tela "Clique do mouse". Não precisamos utilizar if para verificar se um evento foi chamado ou não, é só atribuir o evento numa função, e essa função será executada quando o evento for realizado!
Espero ter ajudado, qualquer outra dúvida estou à disposição, bons estudos!
Na solução sugerida, utilizam uma variável false para poder determinar quando os eventos serão realizados. Mas isso não foi necessário no exercício anterior e eu não entendi bem por que foi agora. Eu consegui fazer desenhar quando arrasta mas estou tentando entender como colocar a condição de apenas com o botão apertado.
Então Tainã, a variável foi criada para determinar se o usuário pode ou não desenhar na tela. Caso o botão esteja pressionado (onmousedown), ele poderá desenhar, logo, criamos uma variável desenha e colocamos seu valor como true. Caso o botão não esteja pressionado (que é o evento onmouseup), ele não poderá desenhar, portanto setamos a variável desenha para false.
Se a variável desenha for true, ele pode desenhar normalmente quando o mouse é movimentado, nessa função aqui ele determina isso:
if(desenha) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
}
Portanto, os eventos são só uma forma de determinamos se o usuário pode ou não desenhar na tela. Deu pra entender?
Espero ter ajudado, abraços e bons estudos =)
Na verdade, não entendi. Porque no exercício anterior, de mudar a cor, não foi preciso colocar nenhum evento como true nem false para que realizasse a ação, só mesmo associar o evento a uma função. E agora, nesse caso, eu não entendi porque não posso colocar:
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.onmousedown){
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
}
else { evento.onmouseup = null;
}
}
tela.onmousemove = desenhaCirculo;
Oi Tainã, obrigada por mandar o código, agora consigo visualizar melhor e entender o seu problema!
Então, o que acontece é o seguinte: você está atribuindo a função desenhaCirculo
para o evento onmousemove
. Portanto, o evento é exatamente esse: onmousemove
. Agora dentro da função desenhaCirculo
você está tentando chamar outros eventos a partir da variável evento
, mas essa variável evento é reservada apenas para o evento onmousemove (com informações sobre esse evento), já que você chama a função desenhaCirculo
por esse evento, por isso que não está funcionando, deu pra entender agora?
A melhor prática para esse exercício é a solução do professor, que baseado no estado de uma variável (a variável desenha no caso, que pode ser true/false), o usuário pode desenhar ou não.
Espero ter ajudado, abraços =)
Mil desculpas insistir, mesmo! Estou com bastante dificuldade nessa questão. Porque quando executamos o comando evento.shifKey no exercício anterior, não houve esse problema. Seria uma particularidade do onmousemove? No outro código estava:
function marcaTela(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.shiftKey){
raio = raio + 10
}
pincel.fillStyle = cor[cor1];
pincel.beginPath();
pincel.arc(x,y,raio,0,2*3.14);
pincel.fill();
}
tela.onclick = marcaTela;
Tainã, não precisa pedir desculpas não! Estamos aqui justamente para ajudar, vamos lá!
O shiftKey na verdade não é um evento, e sim uma propriedade do evento, no caso do código que você acabou de enviar, o evento é o tela.onclick
.
Então vamos lá: você chama a função marcaTela
quando há o clique do mouse. Correto? E nessa função recebemos como parâmetro a variável 'evento', que vai obter informações do evento onclick, já que você chamou a função através desse evento.
Portanto, quando damos evento.shiftKey
, estamos acessando uma propriedade desse evento, no caso, queremos saber se a tecla shiftKey está pressionada ou não (essa propriedade retorna verdadeiro ou falso)! Mas shiftKey não é um evento em si, que nem onmouseup
, onmousedown
, e assim por diante, por isso que você não consegue usar evento.onmousedown
, ficou mais claro agora?
Não hesite em perguntar caso ainda haja dúvidas, eu quero resolver o seu problema =) Conte comigo, abraços!
agora entendi!!!
eu estava achando que shiftKey e o onmousedonw fossem equivalentes! e aí pra mim não fazia sentido que um funcionasse e outro não
mas agora entendi que o onmousedown é mais equivalente ao onclick, mesmo faz todo sentido
muito obrigada!! <3