2009-10-07 17 views
13

Ich habe ein Canvas-Tag, um eine Grafik zu erstellen. In jedem Abschnitt meiner Zeile habe ich einen "Punkt", um einen "Mouseover" zu ermöglichen und mehr Details anzuzeigen.addEventListener im Canvas-Tag

Alles funktioniert gut, wenn ich diesem Punkt keinen Ereignis-Listener hinzufüge.

Firebug warnt mich: s.addEventListener ist keine Funktion ...

Ist es möglich, dynamische Ereignis-Listener zu erstellen? (Ich bin neu in Javascript)

+0

Irgendein Code würde uns helfen ... –

Antwort

25

Sie können DOM-Ereignisse nicht an andere Dinge als DOM-Objekte (Elemente) anhängen. Die canvas ist ein DOM-Element, die Dinge, die Sie auf die Leinwand zeichnen, sind nicht. Sie werden ein Teil der Leinwand als Pixel eines Bildes.

Um einen Klick auf einen bestimmten Punkt auf Ihrer Arbeitsfläche zu erkennen, müssen Sie das click -Ereignis an das Canvas-Element anhängen und dann die x/y-Koordinaten des Klickereignisses mit den Koordinaten der Zeichenfläche vergleichen. „How do I get the coordinates of a mouse click on a canvas element?

+0

Vielen Dank. Ich war mehr daran interessiert, andere Canvas im Canvas zu erstellen, um ihnen Event-Listener hinzuzufügen, aber sie sind nicht sichtbar (vielleicht sind sie hinter dem Haupt-Canvas). Ich bin jetzt auf der Suche nach einer Möglichkeit, das Ereignis im Vergleich zur Mausposition zu erkennen. Nochmals vielen Dank :-) – kadiks

+0

Mit dem [Easel js framework] (http://easeljs.com) wird das Hinzufügen von Mausinteraktionen zu gezeichneten Formen erheblich vereinfacht – Neil

4

Wenn Sie Gonna Grundstrukturen zeichnen werden sind, empfehle ich Ihnen die Verwendung von Inline-SVG machen:

Dies wurde in beantwortet.

In diesem Fall werden alle svg-Elemente zu DOM-Elementen und Sie können jedem Ereignis separate Ereignisse hinzufügen.

Verwandte Themen