HTML5 canvas Evento di mouseover

Question

Come si associa un mouseover o qualsiasi evento relativo a un oggetto disegnato nell'area di disegno? Per esempio, ho provato questo:

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 

//STEP ONE 
var stepOneRec = ctx.rect(20, 60, 266, 50); 
ctx.stroke(); 
stepOneRec.addEventListener("mouseover", function() { alert('it works!'); }); 

Su un sito che ho guardato ha mostrato un metodo che utilizza Kinetic.js. Se è l'unico modo, lo userò, presumo semplicemente che ci sia un modo per associare gli eventi agli elementi disegnati senza plug-in aggiuntivi. Spiacente tela noob. Ho fatto un violino con il mio codice qui: http://jsfiddle.net/jyBSZ/2/

Answer 1

(ho iniziato questo come un commento postato, poi si rese conto che è una risposta reale.)

Purtroppo, in javascript su di essa la propria, non si può. Non ci sono oggetti di tela, solo la tela nel suo insieme, e qualsiasi cosa tu abbia attinto al suo contesto. Plugin come la cinetica possono creare oggetti per te, ma l'intero punto della tela è che il browser può pensarla come una singola immagine statica.

Se lo si desidera, è possibile associare gli eventi di mousemove alla tela, tracciare la posizione e la posizione in cui si disegnano le cose, e implicare da soli che è finito "quell'oggetto" (effettivamente ciò che fanno i plugin), ma è tutto mousemove eventi su una singola tela piuttosto che eventi mouseover su componenti di esso. (Potresti anche rendere il tuo evento vincolante simulare un evento mouseover per gli "oggetti", ma in fondo è ancora basato sul controllo del movimento e sul controllo della configurazione dell'oggetto.)

Answer 2

Gli oggetti disegnati all'interno di un elemento canvas non sono elementi HTML , solo pixel, e quindi non getterà eventi DOM come gli elementi HTML.

È necessario tenere traccia delle posizioni dei propri oggetti e gestire l'evento "onmousemove" canvas per determinare quando il mouse si trova su uno degli oggetti disegnati.

Answer 3

è possibile utilizzare jCanvas, date un'occhiata here

ho fatto un esempio jsfiddle per il vostro problema.

basta modificare prossimi callback per il risultato desiderato

function mouseOut(layer){ 
$("#mouse-over-text").html('none options selected'); 
} 

function mouseIn(layer){ 
$("#mouse-over-text").html(getTextForId(layer.name)); 
}