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

Click and Drag

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.

3 respostas

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!!

solução!

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!