2009-10-07 5 views
13

Ho un tag canvas per creare un elemento grafico. In ogni sezione della mia linea, ho un "punto" per abilitare un "mouseover" e visualizzare più dettagli.addEventListener nel tag Canvas

Tutto funziona correttamente quando non aggiungo un listener di eventi a questo punto.

Firebug mi avverte: s.addEventListener non è una funzione ...

E 'possibile creare listener di eventi dinamici? (Sono nuovo di Javascript)

+0

Alcuni codici potrebbero aiutarci ... –

risposta

25

Non è possibile associare eventi DOM a oggetti diversi da oggetti DOM (elementi). Lo canvas è un elemento DOM, le cose che stai disegnando sulla tela non lo sono. Diventano parte della tela come pixel di un'immagine.

Per rilevare un clic su un punto specifico nell'area di disegno, è necessario associare l'evento click all'elemento canvas e quindi confrontare le coordinate x/y dell'evento click con le coordinate dell'area di disegno.

Questo è stato risposto in: "How do I get the coordinates of a mouse click on a canvas element?"

+0

Grazie mille. Ero più interessato a creare altri canvas nell'area di disegno per aggiungere loro un listener di eventi ma non sono visibili (forse sono dietro la tela principale). In ogni caso, ora sto cercando un modo per rilevare l'evento rispetto alla posizione del mouse. Grazie ancora :-) – kadiks

+0

Utilizzare [Easel js framework] (http://easeljs.com) semplifica enormemente l'aggiunta dell'interazione del mouse alle forme disegnate – Neil

4

Se hai intenzione di disegnare strutture di base, vi suggerisco di fare uso di linea svg.

In questo caso, tutti gli elementi svg diventano elementi DOM e puoi allegare eventi separati a ciascuno di essi.