Sou um programador Java experiente, mas estou vendo algumas coisas sobre JavaScript / HTML5 pela primeira vez em cerca de uma década. Estou completamente perplexo com o que deveria ser a coisa mais simples de todas.
Como exemplo, eu só queria desenhar algo e adicionar um manipulador de eventos a ele. Tenho certeza de que estou fazendo algo estúpido, mas pesquisei por toda parte e nada que seja sugerido (por exemplo, a resposta a esta pergunta: Adicionar propriedade onclick para inserir com JavaScript ) funciona. Estou usando o Firefox 10.0.1. Meu código segue. Você verá várias linhas comentadas e no final de cada uma é uma descrição do que (ou do que não acontece).
Qual é a sintaxe correta aqui? Eu estou ficando louco!
<html>
<body>
<canvas id="myCanvas" width="300" height="150"/>
<script language="JavaScript">
var elem = document.getElementById('myCanvas');
// elem.onClick = alert("hello world"); - displays alert without clicking
// elem.onClick = alert('hello world'); - displays alert without clicking
// elem.onClick = "alert('hello world!')"; - does nothing, even with clicking
// elem.onClick = function() { alert('hello world!'); }; - does nothing
// elem.onClick = function() { alert("hello world!"); }; - does nothing
var context = elem.getContext('2d');
context.fillStyle = '#05EFFF';
context.fillRect(0, 0, 150, 100);
</script>
</body>
onclick
vez deonClick
alert()
diretamente<script>
, em vez de definir uma função que será chamadaalert()
. O resto não faz nada por causa da capitalização deonclick
.Respostas:
Quando você desenha para um
canvas
elemento, está simplesmente desenhando um bitmap no modo imediato .Os elementos (formas, linhas, imagens) desenhados não têm representação além dos pixels que usam e de suas cores.
Portanto, para obter um evento de clique em um
canvas
elemento (forma), é necessário capturar eventos de clique nocanvas
elemento HTML e usar um pouco de matemática para determinar qual elemento foi clicado, desde que você esteja armazenando a largura / altura e deslocamento x / y dos elementos .Para adicionar um
click
evento ao seucanvas
elemento, use ...Para determinar qual elemento foi clicado ...
jsFiddle .
Esse código anexa um
click
evento aocanvas
elemento e envia uma forma (chamadaelement
no meu código) para umaelements
matriz. Você pode adicionar quantas quiser aqui.O objetivo de criar uma matriz de objetos é para que possamos consultar suas propriedades posteriormente. Depois que todos os elementos foram inseridos na matriz, fazemos um loop e renderizamos cada um deles com base em suas propriedades.
Quando o
click
evento é acionado, o código percorre os elementos e determina se o clique foi sobre algum dos elementos daelements
matriz. Nesse caso, ele dispara umalert()
, que poderia ser facilmente modificado para fazer algo como remover o item da matriz; nesse caso, você precisaria de uma função de renderização separada para atualizar ocanvas
.Para ser completo, por que suas tentativas não funcionaram ...
Isso está atribuindo o valor de retorno de
alert()
àonClick
propriedade deelem
. Está chamando imediatamente oalert()
.Em JavaScript,
'
e"
são semanticamente idênticos, o lexer provavelmente usa['"]
para aspas.Você está atribuindo uma sequência à
onClick
propriedade deelem
.JavaScript diferencia maiúsculas de minúsculas. A
onclick
propriedade é o método arcaico de anexar manipuladores de eventos. Ele permite apenas que um evento seja anexado à propriedade e o evento pode ser perdido ao serializar o HTML.Mais uma vez
' === "
.fonte
Provavelmente muito tarde para a resposta, mas acabei de ler isso enquanto me preparava para o
70-480
exame e achei que funcionava -Observe o evento como em
onclick
vez deonClick
.Exemplo de JS Bin .
fonte
Recomendo o seguinte artigo: Detecção de região de ocorrência para tela HTML5 e como ouvir eventos de clique em formas de tela que passam por várias situações.
No entanto, ele não cobre a
addHitRegion
API, que deve ser a melhor maneira (o uso de funções matemáticas e / ou comparações é bastante suscetível a erros). Essa abordagem é detalhada em developer.mozillafonte
addHitRegion
] é obsoleto. Embora ainda possa funcionar em alguns navegadores, seu uso é desencorajado, pois pode ser removido a qualquer momento. Tente evitar usá-lo." - no link dev.moz que você inclui, para salvar um clique de outras pessoas.Como alternativa à resposta de alex:
Você pode usar um desenho SVG em vez de um desenho do Canvas. Lá você pode adicionar eventos diretamente aos objetos DOM desenhados.
veja por exemplo:
Tornar um objeto de imagem svg clicável com onclick, evitando posicionamento absoluto
fonte
Você também pode colocar elementos DOM, como
div
no topo da tela, que representariam seus elementos da tela e seriam posicionados da mesma maneira.Agora você pode anexar ouvintes de eventos a essas divs e executar as ações necessárias.
fonte
Como outra alternativa barata em uma tela um pouco estática, o uso de um elemento img de sobreposição com uma definição de mapa de uso é rápido e sujo. Funciona especialmente bem em elementos de tela baseados em polígonos, como um gráfico de pizza.
fonte
Alex Answer é muito legal, mas ao usar a rotação de contexto, pode ser difícil rastrear as coordenadas x, y, então eu fiz uma demonstração mostrando como acompanhar isso.
Basicamente, estou usando esta função e fornecendo o ângulo e a distância percorrida naquele anjo antes de desenhar um objeto.
fonte