Share
Hvis du har fulgt denne serien fra begynnelsen, bør du nå være veldig komfortabel med former, grupper og lag. Du bør også være i stand til enkelt å tegne noen grunnleggende og komplekse former på lerretet ved hjelp av Konva. Hvis du planlegger å bruke Konva til å lage noen interaktive apper eller spill, lærer du å binde hendelser til forskjellige former på scenen, er det neste logiske trinnet.
I denne opplæringen lærer du hvordan du binder hendelser til enhver form ved hjelp av Konva. Du vil også lære om hendelse delegering og forplantning. Noen ganger trenger du kanskje å styre hitregionen av en form samt brannhendelser programmert. Vi vil også diskutere disse to emnene.
Du kan binde forskjellige hendelser til enhver form som er opprettet ved hjelp av Konva ved hjelp av på() metode. Alt du trenger å gjøre er å sende navnet på hendelsen som den første parameteren og funksjonen som skal utføres når hendelsen oppstår som den andre parameteren. Du kan bruke Konva til å oppdage mouseup, mousedown, mouseenter, mouseleave, mus over, mousemove, klikk, og DblClick. I tillegg tillater Konva deg å oppdage hjul, dragstart, dragmove, og dragend arrangementer.
Her er et eksempel som oppdager mousedown og mouseleave hendelser på en vanlig polygon (sekskant). På samme måte er den mindre sirkelen bundet til mus over og mouseup hendelser og større sirkel er bundet til mouseenter, mouseleave, og mousemove arrangementer.
Accentsconagua
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var polyA = ny Konva.RegularPolygon (x: 125, y: 125, sider: 6, radius: 80, fyll: "gul", strekk: "svart", strekkbredde: 5); var circA = ny Konva.Circle (x: 275, y: 225, høyde: 100, fyll: "oransje", strekk: "svart"); var circB = ny Konva.Circle (x: 475, y: 275, radius: 100, fyll: "rød", strekk: "svart"); layerA.add (polyA, circA, circB); stage.add (layerA); polyA.on ("mousedown", funksjon () polyA.sides (polyA.sides () + 1); layerA.draw ();); polyA.on ("mouseleave", funksjon () var totalSides = polyA.sides (); if (totalSides> 3) polyA.sides (polyA.sides () - 1); layerA.draw ();) ; circA.on ("mouseover", funksjon () sirkA.strokeWidth (10); layerA.draw ();); circA.on ("mouseup", funksjon () circA.strokeWidth (5); lagA.draw ();); circB.on ("mouseenter", funksjon () stage.container (). style.cursor = "crosshair";); circB.on ("mouseleave", funksjon () stage.container (). style.cursor = "default";); circB.on ("mousemove", funksjon () var pointerPos = stage.getPointerPosition (); var r = pointerPos.x% 255; var g = pointerPos.y% 255; circB.fill ("rgb (" + r + "," + g + ", 100)"); lagA.draw ();); Hvis en bruker trykker på en hvilken som helst museknapp mens markøren er inne i den vanlige polygonen, øker vi antall sider av polygonen med 1. Den sider() Metoden kan brukes uten en parameter for å få antall sider for en polygon eller brukt med en parameter for å angi antall sider for en polygon. Du kan også få antall sider ved å bruke getSides () og sett antall sider ved hjelp av setSides (). Polygonens sider reduseres med en når musemarkøren forlater polygonen.
For den mindre sirkelen, den mus over Hendelsen brukes til å sette slagbreddeverdien til 10. Den mouseup Hendelsen endrer strekkbreddeverdien til 5. Husk at mouseup hendelsen må forekomme inne i selve sirkelen. For eksempel vil strekkbredden ikke endres til 5 hvis du trykker på museknappen inne i sirkelen og deretter slipper den bare etter at markøren er utenfor sirkelen.
I tilfelle av større sirkel bruker vi mousemove arrangement for å endre sin fylle farge. Vi endrer også markøren til den større sirkelen ved hjelp av stage.container (). style.cursor når markøren beveger seg inn og ut av sirkelen.
En viktig ting du bør huske på er at du må ringe tegne() metode på det respektive laget hvis hendelseslytterne for en hvilken som helst form resulterte i endring av attributter som fyllfarge, strekkbredde osv. Ellers vil endringene ikke reflekteres på lerretet.
Du trenger ikke å binde en hendelse av gangen til en form. Du kan også passere i en mellomromavgrenset streng som inneholder flere hendelsestyper til på() metode. Dette vil binde alle hendelsene som er oppført i strengen til den aktuelle formen.
Konva støtter også tilsvarende mobile versjoner av alle disse hendelsene. For eksempel kan du registrere deg touchstart, touchmove, touchend, springen, dbltap, dragstart, dragmove, og dragend bruker Konva på mobile enheter.
Du kan også skyte noen av disse hendelsene for en bestemt form eller figurer ved hjelp av Brann() metode. På samme måte lar Konva deg å brenne tilpassede arrangementer som throwStones.
Du kan fjerne eventuelle hørere som er festet til en form ved hjelp av av() metode i Konva. Du må bare angi hendelsesnavnet du ikke vil lytte til.
Du kan også opprette flere hendelsesbindinger for en enkelt form. For eksempel, la oss si at du har en sirkel, og du vil øke radiusen til sirkelen hver gang musemarkøren går over den, opp til en viss grense. Du vil kanskje også endre fyllefargen på sirkelen på hver mus over begivenhet.
Ett alternativ er å gjøre begge disse oppgavene i en enkelt mus over hendelseslytter og slutte å oppdatere radius senere. Et annet alternativ er å lage to mus over Hendelseslyttere med forskjellige navneområder for å identifisere dem. På denne måten vil du kunne øke radius og endre fyllfarge uavhengig.
circA.on ("mouseover.radius", funksjon () var curRadius = circA.radius (); hvis (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 merke at jeg har lagt til layerA.draw () inne i begge lytterne. Hvis du mislykkes i å legge det inn i mouseover.fillcolor lytter, fargen vil slutte å oppdatere så snart radiusen blir 150.
I stedet for å fjerne en hendelseslytter på en gang, kan du også slutte å lytte til alle hendelser som er bundet til en form ved hjelp av setListening () metode. Du kan passere ekte og falsk til denne metoden for å slå hendelseslyttere på og av. Husk at du også må trekke hitgrafen for det berørte laget ved å ringe drawHit () metode rett etter at du ringer setListening ().
I stedet for å binde hendelser direkte til alle former som er tilstede på et lag, kan du også binde en hendelse til laget selv. Deretter kan du bestemme hvilken form som utløste hendelsen ved hjelp av mål egenskapen til hendelsesobjektet. På denne måten kan Konva effektivt delegere hendelser fra foreldrene til barna sine.
La oss si at du lytter til hendelser på en sirkel som er tegnet på et lag i Konva. Den samme klikkhendelsen forplanter seg til den inneholdende gruppen, så vel som det inneholdende lag. Dette kan eller ikke være den tiltenkte oppførselen. Hvis du vil forhindre at hendelsen bobler opp i en form til det inneholdende laget, kan du stille inn cancelBubble eiendom for hendelsesobjektet til ekte.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var circA = ny Konva.Circle (x: 300, y: 200, høyde: 100, fyll: "oransje", slag: "svart", navn: "Orange Circle"); var starA = ny Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotasjon: 90, fyll: "blå", slag: "svart", navn: "Blue Star"); var ringA = ny Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, fyll: "brown", slag: "svart", navn: "Brown Ring"); var textA = ny Konva.Text (text: "", fontFamily: "Calibri", fontSize: 24, fyll: "svart", x: 10, y: 10); lagA.add (sirkA, starA, ringA, tekstA); stage.add (layerA); layerA.on ("click", funksjon (e) var shapeName = e.target.attrs.name; textA.setText (shapeName); layerA.draw ();); Jeg har brukt Navn eiendom for å tildele navn til hver av våre former. De setText () Metoden brukes da til å endre teksten på innsiden tekstA til navnet på formen vi nettopp klikket på.
I eksemplet ovenfor registrerte ringen et klikk på det når klikket skjedde mellom indre og ytre sirkel. Hva om du ønsket å registrere klikk inne i mindre sirkel også? Konva lar deg definere tilpassede hitregioner ved hjelp av hitFunc eiendom. Denne egenskapen aksepterer en funksjon som verdi, og denne funksjonen brukes til å tegne den tilpassede hitregionen.
Følgende eksempel viser hvordan du oppretter tilpassede hitregioner. Du burde nå kunne klikke i området mellom stjernespydene og fortsatt registrere et klikk. Med hjelp av tilpassede hitregioner kan du forsikre deg om at brukerne ikke trenger å klikke på eksakte steder for å registrere et klikkhendelse. Dette kan resultere i en bedre brukeropplevelse når det gjelder mindre eller mer komplekse former.
var starA = ny Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotasjon: 90, fyll: "blå", slag: "svart", navn: "Blue Star", hitFunc: funksjon (kontekst) 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, outerRadius: 75, fyll: "brown", slag: "svart", navn: "Brown Ring", hitFunc: funksjon context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (dette););
I denne opplæringen har vi dekket ulike mobile og desktop-hendelser som du kan binde til noen form i Konva. Du kan legge ved disse hendelsene en om gangen eller mange av dem samtidig. Konva lar deg også brenne dine egne tilpassede arrangementer programmatisk ved hjelp av Brann() metode. Den siste delen av opplæringen viste deg hvordan du definerer dine egne hitregioner for å oppdage treff på et område som kan være større eller mindre enn den opprinnelige formen.
Kombinere kunnskapen om denne opplæringen med andre i serien, bør du nå kunne tegne en rekke former på lerretet og la brukerne samhandle med dem.
.
