1

Tenho um alvo na tela preciso identificar quando é realizado o click no circulo central vermelho do alvo e exibir um alert quando ocorrer. Tentei pegar as coordenadas e o tamanho do raio mas acaba formando um quadrado. Se tiver uma forma de pegar as coordenadas do circulo ou identificar através da cor.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">

        <canvas width="600" height="400"></canvas>

        <script>

            var tela = document.querySelector('canvas');
            var pincel = tela.getContext('2d');

            pincel.fillStyle = 'lightgray';
            pincel.fillRect(0, 0, 600, 400);

            var raio = 10;

            function desenhaCirculo(x, y, raio, cor) {

                pincel.fillStyle = cor;
                pincel.beginPath();
                pincel.arc(x, y, raio, 0, 2 * Math.PI);
                pincel.fill();
            }

            desenhaCirculo(300,200, raio + 20, 'red'); // maior circulo
            desenhaCirculo(300,200, raio + 10, 'white');
            desenhaCirculo(300,200, raio, 'red'); // menor circulo

            function dispara(pCordenadas) {

              let lValorX = pCordenadas.pageX - tela.offsetLeft;
              let lValorY = pCordenadas.pageY - tela.offsetTop;
              
              //const lDiferencaY = lValorY > 202 ? lValorY - 202 : lValorY; 
              //const lDiferencaX = lValorX > 302 ? lValorX - 302 : lValorX;

                 if ((lValorY >= 190 && lValorY <= 210) && (lValorX >= 290 && lValorX <= 310)){
                     alert("Acertou!")
                }
            }

            tela.onclick = dispara;

        </script>
    </head>
    <body>
    </body>
</html>

Todo o código para formar o alvo e a tentativa abaixo para o alert.

0

1 Resposta 1

1

Use a função CanvasRenderingContext2D.isPointInPath(path, x, y), no path deve ser o objeto que deseja verificar e no X e Y deve passar a posição do mouse no momento do evento click.

No caso usar o Path2D ao invés do CanvasRenderingContext2D.beginPath() é mais fácil para detectar objetos "específicos".

Exemplo:

const canvas = document.getElementById('foobar');
const ctx = canvas.getContext('2d');

// Cria o circulo
const circulo = new Path2D();
circulo.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circulo);

// Cria o quadrado
const quadrado = new Path2D();
circulo.arc(100, 75, 50, 0, 2 * Math.PI);
quadrado.rect(350,50,100,100);
ctx.fillStyle = 'green';
ctx.fill(quadrado);

canvas.addEventListener('click', (event) => {
  if (ctx.isPointInPath(circulo, event.offsetX, event.offsetY)) {
    console.log('Clicou no CIRCULO');
  } else if (ctx.isPointInPath(quadrado, event.offsetX, event.offsetY)) {
    console.log('Clicou no QUADRADO');
  }
});
#foobar {
    background: #ccc;
}
<canvas id="foobar" width="500" height="300"></canvas>

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 .