Komme i gang med Paper.js Prosjekter og elementer

Du kan eller kanskje ikke har hørt om Paper.js. Så, la oss begynne med spørsmålet: Hva er Paper.js? Det er et bibliotek som lar deg lage og jobbe med vektorgrafikk. Den offisielle nettsiden beskriver den som Swiss Army Knife of Vector Graphics Scripting. 

Til tross for at biblioteket har mye å tilby, er det lett å lære selv om du aldri har hørt om det før. I denne opplæringen begynner jeg med det aller grunnleggende i biblioteket og deretter videre til komplekse emner senere.

Bruke PaperScript

Det er to måter å bruke biblioteket på. Du kan bruke PaperScript, som er en utvidelse av JavaScript, og bidra til å få ting gjort litt raskere, eller du kan bare bruke vanlig gammel JavaScript.

PaperScript er bare det samme gamle JavaScript som du alltid har brukt. Det legger imidlertid til støtte for matematiske operatører for punkt og størrelse objekter. Det forenkler også installasjonen av hendelseshåndterere for Prosjekt, Utsikt, og mus Verktøy objekter. 

Når du laster inn PaperScript, må du bruke den vanlige skriptetiketten med type sett til "tekst / paperscript". Hvis du laster inn koden eksternt, må du også legge til en 

Bruk av JavaScript

Hvis du ikke er komfortabel med PaperScript, kan du også bruke JavaScript i prosjektene dine. Du må legge til noen flere linjer med kode hvis du bestemmer deg for å gjøre det på denne måten. Det første du må gjøre er å sjekke om DOM er klar fordi du ikke vil kunne jobbe med lerretet før det. Deretter kan du sette opp et prosjekt og en visning ved hjelp av papir gjenstand. Alle klassene og objektene i Paper.js vil nå kun være tilgjengelige via papir gjenstand. 

Som jeg påpekte tidligere, må du bruke matematiske funksjoner i stedet for operatører når du jobber med punkt og størrelse. Koden nedenfor viser alle disse forskjellene:

window.onload = function () var canvas = document.getElementById ('quad'); paper.setup (canvas); var sti = nytt papir.Path (); path.strokeColor = 'black'; var pointOne = nytt papir.Punkt (100, 20); var pointTwo = nytt papir.Punkt (-100, 100); var pointThree = new paper.Point (300, 30); path.moveTo (pointOne); path.lineTo (pointOne.add (pointTwo)); path.lineTo (pointTwo.add (pointThree)); path.lineTo (pointOne.add (pointThree)); path.closed = true; paper.view.draw (); 

Som det fremgår av kodestykket ovenfor, er det relativt enkelt å bruke PaperScript når du arbeider med Paper.js. Derfor vil alle eksemplene fra nå av være basert på PaperScript.

Prosjekt Hierarki

Hvis du noen gang har brukt et grafisk designprogram som Adobe Photoshop eller Illustrator, må du være kjent med begrepet lag. Hvert lag i disse programmene har sitt eget innhold som, når det kombineres med andre lag, skaper sluttresultatet. Lignende lag finnes også i Paper.js og kan nås med project.layers. 

I utgangspunktet har hvert prosjekt et enkelt lag som er tilgjengelig gjennom project.activeLayer. Eventuelle nye elementer du lager, legges til det aktive laget som barnet. Alle barna i et bestemt lag kan nås ved hjelp av layer.children Egenskapen til det aktive laget.

Det er flere måter å få tilgang til alle disse barna. Hvis du bare trenger tilgang til barnets første og siste barn, kan du bruke item.firstChild og item.lastChild henholdsvis. Du kan også tildele et bestemt navn til et hvilket som helst barn og deretter bruke det navnet for å få tilgang til det senere. La oss si et lag du jobber med, har rundt 30 barn. Det er ikke praktisk å gå over alle dem en etter en. Av denne grunn har biblioteket a layer.children.length eiendom som du kan bruke til å få totalt antall barn og deretter iterere over listen ved hjelp av a til sløyfe. 

Denne kodestykket gir tilgang til ulike barn som bruker alle egenskapene vi nettopp har diskutert:

var circleA = new Path.Circle (nytt punkt (45, 150), 45); varcirkelB = ny sti.cirkel (nytt punkt (110, 150), 20); varcirkelC = ny sti.cirkel (nytt punkt (165, 150), 35); var circleD = ny Path.Circle (nytt punkt (255, 150), 55); var circleE = ny Path.Circle (nytt punkt (375, 150), 65); varcirkelF = ny sti.cirkel (nytt punkt (475, 150), 35); circleC.name = 'GreenCircle'; project.activeLayer.firstChild.fillColor = 'oransje'; project.activeLayer.lastChild.fillColor = 'rosa'; project.activeLayer.children [1] .fillColor = 'purple'; project.activeLayer.children ['GreenCircle']. fillColor = 'lysegrønn'; for (var i = 3; i < 5; i++)  project.activeLayer.children[i].fillColor = 'tomato'; 

Den innebygde demoen nedenfor viser skriptet i handling. Du kan bekrefte at fargen på alle sirkler samsvarer med fargen som vi tilordnet dem i koden ovenfor.

Du kan også bruke item.parent Metode for å få tilgang til en forelders forelder, som item.children metode som du pleide å få tilgang til alle sine barn. Når du lager et nytt element, vil dets forelder alltid være det aktive laget av prosjektet. Det kan imidlertid endres ved å legge til elementet som et barn av en annen lag eller gruppe. 

Før jeg går videre, la meg forklare hva a gruppe faktisk er. Å være ærlig, begge lag og gruppe er veldig like. En viktig forskjell mellom disse to er at eventuelle nye elementer du oppretter automatisk legges til det aktive laget, men i tilfelle av en gruppe må du selv legge til elementene. 

Det er flere måter du kan legge til elementer i en gruppe. Du kan overføre et element med arrayer til gruppekonstruktøren, og de vil alle bli lagt til i gruppens item.children array. Hvis du vil legge til elementer i en gruppe når den er opprettet, kan du bruke item.addChild (pos) funksjon. Du kan også sette inn et barn på en bestemt indeks ved hjelp av item.insertChild (indeks, element) funksjon. 

Fjerne elementer er også like enkelt som å legge dem til. For å fjerne et element fra et prosjekt, kan du bruke item.remove () funksjon. Husk at dette ikke vil ødelegge varen, og det kan legges tilbake til prosjektet når som helst du vil. Hvis varen du fjernet hadde noen barn, vil alle barna bli fjernet også. Hva om du vil fjerne alle barna, men hold objektet intakt? Dette kan oppnås ved å bruke item.removeChildren () funksjon.

Forstå elementer

Begrepet punkt har dukket opp mer enn noen få ganger i opplæringen nå. Så hva er det? Alt som vises i et Paper.js-prosjekt er en punkt. Dette inkluderer lagene, baner, grupper, etc. Mens ulike elementer har egenskaper som er spesifikke for dem, er andre egenskaper gjeldende for dem alle.

Hvis du har til hensikt å skjule et element fra brukeren, kan du gjøre det ved å sette verdien item.visible til falsk. Du kan også klone noe element ved hjelp av item.clone () funksjon. Denne funksjonen returnerer det klonte elementet, som du kan lagre i en variabel og manipulere senere. Du kan også endre opaciteten til noe element ved hjelp av item.opacity eiendom. Enhver verdi mellom 0 og 1 vil gjøre varen gjennomsiktig.

Du kan også angi en blandemodus for noe element som bruker item.blendMode eiendom. Blendmodusen må bestås som en string. Biblioteket gir også en item.selected eiendom som, hvis satt til ekte, skaper en visuell oversikt over toppen av det elementet. Dette kan være ganske nyttig under feilsøking, da det lar deg se konstruksjonen av stier, individuelle segmentpoeng og avgrensede bokser av elementer.

Varetransformasjoner

Elementer kan enkelt skaleres, roteres eller flyttes i et Paper.js-prosjekt. I denne delen vil jeg dekke alle disse forandringene kort. 

For å endre posisjonen til en punkt, du kan bruke det item.position eiendom og still posisjonen til et nytt punkt. Hvis du vil flytte et element rundt, kan du gjøre det ved hjelp av += operatør.

Du kan også skalere alle elementer ved å bruke item.scale (skala) funksjon. Dette vil skalere objektet rundt midtpunktet. Du kan skala et element rundt et annet punkt ved å angi det som en andre parameter, som item.scale (skala, punkt). Videre lar biblioteket deg også å skille elementer forskjellig i vertikale og horisontale retninger ved å sende to tall som parametere, som item.scale (skalaX, skalaY).

Roterende gjenstander ligner på å skalere dem. Du kan bruke item.rotate (vinkel) funksjon for å rotere elementer rundt senteret. Vinkelen er spesifisert i grader, og rotasjon skjer i retning med urviseren. For å rotere et element rundt et bestemt punkt, kan du også sende et punkt som en andre parameter, som item.rotate (vinkel, punkt). 

Følgende kodestykke gjelder alle transformasjoner og manipulasjoner som vi bare diskuterte på tre forskjellige rektangler.

var rectA = ny Path.Rectangle (nytt punkt (250, 70), ny størrelse (120, 120)); rectA.fillColor = 'rosa'; var rectB = rectA.clone (); rectB.fillColor = 'purple'; rectB.position + = nytt punkt (80, 80); rectB.opacity = 0,6; rectB.blendMode = 'fargeforbrenning'; rectB.scale (1,5); rectB.rotate (45); var rectC = rectB.clone (); rectC.fillColor = 'lysegrønn'; rectC.position + = nytt punkt (-180, 0); rectC.blendMode = 'color-dodge'; rectC.scale (1,5);

Koden er ganske mye selvforklarende. Jeg klon rektangel B fra rektangel A, og rektangel B kjøper alle egenskapene til rektangel A. Det samme gjelder for rektangel B og C. 

Legg merke til at jeg har brukt += operatør som jeg diskuterte over for å flytte varene rundt. Denne operatøren flytter elementer i forhold til de gamle stillingene i stedet for å bruke absolutte verdier.

Demoen under viser deg det endelige resultatet etter alle disse transformasjonene. Du kan prøve forskjellige blandemoduser eller endre andre egenskaper i demoen for å se hvordan de påvirker sluttresultatet.

Siste tanker

Som jeg nevnte tidligere, er Paper.js lett å lære og lar deg lage vektorgrafik med letthet. Denne opplæringen dekket det grunnleggende som du trenger å vite for å jobbe med biblioteket. Snart vil vi publisere neste opplæring i serien, som vil diskutere stier og geometri i detalj. 

I mellomtiden er det viktig å merke seg at JavaScript har blitt et av de de facto språkene som fungerer på nettet. Det er ikke uten sine lærekurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.


Inntil da foreslår jeg at du lager noen grunnleggende demoer av oss selv og praktiserer det du har lært så langt. Hvis du har spørsmål angående denne opplæringen, gi meg beskjed i kommentarene.