Ich habe ein Bild in ein Canvas-Tag gezeichnet. Wie kann ich Ereignisse hinzufügen? Ich möchte etwas tun, wenn der Nutzer in das Bild klickt.Ereignisse in Elementen innerhalb einer Zeichenfläche
character.addEventListener('click', function() { alert('foo'); }, true);
/* character is a var (image object) within a canvas */
Vielen Dank.
Es ist nicht möglich, Ereignisprozeduren zu tatsächlichen Zeichnungen auf der Zeichenfläche hinzuzufügen. Sie können Ereignisse für die gesamte Leinwand verwalten - das ist es.
Ihre Optionen an dieser Stelle ist entweder eine Abstraktion über die Leinwand hinzufügen, und suchen Sie Zeichnungen, die Sie dort basierend auf Koordinaten von Canvas Click Events - oder ganz Canvas fallen lassen und z. Svg. Die Raphaël-Bibliothek (http://raphaeljs.com/) kann Ihnen dabei helfen.
get click event of each rectangle inside canvas?
Weiter mehr, habe ich festgestellt, dass diese Antwort nicht in Mozilla funktioniert.
Verwenden Sie stattdessen clientX anstelle von offsetX.
Beispiel, ich habe eine dynamische Leinwand Fotogalerie auf Github aufgestellt: https://github.com/michaelBenin/fi-test
Jedes Mal, wenn die Fenstergröße verändert wird neu berechnen ich die x, y, jedes Bild gezeichnet, von dort laufe ich die Kollisionen Funktion, wenn die Leinwand wird angeklickt.
Grundsätzlich erhalten Sie den x, y-Wert aus dem click -Ereignis und überprüfen Sie, ob sich an diesen Koordinaten etwas auf der Zeichenfläche befindet.
Hier ist eine weitere gute Verbindung ist Click-Ereignisse auf Registrierung innerhalb der Leinwand: http://eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript/
See Schlag Link gibt es eine Probe
http://www.html5canvastutorials.com/cookbook/ch6/1369_06_03/
Siehe die Quelle der Seite
Wenn Sie Eine Canvas-Bibliothek wie Fabric.js würde die Klickerkennung der zugrunde liegenden Form übernehmen. Zum Beispiel: 'canvas.add (myImg); myImg.on ('click', function() {console.log ('Bild wurde angeklickt')}) ' – kangax