Share
Wenn Sie diese Serie von Anfang an verfolgt haben, sollten Sie sich jetzt mit Formen, Gruppen und Ebenen sehr gut auskennen. Sie sollten auch in der Lage sein, einige grundlegende und komplexe Formen mit Konva auf die Leinwand zu zeichnen. Wenn Sie Konva zum Erstellen interaktiver Apps oder interaktiver Spiele verwenden möchten, ist es der nächste logische Schritt, wie Sie Ereignisse auf der Bühne an verschiedene Formen binden.
In diesem Lernprogramm erfahren Sie, wie Sie mit Konva Ereignisse an jede Form binden. Sie erfahren auch etwas über die Delegierung und Verbreitung von Veranstaltungen. Manchmal müssen Sie möglicherweise den Trefferbereich einer Form sowie programmgesteuerte Ereignisse steuern. Wir werden auch diese beiden Themen diskutieren.
Sie können verschiedene Ereignisse an jede mit Konva erstellte Form mit Hilfe von binden auf() Methode. Alles, was Sie tun müssen, ist, den Namen des Ereignisses als ersten Parameter und die Funktion anzugeben, die ausgeführt werden soll, wenn das Ereignis als zweiter Parameter auftritt. Sie können Konva zum Erkennen verwenden Mouseup, Maus nach unten, Mouseenter, mouseleave, Mouseover, mousemove, klicken, und dblclick. Darüber hinaus können Sie mit Konva erkennen Rad, Dragstart, Dragmove, und Dragend Veranstaltungen.
Hier ist ein Beispiel, das erkennt Maus nach unten und mouseleave Ereignisse auf einem regelmäßigen Polygon (Sechseck). In ähnlicher Weise ist der kleinere Kreis an den gebunden Mouseover und Mouseup Ereignisse und der größere Kreis ist an die gebunden Mouseenter, mouseleave, und mousemove Veranstaltungen.
Accentsconagua
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var polyA = new Konva.RegularPolygon (x: 125, y: 125, Seiten: 6, Radius: 80, füllen: "gelb", Strich: "schwarz", Strichbreite: 5); var circA = neuer Konva.Circle (x: 275, y: 225, Höhe: 100, Füllung: "Orange", Strich: "Schwarz"); var circB = new Konva.Circle (x: 475, y: 275, Radius: 100, Füllung: "rot", Strich: "schwarz"); SchichtA.add (PolyA, CircA, CircB); stage.add (Schicht A); polyA.on ("mousedown") function () polyA.sides (polyA.sides () + 1); layerA.draw ();); polyA.on ("mouseleave") function () var totalSides = polyA.sides (); if (totalSides> 3) polyA.sides (polyA.sides () - 1); layerA.draw ();) ; circA.on ("mouseover", function () circA.strokeWidth (10); layerA.draw ();); circA.on ("mouseup", function () circA.strokeWidth (5); layerA.draw ();); circB.on ("mouseenter", function () stage.container (). style.cursor = "crosshair";); circB.on ("mouseleave", function () stage.container (). style.cursor = "default";); circB.on ("mousemove") function () var pointerPos = stage.getPointerPosition (); var r = pointerPos.x% 255; var g = pointerPos.y% 255; circB.fill ("rgb (" + r + "," + g + ", 100)"); layerA.draw ();); Wenn ein Benutzer eine Maustaste drückt, während sich der Cursor innerhalb des regulären Polygons befindet, wird die Anzahl der Seiten des Polygons um 1 erhöht Seiten () Die Methode kann ohne Parameter verwendet werden, um die Anzahl der Seiten eines Polygons abzurufen, oder mit einem Parameter die Anzahl der Seiten eines Polygons festlegen. Sie können auch die Anzahl der Seiten mit verwenden getSides () und stellen Sie die Anzahl der Seiten mit ein setSides (). Die Seiten des Polygons werden um eins verringert, wenn der Mauszeiger das Polygon verlässt.
Für den kleineren Kreis die Mouseover Mit event wird der Wert für die Strichbreite auf 10 gesetzt Mouseup Ereignis ändert den Wert für die Strichbreite auf 5. Denken Sie daran, dass das Mouseup Das Ereignis muss innerhalb des Kreises selbst stattfinden. Beispielsweise ändert sich die Strichbreite nicht in 5, wenn Sie die Maustaste innerhalb des Kreises drücken und sie erst dann loslassen, wenn sich der Cursor außerhalb des Kreises befindet.
Im Falle des größeren Kreises verwenden wir die mousemove Ereignis zu ändern füllen Farbe. Wir ändern auch den Cursor des größeren Kreises mit stage.container (). style.cursor Immer wenn sich der Cursor im Kreis befindet.
Eine wichtige Sache, die Sie bedenken sollten, ist, dass Sie die anrufen müssen zeichnen() Methode auf der jeweiligen Ebene, wenn die Ereignis-Listener für eine Form zu einer Änderung der Attribute wie Füllfarbe, Strichstärke usw. geführt haben. Andernfalls werden die Änderungen nicht auf der Leinwand angezeigt.
Sie müssen nicht jeweils ein Ereignis an eine Form binden. Sie können auch eine durch Leerzeichen getrennte Zeichenfolge mit mehreren Ereignistypen an übergeben auf() Methode. Dadurch werden alle in der Zeichenfolge aufgeführten Ereignisse an diese bestimmte Form gebunden.
Konva unterstützt auch entsprechende mobile Versionen all dieser Ereignisse. Zum Beispiel können Sie sich registrieren Touchstart, touchmove, touchend, Zapfhahn, dbltap, Dragstart, Dragmove, und Dragend Verwenden von Konva auf mobilen Geräten.
Sie können jedes dieser Ereignisse auch für eine bestimmte Form oder Formen auslösen Feuer() Methode. Auf ähnliche Weise können Sie mit Konva benutzerdefinierte Ereignisse auslösen Steine werfen.
Sie können alle Ereignis-Listener entfernen, die an einer Form angehängt sind aus() Methode in Konva. Sie müssen nur den Ereignisnamen angeben, den Sie nicht hören möchten.
Sie können auch mehrere Ereignisbindungen für eine einzelne Form erstellen. Angenommen, Sie haben einen Kreis, und Sie möchten den Kreisradius jedes Mal vergrößern, wenn der Mauszeiger darüber fährt, bis zu einem bestimmten Grenzwert. Sie können auch die Füllfarbe des Kreises bei jedem ändern Mouseover Veranstaltung.
Eine Option besteht darin, diese beiden Aufgaben innerhalb einer einzigen Aufgabe auszuführen Mouseover Ereignis-Listener und beenden Sie die Aktualisierung des Radius später. Eine andere Möglichkeit besteht darin, zwei zu erstellen Mouseover Ereignis-Listener mit unterschiedlichen Namespaces, um sie zu identifizieren. Auf diese Weise können Sie den Radius vergrößern und die Füllfarbe unabhängig voneinander ändern.
circA.on ("mouseover.radius"), function () var curRadius = circA.radius (); wenn (curRadius < 150) circA.radius(curRadius + 5); layerA.draw(); else circA.off('mouseover.radius'); ); circA.on("mouseover.fillcolor", function() var h = Math.floor(Math.random()*360); var color = "hsl(" + h + ", 60%, 60%)"; circA.fill(color); layerA.draw(); );Sie sollten beachten, dass ich hinzugefügt habe layerA.draw () in beiden Hörern. Wenn Sie es nicht in der mouseover.fillcolor Listener, die Farbe wird nicht mehr aktualisiert, sobald der Radius 150 wird.
Anstatt nur einen Ereignis-Listener zu entfernen, können Sie auch die Überwachung aller an eine Form gebundenen Ereignisse mit der Option beenden setListening () Methode. Sie können durch wahr und falsch auf diese Methode, um Ereignis-Zuhörer zu wenden auf und aus. Denken Sie daran, dass Sie auch das Trefferdiagramm der betroffenen Ebene neu erstellen müssen, indem Sie das Symbol aufrufen drawHit () Methode direkt nach dem Aufruf setListening ().
Anstatt Ereignisse direkt an alle auf einer Ebene vorhandenen Formen zu binden, können Sie ein Ereignis auch an die Ebene selbst binden. Danach können Sie mit der bestimmen, welche Form das Ereignis ausgelöst hat Ziel Eigenschaft des Ereignisobjekts. Auf diese Weise können Sie mit Konva Ereignisse effektiv vom übergeordneten Element an das untergeordnete Element delegieren.
Angenommen, Sie hören Ereignisse in einem Kreis, der auf einer Ebene in Konva gezeichnet ist. Dasselbe Klickereignis wird sowohl an die enthaltende Gruppe als auch an die enthaltende Ebene weitergegeben. Dies kann das beabsichtigte Verhalten sein oder nicht. Wenn Sie verhindern möchten, dass das Ereignis in einer Form bis zur übergeordneten Ebene sprudelt, können Sie das festlegen cancelBubble Eigenschaft für das Ereignisobjekt an wahr.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var circA = new Konva.Circle (x: 300, y: 200, height: 100, füllen: "Orange", Strich: "Schwarz", Name: "Orange Circle"); var starA = neuer Konva.Star (x: 125, y: 125, innerRadius: 25, äußererRadius: 75, Rotation: 90, Füllung: "blau", Strich: "schwarz", Name: "Blue Star"); var ringA = neuer Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, füllen: "braun", Strich: "schwarz", Name: "Brown Ring"); var textA = new Konva.Text (text: "", fontFamily: "Calibri", fontSize: 24, füllen: "black", x: 10, y: 10); layerA.add (circA, SternA, RingA, TextA); stage.add (Schicht A); layerA.on ("click", Funktion (e) var shapeName = e.target.attrs.name; textA.setText (shapeName); layerA.draw ();); Ich habe das benutzt Name Eigenschaft, um jeder unserer Formen einen Namen zu geben. Das Text setzen() Die Methode wird dann verwendet, um den darin enthaltenen Text zu ändern textA Auf den Namen der Form haben wir gerade geklickt.
Im obigen Beispiel hat der Ring einen Klick darauf registriert, als der Klick zwischen dem inneren und äußeren Kreis erfolgte. Was wäre, wenn Sie den Klick innerhalb des kleineren Kreises registrieren möchten? Mit Konva können Sie benutzerdefinierte Trefferregionen mithilfe von definieren hitFunc Eigentum. Diese Eigenschaft akzeptiert eine Funktion als Wert, und diese Funktion wird zum Zeichnen des benutzerdefinierten Trefferbereichs verwendet.
Das folgende Beispiel zeigt, wie Sie benutzerdefinierte Trefferbereiche erstellen. Sie sollten jetzt in der Lage sein, in den Bereich zwischen den Sternspitzen zu klicken und trotzdem einen Klick zu registrieren. Mithilfe von benutzerdefinierten Trefferbereichen können Sie sicherstellen, dass Ihre Benutzer nicht auf genaue Standorte klicken müssen, um ein Klickereignis zu registrieren. Dies kann zu einer besseren Benutzererfahrung führen, wenn kleinere oder komplexere Formen verwendet werden.
var starA = neuer Konva.Star (x: 125, y: 125, innerRadius: 25, äußererRadius: 75, Rotation: 90, Füllung: "blau", Strich: "schwarz", Name: "Blue Star", hitFunc: function (context) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this); ); var ringA = new Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, füllen: "braun", Strich: "schwarz", Name: "Brown Ring", hitFunc: Funktion (Kontext) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this);;
In diesem Tutorial haben wir verschiedene mobile und Desktop-Ereignisse behandelt, die Sie an jede Form in Konva binden können. Sie können diese Ereignisse nacheinander oder zu vielen gleichzeitig anhängen. Mit Konva können Sie Ihre eigenen benutzerdefinierten Ereignisse auch programmgesteuert auslösen Feuer() Methode. Im letzten Abschnitt des Lernprogramms wurde beschrieben, wie Sie Ihre eigenen Trefferregionen definieren, um Treffer in einem Bereich zu erkennen, der größer oder kleiner als die ursprüngliche Form sein kann.
Wenn Sie das Wissen dieses Tutorials mit anderen Teilnehmern der Serie kombinieren, sollten Sie jetzt in der Lage sein, verschiedene Formen auf der Leinwand zu zeichnen, damit Ihre Benutzer mit ihnen interagieren können.
.
