How to put a click event in a primitive drawn form?

Question

How to put a click event in a primitive drawn form?

Asked 11 years ago

Viewed 598 times

2

Animação - botões de play e pause I made an animation and would like to put the buttons pause and play using these drawings in primitive forms.

function botaoPlay() {
    contexto.beginPath();
    contexto.fillStyle = "rgb(255,255,0)";
    contexto.moveTo(430, 450);
    contexto.lineTo(460, 465);
    contexto.lineTo(430, 480);
    contexto.lineTo(430, 450);
    contexto.fill();
    contexto.closePath();

}

function botaoStop() {
    contexto.beginPath();
    contexto.fillStyle = "rgb(255,55,55)";
    contexto.arc(490, 463, 15, 0, 2 * Math.PI, true);
    contexto.fill();
    contexto.closePath
}

How do I use click event on shapes?

Here all the code:

<html>
    <head>
        <title>ANIMACAO - RequestAnimationFrame</title>
    </head>

    <body>
        <canvas id="meu_canvas" width="900" height="500"></canvas>
        <script>
            //canvas e contexto
            var canvas = document.getElementById('meu_canvas');
            var contexto = canvas.getContext('2d');

            var playpause;
            var x = 0;
            var desloc = 2;
            var LARGURA = 100;
            var ALTURA = 140;
            var frame = 1;

            var imagem = new Image();
            imagem.src = "IMG/ScottSprite.png";
            imagem.onload = function() {
                contexto.drawImage(imagem, 0, 0, LARGURA, ALTURA, x, 20, LARGURA, ALTURA);
            }
            //Caixa de botoes(Contem 3x funcoes: Desenhar uma caixa com DOIS botoes)

            boxButton();
            window.requestAnimationFrame(playAnimation);

            //Função de animação
            function playAnimation() {
                contexto.clearRect(0, 0, canvas.width, 445);
                //Deslocar
                x = (x + LARGURA + desloc > canvas.width ? 0 : x + desloc);
                if (x % (LARGURA / 2) == 0)
                    frame = (frame > 4 ? 2 : frame + 1);
                //Desenhar a imagem.
                desenharImagem();
                //Chamando o cliclo novamente
                window.requestAnimationFrame(playAnimation);

            }

            function desenharImagem() {
                contexto.clearRect(0, 0, canvas.width, 445);
                contexto.setLineDash([4, 2]);
                contexto.strokeRect(0, 0, canvas.width, canvas.height);
                contexto.drawImage(imagem, frame * LARGURA, 0, LARGURA, ALTURA, x, canvas.height / 2, LARGURA, ALTURA);

            }

            function botaoPlay() {
                contexto.beginPath();
                contexto.fillStyle = "rgb(255,255,0)";
                contexto.moveTo(430, 450);
                contexto.lineTo(460, 465);
                contexto.lineTo(430, 480);
                contexto.lineTo(430, 450);
                contexto.fill();
                contexto.closePath();

            }

            function botaoStop() {
                contexto.beginPath();
                contexto.fillStyle = "rgb(255,55,55)";
                contexto.arc(490, 463, 15, 0, 2 * Math.PI, true);
                contexto.fill();
                contexto.closePath
            }

            function boxButton() {
                contexto.beginPath();
                contexto.fillStyle = "rgb(100,100,100)";
                contexto.moveTo(410, 440);
                contexto.lineTo(520, 440);
                contexto.lineTo(520, 490);
                contexto.lineTo(410, 490);
                contexto.lineTo(410, 390);
                contexto.fill();
                contexto.closePath();
                botaoPlay();
                botaoStop();

            }

            //<button onclick="buttonPlay()">►</button>
            //<button onclick="buttonStop()">||</button>

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

2 answers

Browser other questions tagged javascript html5 canvas animation

You are not signed in. Login or sign up in order to post.

by William de Castro • 83 points · Answer 1 · 2014-10-14T14:51:24+00:00

Dude, since canvas doesn’t create the elements in the DOM, I guess I’d have to map the buttons..

Like this:

$(document).ready(function() {
    $('#meu_canvas').click(clickCanvas);
});

function clickCanvas(e) {
    try {
        var clickedX = e.pageX - this.offsetLeft;
        var clickedY = e.pageY - this.offsetTop;

        if (clickedX >= 430 && clickedX <= 460 && clickedY >= 450 && clickedY <= 480) {
            alert("Click PLAY!");
        } else if (clickedX >= 470 && clickedX <= 505 && clickedY >= 450 && clickedY <= 480) {
            alert("Click STOP!");
        }
    } catch(e) {
        alert(e.message);
    }
}

