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

Right Click and options image

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo, no capítulo Nosso primeiro jogo e atividade Cliques do mouse

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Pessoal, eu nao sei como tratar quando temos o painel de opçoes de imagens na pagina, como trato isso, para que ele responda ao evento mesmo ? 

<html>
<head>
    <h2>Canvas</h2>
</head>
    <body>
        <canvas id="screen" width="600" height="400"></canvas>
    </body>
    <script>
        var screen = document.getElementById("screen");
        var c = screen.getContext("2d");

        c.fillStyle = "gray";
        c.fillRect(0, 0, 600, 400);

        var circle = function(x,y){
            c.fillStyle="blue";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        var circleRed = function(x,y){
            c.fillStyle="red";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        screen.onclick = function(event) {
            var x = event.pageX - screen.offsetLeft;
            var y = event.pageY - screen.offsetTop;
            var z = event.which;
            console.log(z);

            if(z==3){
                circleRed(x,y);
            } else {
                circle(x,y);
            }
            console.log("X " + x + "  Y " + y);
        }
    </script>
</html>
12 respostas
solução!
por Felipe Faé Schwade
| 523.7k xp | 53 posts

Para o botão direito use o:

screen.oncontextmenu = function(){}
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Eduardo conseguiu sanar sua dúvida com a resposta do nosso amigo Felipe ?

por Nauro Pereira Moraes
| 61.6k xp | 5 posts

Pessoal, bom dia. Utilizando o código abaixo, conforme explicado na resposta do exercício, eu continuo tendo ao clicar com o botão direito o menu.

Alguém pode me ajudar?

por Felipe Faé Schwade
| 523.7k xp | 53 posts

Nauro, seu código não apareceu, consegue postar ele de novo?

por Nauro Pereira Moraes
| 61.6k xp | 5 posts

por Nauro Pereira Moraes
| 61.6k xp | 5 posts
<canvas id="tela" width="600" height="400"></canvas>

<script type="text/javascript">

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle = "gray";
c.fillRect(0, 0, 600, 400);

tela.onclick = function(evento) {
    //calculando a posição do mouse e descontando a borda do navegador
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * 3.14);
    c.fill();

    //exibe no console a posição do click do mouse
    console.log( x, y);
}

tela.oncontextmenu = function (evento) {
    evento.preventDefault();
    var w = evento.pageX - tela.offsetLeft;
    var z = evento.pageY - tela.offsetTop;

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * 3.14);
    c.fill();

    //exibe no console a posição do click do mouse
    console.log(w, z);

};
</script>
por Felipe Faé Schwade
| 523.7k xp | 53 posts

Nauro, na hora de usar a função arc você usou x e y como parâmetros mas não os definiu dentro do escopo da segunda função, você usou o W e o Z para pegar o X e Y, tente mudar o seguinte:

 c.arc(x, y, 10, 0, 2 * 3.14);

por

c.arc(w, z, 10, 0, 2 * 3.14);
por Nauro Pereira Moraes
| 61.6k xp | 5 posts

Felipe, realmente era um problema com as variáveis. Fiz para não confundir com as variáveis da 1ª função e acabei esquecendo de alterar quando reaproveitei o código na segunda. Muito obrigado pela ajuda, agora funcionou perfeitamente. Abs!

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Obrigado gente, irei testar a solução do felipe, eu havia tomado outro caminho como alternativa

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Nao consegui fazer a captura do direito, ele abra a caixa de opções como se fosse uma imagem.

<html>
<head>
    <h2>Canvas</h2>
</head>
    <body>
        <canvas id="screen" width="600" height="400"></canvas>
    </body>
    <script>
        var screen = document.getElementById("screen");
        var c = screen.getContext("2d");

        c.fillStyle = "gray";
        c.fillRect(0, 0, 600, 400);

        var circle = function(x,y){
            c.fillStyle="blue";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        var circleRed = function(x,y){
            c.fillStyle="red";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        screen.onclick = function(event) {
            event.preventDefault();
            var x = event.pageX - screen.offsetLeft;
            var y = event.pageY - screen.offsetTop;
            var z = event.which;
            console.log(z);

            if(z==3){
                circleRed(x,y);
            } else {
                circle(x,y);
            }
            console.log("X " + x + "  Y " + y);
        }

    </script>
</html>
por Leonardo Bareiro Cerbaro
| 0 xp | 1 posts

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Opa, usei oncontextmenu e funcionou perfeitamente.