Ich möchte den einzelnen Formen in einem Canvas-Element die Ereignisse onclick , onmouseover und onmouseout hinzufügen.
Ich habe versucht, dies mit SVG auf verschiedene Arten zu tun und festgestellt, dass keine einzige Methode in allen gängigen Browsern funktioniert.
Vielleicht gibt es eine einfache Möglichkeit, Canvas Shapes ein onclick und wahrscheinlich andere Events hinzuzufügen?
Kann mir bitte jemand zeigen, wie man onclick hinzufügt?
Hier ist mein Code:
%Vor% %Vor% %Vor%Hier ist ein Barebone-Framework zum Hinzufügen von Events zu einzelnen Canvas-Formen
Hier ist eine Vorschau: Ссылка
Im Gegensatz zu SVG ist es nach dem Zeichnen einer Form auf Leinwand nicht möglich, diese Form zu identifizieren.
Auf der Leinwand gibt es keine individuellen Formen, nur eine Leinwand voller Pixel.
Damit Sie jede einzelne Canvas-Form erkennen und "verwenden" können, müssen Sie sich an alle grundlegenden Eigenschaften dieser Form erinnern.
Hier sind die Eigenschaften, die notwendig sind, um ein Rechteck zu identifizieren:
Sie sollten sich auch einige grundlegende Styling-Eigenschaften eines Rechtecks merken:
So erstellen Sie ein rechteckiges "Klassen" -Objekt, das sich alle eigenen Grundeigenschaften merkt.
Wenn Sie mit dem Begriff "Klasse" nicht vertraut sind, denken Sie an ihn als "Ausstecher", mit dem wir eine Form definieren können.
Dann können wir die Klasse "Cookie-Cutter" verwenden, um mehrere Kopien dieser Form zu erstellen.
Noch besser ... Klassen sind flexibel genug, um die grundlegenden Eigenschaften jeder von uns erstellten Kopie modifizieren zu können.
Für Rechtecke können wir unsere eine Klasse verwenden, um viele, viele Rechtecke mit unterschiedlichen Breiten, Höhen, Farben und Orten zu erstellen.
Der Schlüssel hier ist, dass wir Klassen erstellen, weil Klassen sehr flexibel und wiederverwendbar sind!
Hier ist unsere rect-Klasse, die sich alle grundlegenden Informationen über ein benutzerdefiniertes Rechteck "merkt".
%Vor%Wir können diese Klasse wiederverwenden, um so viele neue Rechtecke zu erzeugen, wie wir brauchen ... Und wir können unseren neuen Rechtecken verschiedene Eigenschaften zuweisen, um unsere Bedürfnisse nach Vielfalt zu erfüllen.
Wenn Sie ein tatsächliches Rechteck erstellen (indem Sie seine Eigenschaften ausfüllen), hat jede "Cookie-Cutter" -Kopie unserer Klasse ihre eigenen privaten Eigenschaften.
Wenn wir eine "Cookie-Cutter" -Klasse verwenden, um 1+ tatsächliche Rechtecke zu erstellen, um auf der Zeichenfläche zu zeichnen, werden die resultierenden echten Rechtecke "Objekte" genannt.
Hier erstellen wir 3 echte Rechteckobjekte aus unserer 1 Klasse. Wir haben jedem realen Objekt unterschiedliche Breite, Höhe und Farben zugeordnet.
%Vor%Nun geben wir unserer Klasse die Möglichkeit, sich selbst auf der Leinwand zu zeichnen, indem wir eine Funktion draw () hinzufügen. Hier stellen wir die Zeichenbefehle und Gestaltungsbefehle für den Canvas-Kontext ein.
%Vor%So verwenden Sie die Funktion draw (), um Rechtecke auf der Zeichenfläche zu zeichnen. Beachten Sie, dass wir 2 Rechteckobjekte haben und wir müssen .draw () für beide ausführen, damit 2 Objekte auf der Zeichenfläche angezeigt werden.
%Vor%Geben Sie nun der rechten Klasse die Möglichkeit, uns mitzuteilen, ob sich ein Punkt (Maus) innerhalb dieses Rechtecks befindet. Wenn der Benutzer Mausereignisse generiert, werden wir diese isPointInside () - Funktion verwenden, um zu testen, ob sich die Maus gerade in unserem Rect befindet.
%Vor%Schließlich können wir unsere rect-Klasse in das normale Browser-Mausereignissystem einbinden.
Wir bitten jQuery, auf Mausklicks auf der Leinwand zu warten. Dann füttern wir diese Mausposition an das rect-Objekt. Wir verwenden die isPointInside () des rect, um zu melden, ob der Klick innerhalb des rect liegt.
%Vor%Nun ... so erinnern Sie sich an Leinwandformen & amp; wie Sie den Code in Ihrer Frage ausführen!
%Vor%Das ist eine Barebone- "Klasse", die verschiedene Rechtecke erstellt und Mausklicks meldet.
Sie können diese Vorlage als Ausgangspunkt verwenden, um alle Mausereignisse auf allen Arten von Leinwandformen zu überwachen.
Fast alle Leinwandformen sind entweder rechteckig oder kreisförmig.
Rechteckige Canvas-Elemente
Kreisförmige Canvas-Elemente
Unregelmäßige Canvas-Elemente
Das isPointInside () würde für einen Kreis wie folgt aussehen:
%Vor%Auch unregelmäßig geformte Canvas-Elemente können isPointInside haben, aber das wird normalerweise kompliziert!
Das ist es!
Hier ist ein leicht verbesserter Code und eine Fiddle: Ссылка
%Vor%Kurz gesagt, Sie können keine Listener zu Formen in einer Zeichenfläche hinzufügen, da die Formen nicht als Objekte angezeigt werden. Die einfachste Möglichkeit, dies zu implementieren, besteht darin, einen einzelnen Listener auf der Arbeitsfläche zu verwenden und alle in der Zeichenfläche gezeichneten Objekte zu durchlaufen, um die richtige zu finden.
Diese Antwort erklärt, wie man dies unter Verwendung der Bibliothek Raphael implementiert, die auch Ihnen zur Verfügung steht viele andere Vorteile.
Wenn Sie keine Bibliothek verwenden wollen, ist dies ein sehr kurzes Beispiel dafür.
%Vor%HINWEIS: Wenn Sie viele Objekte haben, könnte dieser Ansatz ein wenig langsam sein. Dies kann durch Verwendung einer zweidimensionalen räumlichen Datenstruktur bekämpft werden.
Eine aktuellere Antwort hinzugefügt : Seit der Veröffentlichung dieser Frage gibt es jetzt zwei neue Techniken, mit denen lokale Klicks in einem Canvas-Element erkannt werden können:
Path2D : Pfade können in separaten Path2D-Objekten gespeichert und mit isPointInPath() überprüft werden
addHitRegion : integriert sich in das Ereignissystem, mit dem Sie das Ereignisobjekt selbst von Regionen Lesen Sie mehr über Path2D hier . Ein Polyfill existiert ebenfalls.
Lesen Sie mehr über addHitRegion() hier .
Beachten Sie, dass es noch ein bisschen früh ist, sowohl Firefox als auch Chrome unterstützt dies über Flags, andere Browser werden hoffentlich folgen.
Der Hauptunterschied zwischen Canvas und SVG besteht darin, dass Canvas keine Informationen über andere Formen als die resultierenden Änderungen im Pixel-Array speichert.
Eine Option wäre also, die Formen durch den entsprechenden Pixelfarbwert im Mausklick-Handler zu erkennen:
%Vor%Wenn Sie mit dieser Methode Klicks für mehrere Objekte mit derselben Farbe erfassen möchten, müssen Sie die Farbe für jede Form geringfügig ändern, damit sie nachverfolgt werden kann.
Dieser Ansatz funktioniert nicht, wenn Sie Bilder von einem anderen Host hinzufügen, da in diesem Fall die gleiche Ursprungsrichtlinie getImageData verhindert.
Tags und Links javascript canvas onclick onmouseover