Boa tarde, estou com uma duvida, como eu faço para clicar em algo desenhado no canvas e arrastar ele por dentro do canvas e assim mudar a posição dele?
No momento, eu consigo criar um objeto, mas não consigo arrastar ele pelo canvas.
Boa tarde, estou com uma duvida, como eu faço para clicar em algo desenhado no canvas e arrastar ele por dentro do canvas e assim mudar a posição dele?
No momento, eu consigo criar um objeto, mas não consigo arrastar ele pelo canvas.
Para arrastar um objeto pelo canvas você precisa mudar a posição do desenho dele de acordo com a posição do mouse.
Como você quer fazer isso apenas quando usar o mouse estiver pressionado você vai precisar verificar isso. O que eu faria é usar o evento onmousedown
e o onmouseup
para saber quando o mouse foi pressionado e quando ele foi solto.
Assim você pode mover o objeto para a posição do mouse enquanto o mouse estiver pressionado.
Exatamente!!
Só fazendo um complemento ao que o Ricardo falou, além dos eventos onmousedown
e onmouseup
, tbm será necessário usar o evento onmousemove
para poder pegar as posições do mouse de acordo com o seu movimento e verificar se o movimento ocorre ao mesmo tempo em que o mouse é clicado.
Uma outra coisa mto importante que tbm é necessário é verificar se o clique do mouse foi feito no objeto que se deseja mover.
Segue um exemplo:
<canvas width="600" height="400"></canvas>
<script>
function desenhaCirculo(pincel, x, y, raio) {
pincel.clearRect(0, 0, tela.width, tela.height);
pincel.fillStyle = "blue";
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
}
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var circulo = {
posicaoX: 300,
posicaoY: 200,
raio: 10
}
desenhaCirculo(pincel, circulo.posicaoX, circulo.posicaoY, circulo.raio);
var mouseClicado = undefined;
var destino = undefined;
tela.addEventListener('mousedown', function (event) {
mouseClicado = event;
});
tela.addEventListener('mousemove', function (event) {
// verifica se o mouse está clicado
if (mouseClicado) {
// pega a posição do clique do mouse
var x = mouseClicado.clientX;
var y = mouseClicado.clientY;
// verifica se o clique foi dentro do círculo
if (x <= (circulo.posicaoX+circulo.raio) &&
x >= (circulo.posicaoX-circulo.raio) &&
y <= (circulo.posicaoY+circulo.raio) &&
y >= (circulo.posicaoY-circulo.raio)) {
destino = event;
// pega a posição atual do mouse
var xd = destino.clientX;
var yd = destino.clientY;
// desenha o novo círculo
desenhaCirculo(pincel, xd, yd, circulo.raio);
}
}
});
tela.addEventListener('mouseup', function(event) {
if (mouseClicado && destino) {
destino = undefined;
// seta a posição atual do círculo como sendo o ponto
// onde o mouse deixou de ser clicado
circulo.posicaoX = event.clientX;
circulo.posicaoY = event.clientY;
}
mouseClicado = undefined;
});
</script>
Grande abraço e bons estudos!