Toile HTML5 Mouseover event

Question

Comment lier un survol ou un événement d'un objet dessiné sur le canevas? Par exemple, j'ai essayé ceci:

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!'); }); 

Sur un site que j'ai regardé il a montré une méthode utilisant Kinetic.js. Si c'est la seule façon, je vais l'utiliser, je suppose juste qu'il existe un moyen de lier des événements à des éléments dessinés sans plug-ins supplémentaires. Désolés Toile noob. Je fait un violon avec mon code ici: http://jsfiddle.net/jyBSZ/2/

Answer 1

(j'ai commencé cela comme un commentaire posté, alors réalisé que c'est une réponse réelle.)

Malheureusement, en javascript sur son propre, vous ne pouvez pas. Il n'y a pas d'objets de toile, juste la toile dans son ensemble, et tout ce que vous avez dessiné sur son contexte. Les plugins comme cinétique peuvent faire des objets pour vous, mais tout le point de la toile est que le navigateur peut y penser comme une seule image statique. Si vous le souhaitez, vous pouvez lier des événements mousemove au canevas, suivre sa position et la position où vous avez dessiné des éléments, et impliquer par vous-même que c'est "cet objet" (effectivement ce que font les plugins), mais c'est tous les événements de mousemove sur un seul canevas plutôt que des événements mouseover sur les composants de celui-ci. (Vous pouvez même faire en sorte que votre événement simule un événement mouseover pour les "objets", mais en dessous, il est toujours basé sur la vérification du mouvement et la vérification de votre propre configuration.)

Answer 2

Les objets dessinés dans un élément canvas ne sont pas des éléments HTML , juste des pixels, et ne lancera donc pas les événements DOM comme le feraient les éléments HTML.

Vous devez suivre vous-même l'emplacement de vos objets et gérer l'événement onmousemove du canevas afin de déterminer si la souris se trouve sur l'un de vos objets dessinés.

Answer 3

vous pouvez utiliser jCanvas, jetez un oeil here

i fait un jsfiddle exemple pour votre problème.

juste modifier callbacks suivant pour résultat souhaité

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

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