Test on this Fiddle, only on which map the buttons better, of course..

http://jsfiddle.net/76e1uzto/

by Marcus Cris Lima • 1 point · Answer 2 · 2014-10-18T11:45:45+00:00

Already finished, I did so. VLW the tip.

ANIMATION - Requestanimationframe

<body>
        <canvas id="meu_canvas" width="900" height="500"></canvas>
        <script>
                            //canvas e contexto
                var canvas = document.getElementById('meu_canvas');
                var contexto = canvas.getContext('2d');

                var x = 0;
                var desloc = 2;
                var LARGURA = 100;
                var ALTURA = 140;
                var frame = 1;

                var imagem = new Image();
                imagem.src="IMG/ScottSprite.png";
                imagem.onload = function() {
                        contexto.drawImage(imagem,0,0,LARGURA,ALTURA,x,20,LARGURA,ALTURA);
                        }




                //Caixa de botoes(Contem 3x funcoes: Desenhar uma caixa com DOIS botoes)
                contexto.setLineDash([4,2]);
                contexto.strokeRect(0,0,canvas.width,canvas.height);
                caixaBotoes();
                window.requestAnimationFrame(playAnimation);
                function playAnimation() {
                    contexto.clearRect(0,0,canvas.width,445);
                    //----------Deslocar-------------
                    x = (x + LARGURA + desloc > canvas.width ? 0 : x + desloc);
                    if ( x % (LARGURA/2) == 0) frame = (frame > 4 ? 2 : frame + 1);
                    //Desenhar a imagem.
                    desenharImagem();

                    //--------Teste de mouse-------------
                    canvas.onclick = function(evt){
                    var rectNav = canvas.getBoundingClientRect();
                    var pos = {
                    x: evt.clientX - rectNav.left,
                    y: evt.clientY - rectNav.top    };
                    //Botao de play
                    if(pos.x>bt.x && pos.x<(bt.x+bt.w) && pos.y > bt.y && pos.y<(bt.y+bt.h)){
                        window.requestAnimationFrame(playAnimation);
                        desloc = 2;
                        }                       
                    //Botao de Stop
                    else if(pos.x>bt2.x && pos.x<(bt2.x+bt2.w) && pos.y > bt2.y && pos.y<(bt2.y+bt2.h)){
                        window.requestAnimationFrame(playAnimation);
                        desloc = 0;
                        }                       

                    }   

                    //Chamando o cliclo novamente
                    window.requestAnimationFrame(playAnimation);
                    }


                    function desenharImagem(){
                    contexto.clearRect(0,0,canvas.width,445);
                    contexto.setLineDash([4,2]);
                    contexto.strokeRect(0,0,canvas.width,canvas.height);
                    contexto.drawImage(imagem,frame*LARGURA,0,LARGURA,ALTURA,x,canvas.height/2,LARGURA,ALTURA);

                    }
                    function triangulo() {
                    contexto.beginPath();
                    contexto.fillStyle="rgb(255,255,0)";
                    contexto.moveTo(430,450);
                    contexto.lineTo(460,465);
                    contexto.lineTo(430,480);
                    contexto.lineTo(430,450);
                    contexto.fill();
                    contexto.closePath();

                }
                    function circulo(){
                    contexto.beginPath();
                    contexto.fillStyle="rgb(255,55,55)";
                    contexto.arc(490,463,15,0,2*Math.PI, true);
                    contexto.fill();
                    contexto.closePath
                }

                    function caixaBotoes(){
                    contexto.beginPath();
                    contexto.fillStyle="rgb(100,100,100)";
                    contexto.moveTo(410,440);
                    contexto.lineTo(520,440);
                    contexto.lineTo(520,490);
                    contexto.lineTo(410,490);
                    contexto.lineTo(410,390);
                    contexto.fill();
                    contexto.closePath();
                    triangulo();
                    circulo();
                    }

                    //Testando botoes
                    function Botao(x,y,w,h){
                    this.x = x;
                    this.y = y; 
                    this.w = w;
                    this.h = h; 
                    }
                    var bt = new Botao(430,450,30,30);



                    //Testando segundo botão.
                    function Botao2(x,y,w,h){
                    this.x = x;
                    this.y = y; 
                    this.w = w;
                    this.h = h; 
                    }
                    var bt2 = new Botao2(475,450,30,30);





        </script>
</body>