Como descobrir se uma imagem foi clicada dentro de um canvas?

Prove Yourself · Dezembro 2, 2010

Utilizando o seguinte código:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="wrapper">
            <header>
                <h1>Title</h1>
                <h2>Subtitle</h2>
            </header>
            <canvas id="game" height="500" width="700">
            </canvas>
        </div>
        <script>
        (function() {
            var canvas = document.getElementById('game'),
                context = canvas.getContext('2d'),
                fps = 1,
                character = Image(),
                positions = [[125, 55], [480, 55], [125, 185], [480, 182], [125, 315], [480, 315]],
                random, x, y, xc, yc = null;

            canvas.addEventListener('click', function(event) {
                xc = event.screenX - canvas.offsetLeft;
                yc = event.screenY - canvas.offsetTop;

                if((xc >= x) && (xc <= (x + character.width)) && (yc >= y) && (yc <= (y + character.height))) {
                    alert('X = ' + x + 'Y = ' + y);
                }
            }, true);

            character.src = 'character.png';

            setInterval(function() {
                random = (Math.floor(Math.random() * 6));

                random = positions[random];
                x = random[0];
                y = random[1];

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(character, x, y);
            }, 1000 / fps);
        }());
        </script>
    </body>
</html>

É desenhada uma imagem no canvas. De tempos em tempos ela é redesenhada em uma posição aleatória. Gostaria de executar uma ação quando essa imagem fosse clicada. Já que não tenho como adicionar um evento na imagem em si, já que ela foi desenhada no canvas, tenho que adicionar o evento click no canvas inteiro. O problema é pegar a posição exata da imagem, visto que screenY retorna a altura da tela e não é referente ao canvas. Tentei subtrair event.screenY - canvas.offsetTop; mas mesmo assim o evento não é disparado (não passa no if).

Alguma idéia? Valeu.

Willian Gustavo Veiga · Dezembro 2, 2010

Você conseguirá resolver da seguinte maneira:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="wrapper">
            <canvas id="game" height="500" width="700">
            </canvas>
        </div>
        <script>
        (function() {
            var canvas = document.getElementById('game'),
                context = canvas.getContext('2d'),
                fps = 1,
                character = new Image(),
                positions = [[125, 55], [480, 55], [125, 185], [480, 182], [125, 315], [480, 315]],
                random, x, y;

            canvas.addEventListener('click', function(event) {
                if(event.clientX - canvas.offsetLeft >= x && event.clientX - canvas.offsetLeft <= (x + character.width) && event.clientY - canvas.offsetTop >= y && event.clientY - canvas.offsetTop <= (y + character.height)) {
                }
            }, true);

            character.src = 'character.png';

            setInterval(function() {
                random = (Math.floor(Math.random() * 6));

                random = positions[random];
                x = random[0];
                y = random[1];

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(character, x, y);
            }, 1000 / fps);
        }());
        </script>
    </body>
</html>

Perceba a parte do if.

Um abraço.

Editado Dezembro 2, 2010 por Willian Gustavo Veiga

Entrar

Como descobrir se uma imagem foi clicada dentro de um canvas?

Pergunta

Prove Yourself

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Willian Gustavo Veiga

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades