Share
I min forrige veiledning dekket jeg installasjonsprosessen og prosjekthierarkiet i Paper.js. Denne gangen vil jeg lære deg om stier, segmenter og deres manipulasjon. Dette gjør at du kan lage komplekse figurer ved hjelp av biblioteket. Etter det vil jeg gjerne dekke noen grunnleggende geometriske prinsipper som Paper.js er basert på.
Stier i Paper.js er representert av en sekvens av segmenter som er forbundet med kurver. Et segment er i utgangspunktet a punkt og sine to håndtak, som definerer kurvens plassering og retning. Ikke definere segmenthåndtak resulterer i rette linjer i stedet for kurver.
Når du definerer en ny bane ved hjelp av ny sti () konstruktør, kan du legge til segmenter med det ved hjelp av path.add (segment) funksjon. Siden denne funksjonen støtter flere argumenter, kan du også legge til mange segmenter samtidig. La oss si at du vil sette inn et nytt segment i en bestemt indeks innenfor en eksisterende bane. Du kan gjøre det ved å bruke path.insert (indeks, segment) funksjon. På samme måte, for å fjerne et segment på en bestemt indeks, kan du bruke path.removeSegment (indeks) funksjon. Begge disse funksjonene bruker nullbasert indeksering. Dette innebærer at du bruker path.removeSegment (3) vil fjerne det fjerde segmentet. Du kan lukke alle banene du tegner med path.closed eiendom. Den kommer til å bli med i den første og siste delen av banen sammen.
Til nå hadde alle våre stier rette linjer. Hvis du vil lage buede baner uten å spesifisere håndtak for hvert segment, kan du bruke path.smooth () funksjon. Denne funksjonen beregner de optimale verdiene for håndtak av alle segmentene i en bane på en slik måte at kurven som går gjennom dem, er jevn. Segmentene selv endrer ikke plasseringen, og hvis du har angitt håndteringsverdier for noen av segmentene, blir disse verdiene ignorert. Koden nedenfor bruker alle funksjonene og egenskapene vi diskuterte for å lage fire baner, hvorav to er buede.
var aPath = ny sti (); aPath.add (nytt punkt (30, 60)); aPath.add (nytt punkt (100, 200)); aPath.add (nytt punkt (300, 280), nytt punkt (280, 40)); aPath.insert (3, nytt punkt (180, 110)); aPath.fullySelected = 'true'; aPath.closed = true; var bPath = aPath.clone (); bPath.smooth (); bPath.position.x + = 400; var cPath = aPath.clone (); cPath.position.y + = 350; cPath.removeSegment (3); var dPath = bPath.clone (); dPath.strokeColor = 'green'; dPath.position.y + = 350; dPath.removeSegment (3);
Først oppretter vi en ny bane og legger til segmenter i den. Ved hjelp av path.insert (3, nytt punkt (180, 110)) setter inn et nytt segment i stedet for den fjerde og beveger det fjerde segmentet til den femte posisjonen. Jeg har satt fullySelected til ekte for å vise deg alle poeng og håndterer for hver kurve. For den andre banen har jeg brukt path.smooth () funksjon for å gjøre kurven jevn. Fjerner det fjerde segmentet ved hjelp av cPath.removeSegment (3) gir oss vår opprinnelige form uten indeksbaserte innsettinger. Du kan bekrefte dette ved å kommentere aPath.insert (3, nytt punkt (180, 110)); i denne CodePen-demoen. Dette er det endelige resultatet av alle våre manipulasjoner frem til dette punktet:
Paper.js støtter noen grunnleggende former ut av boksen. For eksempel, for å lage en sirkel, kan du bare bruke ny sti.krets (senter, radius) konstruktør. På samme måte kan du bruke ny vei.Rektangel (rekt) konstruktør for å lage et rektangel. Du kan enten angi toppene til venstre og nederst til høyre eller angi det øverste venstre hjørnet og rektangelens størrelse. For å tegne et rektangel med avrundede hjørner, kan du bruke Ny sti.RoundedRectangle (rekt, størrelse) konstruktør hvor størrelsesparameteren bestemmer størrelsen på avrundede hjørner.
Hvis du vil lage en n-sidig vanlig polygon, kan du gjøre det ved å bruke ny vei.RegulærPolygon (senter, numSides, radius) konstruktør. Parameteren senter bestemmer midten av polygonen, og radius bestemmer radiusen til polygonen vår.
Koden nedenfor vil generere alle former som vi nettopp har diskutert.
var aCircle = ny Path.Circle (nytt punkt (75, 75), 60); aCircle.strokeColor = 'black'; var aRectangle = nytt Path.Rectangle (nytt punkt (200, 15), nytt punkt (400, 135)); aRectangle.strokeColor = 'oransje'; var bRectangle = nytt Path.Rectangle (nytt punkt (80, 215), ny størrelse (400, 135)); bRectangle.strokeColor = 'blue'; var myRectangle = nytt rektangel (nytt punkt (450, 30), nytt punkt (720, 170)); var cornerSize = ny størrelse (10, 60); var cRectangle = ny Path.RoundRectangle (myRectangle, cornerSize); cRectangle.fillColor = 'lysegrønn'; var aTriangle = ny Path.RegularPolygon (nytt punkt (120, 500), 3, 110); aTriangle.fillColor = '#FFDDBB'; aTriangle.selected = true; var aDodecagon = ny Path.RegularPolygon (nytt punkt (460, 490), 12, 100); aDodecagon.fillColor = '#CCAAFC'; aDodecagon.selected = true;
Det første rektangelet vi lager, er basert på koordinatpoeng. Den neste bruker det første punktet til å bestemme det øverste venstre hjørnet av rektangelet, og bruker deretter størrelsesverdien til å plotte resten av punktene. I det tredje rektangel har vi i tillegg spesifisert en radius for vårt rektangel. Den første radiusparameteren bestemmer den horisontale krøllingen, og den andre parameteren bestemmer den vertikale krumningen.
De to siste formene bruker bare RegularPolygon konstruktør for å lage en trekant og en dodecagon. Den innebygde demoen nedenfor viser resultatet av vår kode.
Det er to måter å lage en sirkel på. Den første er å skape mange segmenter uten håndtak og plassere dem tett sammen. På denne måten, selv om de vil være forbundet med en rett linje, vil den generelle formen fortsatt være nærmere en sirkel. Den andre måten er å bruke bare fire segmenter med passende verdier for håndtakene sine. Dette kan spare mye minne og gi oss fortsatt de ønskede resultatene.
Mesteparten av tiden kan vi fjerne ganske få segmenter fra en sti uten signifikante endringer i form. Biblioteket gir en enkel path.simplify ([toleranse]) funksjon for å oppnå dette resultatet. Toleranseparameteren er valgfri. Det brukes til å spesifisere den maksimale avstanden som banforenklingsalgoritmen kan avvike fra den opprinnelige banen. Den er satt til 2,5 som standard. Hvis du setter parameteren til en høyere verdi, vil den endelige kurven være litt jevnere, med færre segmentpoeng, men avviket kan være betydelig. Tilsvarende vil en lavere verdi resultere i svært lite avvik, men inkluderer mange flere segmenter.
Du kan også konvertere kurvene i en bane til rette linjer ved hjelp av path.flatten (maxDistance) funksjon. Mens du flater en bane, forsøker biblioteket å holde avstanden mellom segmentene så nært som maxDistance som mulig.
var aPolygon = ny Path.RegularPolygon (nytt punkt (140, 140), 800, 120); aPolygon.fillColor = '#CCAAFC'; aPolygon.selected = true; var bPolygon = aPolygon.clone (); bPolygon.fillColor = '#CCFCAA'; bPolygon.simplify (); var cPolygon = aPolygon.clone (); cPolygon.fillColor = '#FCAACC'; cPolygon.simplify (4); var dPolygon = bPolygon.clone (); dPolygon.fillColor = '#FCCCAA'; dPolygon.flatten (80);
I koden ovenfor skapte jeg først en polygon ved hjelp av RegularPolygon funksjon diskutert ovenfor. Jeg har med vilje satt valgt eiendom til ekte slik at alle segmentene fra disse stiene er synlige. Da klonte jeg den andre polygonen fra den første og brukte forenkle fungere på den. Dette reduserte antall segmenter til bare fem.
I den tredje polygonen har jeg satt toleranseparameteren til en høyere verdi. Dette reduserer ytterligere antall segmenter. Du kan se at alle stiene fortsatt har samme grunnleggende form. I den endelige banen har jeg brukt flate (maxDistance) Fungerer for å flette kurven vår. Algoritmen forsøker å holde formen så nær den opprinnelige som mulig samtidig som den respekterer maxDistance begrensning. Her er sluttresultatet:
Paper.js har noen grunnleggende datatyper som Punkt, Størrelse, og Rektangel å beskrive geometriske attributter av grafiske elementer. De er abstrakte representasjoner av geometriske verdier som plassering eller dimensjon. Et punkt beskriver bare en todimensjonal plassering, og størrelsen beskriver abstrakte dimensjoner i todimensjonalt rom. Rektangelet betyr her et område som er omgitt av det øverste venstre punktet, dets bredde og dets høyde. Det er forskjellig fra den rektangulære banen vi diskuterte tidligere. I motsetning til banen er det ikke et element. Du kan lese mer om dem alle i denne Paper.js-veiledningen.
Du kan utføre grunnleggende matematiske operasjoner-tillegg, subtraksjon, multiplikasjon og divisjon-på poeng og størrelser. Alle operasjonene nedenfor er gyldige:
var pointA = nytt punkt (20, 10); var punktB = punktA * 3; // x: 60, y: 30 var pointC = punktB - punktA; // x: 40, y: 20 var pointD = punktC + 30; // x: 70, y: 50 var pointE = punktD / 5; // x: 14, y: 10 var pointF = punktE * nytt punkt (3, 2); // x: 42, y: 20 // Du kan sjekke utgangen i konsollen for verifikasjonskonsoll.logg (punkt F);
I tillegg til disse grunnleggende operasjonene kan du også utføre noen avrundingsoperasjoner eller generere tilfeldige verdier for poeng og størrelser. Vurder følgende eksempler:
var punkt = nytt punkt (3,2, 4,7); var avrundet = point.round (); // x: 3, y: 5 var ceiled = point.ceil (); // x: 4, y: 5 var floored = punkt.floor (); // x: 3, y: 4 // Generer et tilfeldig punkt med x mellom 0 og 50 // og y mellom 0 og 40 var pointR = nytt punkt (50, 40) * Point.random (); // Generer en tilfeldig størrelse med bredde mellom 0 og 50 // og høyde mellom 0 og 40 var størrelseR = ny Størrelse (50, 40) * Size.random ();
De tilfeldig() funksjon genererer tilfeldige verdier mellom 0 og 1. Du kan multiplisere dem med a Punkt eller Størrelse gjenstand for passende verdi for å få de ønskede resultatene.
Dette konkluderer med grunnleggende matematikk som du trenger å være kjent med for å lage noe nyttig med Paper.js.
Etter å ha fulgt denne opplæringen, bør du kunne lage en rekke stier og former, flate kurver eller forenkle komplekse veier. Nå har du også en grunnleggende forståelse av ulike matematiske operasjoner som du kan utføre med Paper.js. Ved å kombinere alt du har lært i dette og den tidligere opplæringen av serien, bør du kunne lage komplekse polygoner på forskjellige lag og blande dem sammen. Du bør også kunne sette inn og fjerne segmenter fra en bane for å få en ønsket form.
Hvis du leter etter flere JavaScript-ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
Hvis du har spørsmål angående denne opplæringen, vennligst gi meg beskjed i kommentarene.
Accentsconagua