Share
Etter å ha lest de to første veiledningene, bør du kunne lage stier og noen grunnleggende forhåndsdefinerte former. Du bør også kunne forenkle eller flate dine stier, samt tegne dem på forskjellige lag og blande dem sammen.
Selv om vi har kommet langt, er det fortsatt en ting mangler. Opptil dette punktet har det ikke vært noen interaksjon mellom lerretet og brukeren. Det ville være fint om vi kunne gi brukerne muligheten til å samhandle med ulike baner eller tegne noe alene. Denne opplæringen vil dekke alle grunnleggende om brukerinteraksjon, som starter med verktøy variabel.
Det er et globalt verktøy variabel som bare finnes i skript som inneholder handlerfunksjoner for å samhandle med enten musen eller tastaturet. Denne variabelen gir deg tilgang til egenskaper som minDistance, som er den minste avstanden hvoretter musen igjen kan brenne onMouseDrag hendelsen, siden den ble sist avfyrt. Tilsvarende eiendommen maxDistance lar deg angi maksimal avstand etter hvilken onMouseDrag arrangementet må brann igjen.
Paper.js har også a ToolEvent gjenstand. Det er en forlengelse av hendelsesobjektet og den eneste parameteren som overføres til alle hendelser for mushendelse. Den inneholder all relevant informasjon om disse museventilene som:
Accentsconagua
type, som forteller deg om hendelsen er mouseup, mousedown, mousemove eller mousedrag.punkt, som gir deg posisjonen til musen når hendelsen ble sparket.delta, som gir deg avstanden mellom nåværende og siste museposisjon når hendelsen ble avfyrt.telle, som gir deg antall ganger musen hendelsen ble sparket.punkt, som gir deg elementet som var tilstede på stedet for musen. Hvis varen er en del av a gruppe eller forbindelse sti da det øverste nivået av gruppe eller forbindelse banen returneres.lastPoint, som gir posisjonen til musen når hendelsen ble sist avfyrt.downpoint, som gir deg posisjonen til musen i prosjektkoordinater når den ble sist klikket.middlePoint, som gir deg poenget i midten av lastPoint og punkt. Du bør holde alle disse i tankene fordi de vil bli brukt ofte i de fleste av prosjektene dine.
Paper.js har ulike håndteringsfunksjoner som kalles automatisk for å håndtere ulike museventiler. De tre musen håndteringsfunksjonene er oppført nedenfor.
funksjon onMouseDown (event) // Gjør noe console.log ('Mouse pressed!'); funksjon onMouseDrag (event) // Gjør noe annet console.log ('Mouse dragged!'); funksjon onMouseUp (event) // Gjør noe console.log ('Mouse released!'); La oss lage en grunnleggende demo basert på onMouseDown og onMouseUp handlers. Hver gang en bruker trykker på en museknapp, vil vi opprette en ny Sti og merk det punktet som begynnelsen på vår Sti.
Hver gang brukeren slipper museknappen, legger vi til et nytt punkt som slutten av vår Sti. Dette vil skape en rett linje fra det punktet der museknappen ble trykket til det punktet hvor det ble utgitt. Her er koden:
var aPath; funksjon onMouseDown (hendelse) aPath = new path (); aPath.strokeColor = 'purple'; aPath.strokeWidth = event.point.x / 10; aPath.add (event.point); funksjon onMouseUp (event) aPath.add (event.point);
Jeg har også satt strokeColor til lilla og strokeWidth til en tiendedel av verdien av x-koordinat ved hjelp av event.point eiendom. Hvis du prøver å tegne noen vertikale linjer i det grå området under, vil du legge merke til at alle har en bredde som er direkte proporsjonal med avstanden fra venstre side.
La oss nå lage noen sirkler ved hjelp av onMouseDrag begivenhet. Hver gang en draghendelse blir sparket, trekker vi en sirkel med sitt midtpunkt i midtpunktet for det siste og nåværende drappunktet. Radius av sirkelen vil avhenge direkte av drahastigheten til brukeren.
For å finne sentrum av sirkelen, kan vi bruke middlePoint eiendom som vi diskuterte i forrige del. For å bestemme radiusen til sirkelen, kan vi bruke delta eiendom og del resultatet med 2. Her er koden vi trenger:
tool.maxDistance = 50; tool.minDistance = 4; funksjon onMouseDrag (event) varcirkel = ny Path.Circle (senter: event.middlePoint, radius: event.delta.length / 2); circle.fillColor = 'rosa'; circle.strokeColor = 'black';
Hvis brukeren skulle dra musen for raskt eller for sakte, ville sirklene bli for store eller for små.
Dette problemet kan løses ved å bruke maxDistance og minDistance eiendommer. Hvis brukeren drar for fort, vil maxDistance eiendom vil brenne dra hendelsen hver 50 piksler. Hvis brukerens drahastighet er for treg, vil den minDistance Eiendommen vil ikke bli avfyrt før minimumsgrenseverdien som vi oppgav er nådd. Du kan teste koden ovenfor ved å dra musen i det grå området under:
De begivenhet objektet har tre egenskaper som du kan bruke til samspill med tastaturet. De event.key egenskapen vil fortelle deg hvilken tast som ble trykket, og event.character eiendom vil fortelle deg tegnet som ble generert på nøkkelpress. For å avgjøre om det var en keyup eller keydown arrangement, kan du bruke event.type eiendom.
La oss bruke disse egenskapene sammen for å lage små sirkler og flytte dem rundt. Ta en titt på koden nedenfor:
var trinn = 10; var centerPoint = nytt punkt (100, 100); funksjon onKeyDown (event) var sirkel = ny Path.Circle (centerPoint, 3); circle.fillColor = 'rosa'; circle.strokeColor = 'black'; hvis (event.key == 'a') centerPoint - = nytt punkt (trinn, 0); // Kode for andre nøkler
Vi lager en variabel skritt som vil bli brukt til å bestemme hastigheten som sirkelen vår beveger seg rundt. Variabelen midtpunkt lagrer plasseringen av sentrum av våre kretser. De onkeydown Handler har koden til å håndtere alt keydown arrangementer. Denne hendelsen blir avbrutt kontinuerlig så lenge en nøkkel blir trykket.
Dette er grunnen til at nye kretser opprettes kontinuerlig. Basert på nøkkelpresset, endrer vi verdien av midtpunkt å flytte vår nyopprettede sirkel til en annen plassering. Du kan se koden i aksjon i demonstrasjonen nedenfor:
Noen nøkler, for eksempel Skifte nøkkel og Alternativ nøkkel, ikke produsere et tegn direkte når du trykker på det. Disse tastene kalles modifikasjonstaster. De begivenhet objektet har en event.modifiers egenskap som du kan bruke til å bestemme modifikatortasten som ble trykket. Vurder koden nedenfor:
var sti; funksjon onMouseDown (hendelse) path = new path (); path.strokeColor = 'black'; path.strokeWidth = 2; path.add (event.point); funksjon onMouseDrag (event) if (event.modifiers.shift) path.lastSegment.point = event.point; path.simplify (); annet path.add (event.point);
Når en bruker trykker på en museknapp, vil onMouseDown handler lager en ny sti og legger til et poeng til det. Etter at du begynner å dra, onMouseDrag handler legger til et nytt poeng til det på hver drakkhendelse.
Hvis du drar musen med Skifte tastetrykk, registrerer håndtereren det med event.modifiers.shift eiendom. I så fall, i stedet for å legge til et nytt punkt på hver drabegivenhet, setter den bare koordinatene til det siste segmentet til den nåværende plasseringen av musepekeren. Det forenkler også den komplette banen som ble tegnet. Du kan dra musen i det grå området under for å se hvordan stien oppfører seg når Skifte tasten er trykket.
Hvis Shift-tasten ikke ser ut til å fungere, er det sannsynligvis fordi lerretet ikke har fokus. I så fall bør du først klikke inn i det lille hvite rommet under lerretet for å gi det fokus.
Arrangementhåndtererne som vi diskuterte i dag dekker de mest vanlige interaktivitetsscenariene. Som det fremgår av opplæringen, er det ikke vanskelig å manipulere elementene i et lerret basert på brukerens handlinger. Den beste måten å lære på er å praktisere. Så jeg vil foreslå at du lager dine egne demoer som kombinerer alt du har lært i de tre opplæringsprogrammer opp til dette punktet.
Hvis du har spørsmål angående denne opplæringen, vennligst gi meg beskjed i kommentarene.
