J'ai dessiné une image à l'intérieur d'une zone de dessin. Comment pourrais-je ajouter des événements? Je veux faire quelque chose lorsque l'utilisateur clique sur cette image.Evénements dans les éléments d'une zone de dessin
character.addEventListener('click', function() { alert('foo'); }, true);
/* character is a var (image object) within a canvas */
Merci.
Il n'y a aucun moyen d'ajouter des gestionnaires d'événements aux dessins réels sur le canevas. Vous pouvez gérer les événements pour toute la toile - c'est tout. Vos options à ce stade sont soit d'ajouter une abstraction sur le canevas, et les dessins de recherche que vous avez là basé sur les coordonnées des événements de clic de canevas - ou de laisser tomber la toile tout à fait et aller par exemple. svg. La bibliothèque Raphaël (http://raphaeljs.com/) peut vous aider avec ce dernier.
get click event of each rectangle inside canvas?
De plus, j'ai trouvé que cette réponse ne fonctionne pas dans Mozilla. Utilisez à la place clientX au lieu de offsetX à
l'exemple, nous avons créé une galerie d'images de toile dynamique sur github à: https://github.com/michaelBenin/fi-test
Chaque fois que la fenêtre est redimensionnée I recalculer le x, y de chaque image dessinée, à partir de là j'exécuter la fonction collisions lorsque le la toile est cliquée.
Fondamentalement, vous obtenez la valeur x, y de l'événement click et vérifiez s'il y a quelque chose sur le canevas à ces coordonnées.
Voici un autre bon lien sur l'enregistrement des événements cliquez à l'intérieur de la toile: http://eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript/
Voir lien coup, il y a un échantillon
http://www.html5canvastutorials.com/cookbook/ch6/1369_06_03/
Voir la source de la page
Si vous utilisez bibliothèque de toile comme Fabric.js, il prendrait soin de la détection de clic de forme sous-jacente. Par exemple: 'canvas.add (myImg); myImg.on ('click', function() {console.log ('l'image a été cliquée')}) ' – kangax