Share
Als je deze serie vanaf het begin hebt gevolgd, zou je nu heel comfortabel moeten zijn met vormen, groepen en lagen. Je zou ook eenvoudig enkele basis- en complexe vormen op het canvas kunnen tekenen met Konva. Als je van plan bent om Konva te gebruiken om een of andere interactieve app of games te maken, is het logisch om te leren hoe je evenementen aan verschillende vormen op het podium kunt binden..
In deze zelfstudie leert u hoe u met Konva gebeurtenissen aan elke vorm kunt binden. Je leert ook over delegatie en propagatie van evenementen. Soms moet u misschien de trefferregio van een vorm besturen en programmatisch programma's afvuren. We zullen deze twee onderwerpen ook bespreken.
U kunt verschillende gebeurtenissen binden aan elke vorm die is gemaakt met behulp van Konva met behulp van de op() methode. Het enige wat u hoeft te doen is de naam van de gebeurtenis door te geven als de eerste parameter en de functie die moet worden uitgevoerd wanneer de gebeurtenis optreedt als de tweede parameter. U kunt Konva gebruiken om te detecteren mouseUp, mouseDown, MouseEnter, mouseLeave, mouseover, mousemove, Klik, en DblClick. Bovendien kunt u met Konva detecteren wiel, dragstart, dragmove, en dragend events.
Hier is een voorbeeld dat detecteert mouseDown en mouseLeave gebeurtenissen op een regelmatige polygoon (zeshoek). Evenzo is de kleinere cirkel gebonden aan de mouseover en mouseUp evenementen en de grotere cirkel is gebonden aan de MouseEnter, mouseLeave, en mousemove events.
Accentsconagua
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var polyA = nieuwe Konva.RegularPolygon (x: 125, y: 125, sides: 6, radius: 80, fill: "yellow", stroke: "black", strokeWidth: 5); var circA = nieuwe Konva.Circle (x: 275, y: 225, height: 100, fill: "orange", stroke: "black"); var circB = nieuwe Konva.Circle (x: 475, y: 275, radius: 100, fill: "red", stroke: "black"); layerA.add (polyA, circA, circB); stage.add (layerA); polyA.on ("mousedown", functie () 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 = "vizier";); 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 ();); Als een gebruiker op een muisknop drukt terwijl de cursor zich in de reguliere polygoon bevindt, vergroten we het aantal zijden van de veelhoek met 1. De kanten () methode kan worden gebruikt zonder een parameter om het aantal zijden van een polygoon te krijgen of gebruikt met één parameter om het aantal zijden van een polygoon in te stellen. U kunt ook het aantal zijden gebruiken getSides () en stel het aantal zijden in setSides (). De zijden van de polygoon worden met één verkleind telkens de muisaanwijzer de polygoon verlaat.
Voor de kleinere cirkel, de mouseover gebeurtenis wordt gebruikt om de waarde van de streekbreedte op 10 in te stellen mouseUp gebeurtenis wijzigt de waarde van de streekbreedte naar 5. Houd er rekening mee dat het mouseUp evenement moet plaatsvinden in de cirkel zelf. De streekbreedte verandert bijvoorbeeld niet in 5 als u met de muisknop in de cirkel drukt en deze pas weer loslaat nadat de cursor buiten de cirkel staat.
In het geval van de grotere cirkel gebruiken we de mousemove evenement om het te veranderen vullen kleur. We veranderen ook de cursor van de grotere cirkel met behulp van stage.container (). style.cursor wanneer de cursor in en uit de cirkel beweegt.
Een belangrijk ding dat je in gedachten moet houden, is dat je de trek() methode op de respectieve laag als de gebeurtenislisteners voor elke vorm resulteerden in een verandering van attributen zoals vulkleur, streekbreedte, enz. Anders zullen de veranderingen niet worden weerspiegeld op het canvas.
U hoeft niet één gebeurtenis tegelijk aan een vorm te binden. U kunt ook een door ruimte begrensde reeks met meerdere gebeurtenistypes doorgeven aan de op() methode. Hiermee worden alle gebeurtenissen in de reeks gebonden aan die specifieke vorm.
Konva ondersteunt ook bijbehorende mobiele versies van al deze evenementen. U kunt zich bijvoorbeeld registreren touchstart, touchmove, touchend, tik, dbltap, dragstart, dragmove, en dragend Konva gebruiken op mobiele apparaten.
U kunt ook een van deze gebeurtenissen voor een bepaalde vorm of vormen activeren met behulp van de brand() methode. Op dezelfde manier kun je met Konva aangepaste evenementen maken zoals stenen gooien.
U kunt eventuele gebeurtenislisteners die aan een vorm zijn gekoppeld verwijderen met behulp van de uit() methode in Konva. U hoeft alleen de gebeurtenisnaam op te geven waarnaar u niet wilt luisteren.
U kunt ook meerdere gebeurtenisbindingen maken voor een enkele vorm. Laten we bijvoorbeeld zeggen dat u een cirkel hebt en dat u de straal van de cirkel wilt vergroten telkens wanneer de muisaanwijzer eroverheen gaat, tot een bepaalde limiet. U kunt ook de vulkleur van de cirkel op elke afbeelding wijzigen mouseover evenement.
Een optie is om beide taken in een single te doen mouseover gebeurtenislistener en stop later met het bijwerken van de straal. Een andere optie is om er twee te maken mouseover gebeurtenisluisteraars met verschillende naamruimten om ze te identificeren. Op deze manier kunt u de radius vergroten en de vulkleur onafhankelijk wijzigen.
circA.on ("mouseover.radius", function () var curRadius = circA.radius (); if (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(); );Houd er rekening mee dat ik heb toegevoegd layerA.draw () in beide luisteraars. Als u het niet kunt toevoegen in de mouseover.fillcolor luisteraar, de kleur stopt met updaten zodra de straal 150 wordt.
In plaats van één gebeurtenislistener per keer te verwijderen, kunt u ook stoppen met luisteren naar alle gebeurtenissen die zijn gebonden aan een vorm met behulp van de setListening () methode. Je kunt slagen waar en vals om deze methode te gebruiken om gebeurtenislisteners te maken op en uit. Houd er rekening mee dat u ook de hitgrafiek van de betreffende laag opnieuw moet tekenen door de drawHit () methode meteen nadat u belt setListening ().
In plaats van gebeurtenissen rechtstreeks aan alle vormen in een laag te binden, kunt u een gebeurtenis ook aan de laag zelf binden. Hierna kunt u bepalen welke vorm de gebeurtenis heeft geactiveerd met behulp van de doelwit eigenschap van het gebeurtenisobject. Op deze manier kunt u met Konva evenementen van de ouder effectief overdragen aan zijn kinderen.
Stel dat u luistert naar klikgebeurtenissen op een cirkel die op een laag in Konva is getekend. Dezelfde klikgebeurtenis propageert zowel naar de bevattende groep als de bevattende laag. Dit kan al dan niet het beoogde gedrag zijn. Als u wilt voorkomen dat de gebeurtenis binnen een vorm omhoog borrelt naar de bevattende laag, kunt u de cancelBubble eigenschap voor het gebeurtenisobject aan waar.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var circA = nieuwe Konva.Circle (x: 300, y: 200, height: 100, fill: "orange", stroke: "black", name: "Orange Circle"); var starA = nieuwe Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotation: 90, fill: "blue", stroke: "black", name: "Blue Star"); var ringA = nieuwe Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, fill: "brown", stroke: "black", name: "Brown Ring"); var textA = new Konva.Text (text: "", fontFamily: "Calibri", fontSize: 24, fill: "black", x: 10, y: 10); layerA.add (circA, starA, ringA, textA); stage.add (layerA); layerA.on ("klik", functie (e) var shapeName = e.target.attrs.name; textA.setText (shapeName); layerA.draw ();); Ik heb de naam eigenschap om een naam toe te wijzen aan elk van onze vormen. De setText () methode wordt dan gebruikt om de tekst erin te veranderen Texta naar de naam van de vorm waarop we zojuist hebben geklikt.
In het bovenstaande voorbeeld registreerde de ring een klik toen de klik tussen de binnenste en buitenste cirkel plaatsvond. Wat als u de klik in de kleinere cirkel ook wilt registreren? Met Konva kunt u aangepaste hitregio's definiëren met behulp van de hitFunc eigendom. Deze eigenschap accepteert een functie als waarde en deze functie wordt gebruikt om de aangepaste trefferregio te tekenen.
In het volgende voorbeeld ziet u hoe u aangepaste hitregio's maakt. U moet nu in het gebied tussen de sterpunten kunnen klikken en toch een klik registreren. Met behulp van aangepaste hitregio's kunt u ervoor zorgen dat uw gebruikers niet op exacte locaties hoeven te klikken om een klikgebeurtenis te registreren. Dit kan resulteren in een betere gebruikerservaring bij het omgaan met kleinere of meer complexe vormen.
var starA = nieuwe Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotation: 90, fill: "blue", stroke: "black", name: "Blue Star", hitFunc: functie (context) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this); ); var ringA = nieuwe Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, fill: "brown", stroke: "black", name: "Brown Ring", hitFunc: function (context) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this););
In deze zelfstudie hebben we verschillende mobiele en desktopevents besproken die u in Konva aan elke vorm kunt binden. U kunt deze gebeurtenissen één voor één koppelen of veel ervan tegelijk. Konva biedt u ook de mogelijkheid om uw eigen aangepaste gebeurtenissen programmatisch af te vuren met behulp van de brand() methode. In het laatste deel van de zelfstudie werd uitgelegd hoe u uw eigen hitregio's definieerde om hits te detecteren in een gebied dat groter of kleiner kon zijn dan de oorspronkelijke vorm.
Door de kennis van deze tutorial met anderen in de serie te combineren, zou u nu een verscheidenheid aan vormen op het canvas moeten kunnen tekenen en uw gebruikers met hen kunnen laten communiceren..
.
