Share
Om du har följt denna serie från början bör du nu vara väldigt bekväm med former, grupper och lager. Du borde också enkelt kunna rita några grundläggande och komplexa former på duken med Konva. Om du planerar att använda Konva för att skapa en del interaktiva appar eller spel, är det lärande att binda händelser till olika former på scenen nästa logiska steg.
I denna handledning lär du dig att binda händelser till någon form med Konva. Du kommer också att lära dig om evenemangsdelegation och förökning. Ibland behöver du kanske styra hitområdet i en form samt brandhändelser programmatiskt. Vi kommer också att diskutera dessa två ämnen.
Du kan binda olika händelser till någon form skapad med hjälp av Konva med hjälp av på() metod. Allt du behöver göra är att skicka händelsens namn som den första parametern och den funktion som ska utföras när händelsen inträffar som den andra parametern. Du kan använda Konva för att upptäcka mouseup, mousedown, mouseenter, mouseleave, mouseover, mouse, klick, och dblclick. Dessutom kan Konva du upptäcka hjul, dragstart, dragmove, och dragend evenemang.
Här är ett exempel som upptäcker mousedown och mouseleave händelser på en vanlig polygon (hexagon). På samma sätt är den mindre cirkeln bunden till mouseover och mouseup händelser och den större cirkeln är bunden till mouseenter, mouseleave, och mouse evenemang.
Accentsconagua
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var polyA = ny Konva.RegularPolygon (x: 125, y: 125, sidor: 6, rad: 80, fyll: "gul", stroke: "svart", strokevidde: 5); var circA = ny Konva.Circle (x: 275, y: 225, höjd: 100, fyll: "orange", stroke: "svart"); var cirB = ny Konva.Circle (x: 475, y: 275, radie: 100, fyll: "röd", stroke: "svart"); skiktA.add (polyA, circA, circB); stage.add (layerA); polyA.on ("mousedown", funktion () polyA.sides (polyA.sides () + 1); lagerA.draw ();); polyA.on ("mouseleave", funktion () var totalSides = polyA.sides (); om (totalSides> 3) polyA.sides (polyA.sides () - 1); layerA.draw ();) ; circA.on ("mouseover", funktion () circA.strokeWidth (10); lagA.draw ();); circA.on ("mouseup", funktion () circA.strokeWidth (5); lagA.draw ();); circB.on ("mouseenter", funktion () stage.container (). style.cursor = "crosshair";); circB.on ("mouseleave", funktion () stage.container (). style.cursor = "default";); circB.on ("mousemove", funktion () var pointerPos = stage.getPointerPosition (); var r = pointerPos.x% 255; var g = pointerPos.y% 255; circB.fill ("rgb (" + r + "," + g + ", 100)"); lagA.draw ();); Om en användare trycker på någon musknapp medan markören är inne i den vanliga polygonen ökar vi antalet sidor av polygonen med 1. Den sidor() Metoden kan användas utan en parameter för att få antalet sidor för en polygon eller användas med en parameter för att ställa in antalet sidor för en polygon. Du kan också få antalet sidor med getSides () och ställ in antal sidor med setSides (). Polygonens sidor reduceras med en närhelst muspekaren lämnar polygonen.
För den mindre cirkeln, den mouseover händelse används för att ställa in strokebreddsvärdet till 10. Den mouseup händelse ändrar strokebreddsvärdet till 5. Tänk på att mouseup händelse måste inträffa i själva cirkeln. Streckbredden kommer till exempel inte att ändras till 5 om du trycker på musknappen inuti cirkeln och släpper den först efter att markören ligger utanför cirkeln.
När det gäller den större cirkeln använder vi mouse händelse för att ändra dess fylla Färg. Vi ändrar också markören i den större cirkeln med stage.container (). style.cursor när markören rör sig in och ut ur cirkeln.
En viktig sak som du bör tänka på är att du måste ringa dra() metod på respektive lager om händelselyttarna för någon form resulterade i en förändring av attribut som fyllfärg, slagbredd etc. Annars kommer ändringarna inte att återspeglas på duken.
Du behöver inte binda en händelse åt gången till en form. Du kan också passera i en avgränsad sträng som innehåller flera händelse typer till på() metod. Detta binder alla händelser som anges i strängen till den specifika formen.
Konva stöder också motsvarande mobila versioner av alla dessa händelser. Till exempel kan du registrera dig touchstart, touchmove, touchend, kran, dbltap, dragstart, dragmove, och dragend använder Konva på mobila enheter.
Du kan också avfyra någon av dessa händelser för en viss form eller former med hjälp av brand() metod. På samma sätt tillåter Konva dig att skjuta anpassade händelser som kasta stenar.
Du kan ta bort eventuella händelysare som bifogas en form med hjälp av av() metod i Konva. Du måste bara ange händelsens namn som du inte vill lyssna på.
Du kan också skapa flera händelsebindningar för en enda form. Låt oss till exempel säga att du har en cirkel och du vill öka cirkelns radie varje gång muspekaren går över den, upp till en viss gräns. Du kanske också vill ändra cirkelens fyllfärg på varje mouseover händelse.
Ett alternativ är att göra båda dessa uppgifter inom en enda mouseover händelse lyssnare och sluta uppdatera radien senare. Ett annat alternativ är att skapa två mouseover händelse lyssnare med olika namnområden för att identifiera dem. På så sätt kan du öka radien och ändra fyllfärgen självständigt.
circA.on ("mouseover.radius", funktion () var curRadius = circA.radius (); om (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(); );Du bör notera att jag har lagt till layerA.draw () inuti båda lyssnare. Om du misslyckas med att lägga till den inuti mouseover.fillcolor lyssnaren kommer färgen att sluta uppdateras så snart radien blir 150.
I stället för att ta bort en händelse lyssnare åt gången kan du också sluta lyssna på alla händelser som är bundna till en form med hjälp av setListening () metod. Du kan passera Sann och falsk till denna metod för att vända händelse lyssnare på och av. Tänk på att du också måste skriva om träffgrafen för det drabbade lagret genom att ringa drawHit () metod direkt efter att du ringer setListening ().
I stället för att binda händelser direkt till alla former som finns på ett lager, kan du också binda en händelse till själva lagret. Därefter kan du bestämma vilken form som utlöst händelsen med hjälp av mål egenskapen för händelseobjektet. På så sätt kan Konva effektivt delegera händelser från föräldern till sina barn.
Låt oss säga att du lyssnar på att klicka på händelser i en cirkel ritad på ett lager i Konva. Samma klickhändelse sprids till den innehållande gruppen samt det innehållande skiktet. Detta kan eller inte är det avsedda beteendet. Om du vill förhindra att händelsen bubblar upp i en form till det innehållande lagret, kan du ställa in cancelBubble egendom för händelseobjektet till Sann.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var circA = ny Konva.Circle (x: 300, y: 200, höjd: 100, fyll: "orange", slag: "svart", namn: "Orange Circle"); var starA = ny Konva.Star (x: 125, y: 125, innerRadius: 25, yttreRadius: 75, rotation: 90, fyll: "blå", stroke: "svart", namn: "Blue Star"); var ringA = ny Konva.Ring (x: 475, y: 275, innerRadius: 25, yttreRadius: 75, fyll: "brun", stroke: "svart", namn: "Brown Ring"); var textA = ny Konva.Text (text: "", fontFamily: "Calibri", fontSize: 24, fyll: "svart", x: 10, y: 10); layerA.add (circA, starA, ringA, textA); stage.add (layerA); layerA.on ("click", funktion (e) var shapeName = e.target.attrs.name; textA.setText (shapeName); layerA.draw ();); Jag har använt namn egenskap för att tilldela ett namn till var och en av våra former. De setText () Metoden används sedan för att ändra texten inuti Texta till namnet på formen vi bara klickade på.
I ovanstående exempel registrerade ringen ett klick på det när klicket inträffade mellan inre och yttre cirkeln. Vad händer om du vill registrera klicket inuti den mindre cirkeln? Konva kan du definiera anpassade träffregioner med hjälp av hitFunc fast egendom. Den här egenskapen accepterar en funktion som dess värde, och den här funktionen används för att rita den anpassade träffregionen.
I följande exempel visas hur du skapar anpassade träffområden. Du borde nu kunna klicka i området mellan stjärnpiggarna och registrera ett klick. Med hjälp av anpassade träffregioner kan du se till att dina användare inte behöver klicka på exakta platser för att registrera ett klickhändelse. Detta kan leda till en bättre användarupplevelse när det gäller mindre eller mer komplexa former.
var starA = ny Konva.Star (x: 125, y: 125, innerRadius: 25, yttreRadius: 75, rotation: 90, fyll: "blå", stroke: "svart", namn: "Blue Star", hitFunc: funktion (context) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this); ); var ringA = ny Konva.Ring (x: 475, y: 275, innerRadius: 25, yttreRadius: 75, fyll: "brun", stroke: "svart", namn: "Brown Ring", hitFunc: funktion context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this););
I den här handledningen har vi täckt olika mobila och stationära händelser som du kan binda till någon form i Konva. Du kan bifoga dessa händelser en i taget eller många av dem samtidigt. Konva tillåter dig också att skjuta dina egna anpassade händelser programmatiskt med hjälp av brand() metod. Den sista delen av handledningen visade dig hur du definierar dina egna träffområden för att upptäcka träffar på ett område som kan vara större eller mindre än den ursprungliga formen.
Kombinera kunskapen om denna handledning med andra i serien, bör du nu kunna dra en mängd olika former på duken och låta dina användare interagera med dem.
.
