Noțiuni de bază cu Paper.js Proiecte și elemente

Ați putea sau nu să fi auzit de Paper.js. Deci, să începem cu întrebarea: ce este Paper.js? Este o bibliotecă care vă permite să creați și să lucrați cu grafică vectorială. Site-ul oficial descrie acest lucru ca fiind cuțitul armatei elvețiene de Scripting Vector Graphics. 

În ciuda faptului că biblioteca are multe de oferit, este ușor de învățat, chiar dacă nu ați mai auzit de ea înainte. În acest tutorial voi începe cu foarte multe elemente de bază ale bibliotecii și apoi voi trece la subiecte complexe mai târziu.

Folosind PaperScript

Există două moduri de utilizare a bibliotecii. Puteți folosi PaperScript, care este o extensie a JavaScript-ului, și vă ajută să obțineți ceva mai repede, sau puteți folosi doar JavaScript obișnuit.

PaperScript este exact același vechi JavaScript pe care l-ați folosit întotdeauna. Cu toate acestea, acesta adaugă suport pentru operatorii matematici pentru punct și mărimea obiecte. De asemenea, simplifică instalarea dispozitivelor de gestionare a evenimentelor Proiect, Vedere, și mouse-ul Instrument obiecte. 

Când încărcați PaperScript, trebuie să utilizați eticheta de script obișnuită cu tipul setat la "text / paperscript". Dacă încărcați codul extern, trebuie să adăugați și a 

Utilizarea JavaScript

Dacă nu sunteți confortabil cu PaperScript, puteți utiliza, de asemenea, JavaScript în proiectele dvs. Va trebui să adăugați încă câteva linii de cod dacă decideți să faceți acest lucru în acest fel. Primul lucru pe care trebuie să-l faceți este să verificați dacă DOM-ul este gata pentru că nu veți putea să lucrați cu pânza înainte de asta. După aceasta, puteți seta un proiect și o vizualizare folosind hârtie obiect. Toate clasele și obiectele Paper.js vor fi acum accesibile numai prin intermediul hârtie obiect. 

Așa cum am subliniat mai devreme, va trebui să utilizați funcții Math în locul operatorilor atunci când lucrați cu Point and Size. Codul de mai jos ilustrează toate aceste diferențe:

window.onload = funcția () var canvas = document.getElementById ('quad'); paper.setup (pânză); var cale = hârtie nouă.Path (); path.strokeColor = 'negru'; var punctOne = hârtie nouă.Point (100, 20); var pointTwo = hârtie nouă.Point (-100, 100); var punctThree = hârtie nouă.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 (); 

După cum reiese din fragmentele de cod de mai sus, este relativ ușor să utilizați PaperScript atunci când lucrați cu Paper.js. Prin urmare, toate exemplele de acum încolo vor fi bazate pe PaperScript.

Ierarhia proiectului

Dacă ați folosit vreodată o aplicație grafică precum Adobe Photoshop sau Illustrator, trebuie să fiți familiarizați cu conceptul de straturi. Fiecare strat din aceste programe are propriul conținut care, combinat cu alte straturi, creează rezultatul final. Straturi similare există, de asemenea, în Paper.js și pot fi accesate utilizând project.layers. 

Inițial, fiecare proiect are un singur strat prin care este accesibil project.activeLayer. Orice elemente noi pe care le creați sunt adăugate în stratul activ în prezent ca copil. Toți copiii dintr-un anumit strat pot fi accesați utilizând layer.children proprietății stratului activ.

Există mai multe moduri de a accesa toți acești copii. Dacă aveți nevoie doar de acces la primul și ultimul copil al unui element, puteți folosi item.firstChild și item.lastChild respectiv. De asemenea, puteți atribui un anumit nume oricărui copil și apoi utilizați acest nume pentru al accesa mai târziu. Să presupunem că un strat pe care lucrați are aproximativ 30 de copii. Nu este practic să treci cu toții unul câte unul. Din acest motiv, biblioteca are un layer.children.length proprietate pe care o puteți utiliza pentru a obține numărul total de copii și apoi iterați pe listă folosind a pentru buclă. 

Acest fragment de cod accesează diferiți copii folosind toate proprietățile pe care le-am discutat:

var circleA = Calea noului Cale (noul punct (45, 150), 45); var circleB = Calea noului Cale (noul punct (110, 150), 20); var circleC = Calea noului Cale (noul punct (165, 150), 35); var circleD = Calea noului Cale (noul punct (255, 150), 55); var circleE = Calea noului Cale (noul punct (375, 150), 65); var circleF = Calea noului Cale (noul punct (475, 150), 35); cercC.name = 'GreenCircle'; project.activeLayer.firstChild.fillColor = 'portocaliu'; project.activeLayer.lastChild.fillColor = "roz"; project.activeLayer.children [1] .fillColor = 'violet'; project.activeLayer.children ['GreenCircle']. fillColor = 'lumină verde'; pentru (var i = 3; i < 5; i++)  project.activeLayer.children[i].fillColor = 'tomato'; 

Demo-ul încorporat de mai jos prezintă scenariul în acțiune. Puteți verifica dacă culoarea tuturor cercurilor corespunde culorii pe care le-am atribuit-o în codul de mai sus.

De asemenea, puteți utiliza funcția item.parent pentru a accesa părintele unui element, cum ar fi item.children metodă pe care ați folosit-o pentru a vă accesa toți copiii. Ori de câte ori creați un element nou, părintele său va fi întotdeauna stratul activ al proiectului. Cu toate acestea, acesta poate fi modificat adăugând elementul ca pe un altul strat sau grup. 

Înainte de a merge mai departe, permiteți-mi să vă explic ce grup este de fapt. Pentru a fi sincer, amândoi strat și grup sunt foarte asemănătoare. O diferență majoră între aceste două este că orice elemente noi pe care le creați sunt adăugate automat la stratul activ, dar în cazul unui grup, va trebui să adăugați elementele singure. 

Există mai multe moduri în care puteți adăuga elemente într-un grup. Puteți să trimiteți un element de tablouri către constructorul de grup și toate acestea vor fi adăugate la grupul de grupuri item.children matrice. Pentru a adăuga elemente unui grup odată ce a fost creat, puteți utiliza elementul item.addChild (element) funcţie. De asemenea, puteți insera un copil la un anumit index folosind item.insertChild (index, element) funcţie. 

Eliminarea articolelor este, de asemenea, la fel de ușor ca adăugarea lor. Pentru a elimina orice element dintr-un proiect, puteți utiliza funcția item.remove () funcţie. Rețineți că acest lucru nu va distruge elementul și poate fi adăugat înapoi la proiect ori de câte ori doriți. Dacă articolul pe care l-ați eliminat avea copii, toți copiii vor fi eliminați, de asemenea. Ce se întâmplă dacă doriți să eliminați toți copiii, dar să păstrați produsul intact? Acest lucru poate fi realizat prin utilizarea item.removeChildren () funcţie.

Înțelegerea elementelor

Termenul articol a apărut de mai multe ori în tutorial acum. Deci ce este? Tot ce apare într-un proiect Paper.js este un articol. Aceasta include straturi, căi, Grupuri, etc. În timp ce diferite obiecte au proprietăți specifice pentru ele, alte proprietăți sunt aplicabile tuturor.

Dacă intenționați să ascundeți un element de la utilizator, puteți face acest lucru setând valoarea item.visible la fals. De asemenea, puteți clona orice element folosind item.clone () funcţie. Această funcție returnează elementul clonat, pe care îl puteți stoca într-o variabilă și puteți manipula ulterior. De asemenea, puteți schimba opacitatea oricărui element utilizând item.opacity proprietate. Orice valoare între 0 și 1 va face obiectul translucid.

De asemenea, puteți seta un mod de amestecare pentru orice element utilizând item.blendMode proprietate. Modul de amestecare trebuie să fie trecut ca a şir. Biblioteca oferă de asemenea un item.selected proprietate care, dacă este setată Adevărat, creează un contur vizual pe partea de sus a acelui element. Acest lucru poate fi destul de util în timpul depanării deoarece vă permite să vedeți construcția de căi, puncte individuale de segment și casete de legare a elementelor.

Transformările postului

Elementele pot fi scalate, rotite sau deplasate cu ușurință într-un proiect Paper.js. În această secțiune, voi acoperi toate aceste transformări pe scurt. 

Pentru a schimba poziția unui articol, puteți folosi item.position proprietăți și să setați poziția într-un punct nou. Dacă doriți să mutați un element în jurul valorii de, puteți face acest lucru cu ajutorul += operator.

Puteți scala, de asemenea, orice element folosind item.scale (scala) funcţie. Aceasta va scala elementul în jurul punctului său central. Puteți scala un element în jurul unui alt punct, specificându-l ca un al doilea parametru, cum ar fi element.scale (scară, punct). În plus, biblioteca vă permite, de asemenea, să micșorați elementele în mod diferit în direcții orizontale și orizontale prin trecerea a două numere ca parametri, cum ar fi element.scale (scaleX, scaleY).

Elementele rotative sunt asemănătoare cu redimensionarea acestora. Puteți utiliza funcția item.rotate (unghi) pentru a roti elementele din jurul lor. Unghiul este specificat în grade, iar rotirea are loc în sensul acelor de ceasornic. Pentru a roti un element în jurul unui anumit punct, puteți trece și un punct ca al doilea parametru, cum ar fi item.rotate (unghi, punct). 

Următorul fragment de cod aplică toate transformările și manipulările pe care tocmai le-am discutat pe trei dreptunghiuri diferite.

var rectA = noul traseu de cale (noul punct (250, 70), noul dimensiune (120, 120)); rectA.fillColor = "roz"; var rectB = rectA.clone (); rectB.fillColor = 'violet'; rectB.position + = punct nou (80, 80); rectB.opacity = 0.6; rectB.blendMode = 'color-burn'; rectB.scale (1.5); rectB.rotate (45); var rectC = rectB.clone (); rectC.fillColor = 'lumină verde'; rectC.position + = punct nou (-180, 0); rectC.blendMode = 'color-dodge'; rectC.scale (1.5);

Codul este destul de explicabil. Clonez dreptunghiul B din dreptunghiul A, iar dreptunghiul B dobândește toate proprietățile dreptunghiului A. Același lucru este valabil pentru dreptunghiurile B și C. 

Rețineți că am folosit += operator pe care l-am discutat mai sus pentru a muta elementele în jur. Acest operator mișcă elemente relative la pozițiile lor vechi, în loc să utilizeze valori absolute.

Demo-ul de mai jos vă arată rezultatul final după toate aceste transformări. Puteți încerca diferite moduri de amestecare sau puteți schimba alte proprietăți în demo pentru a vedea cum afectează rezultatul final.

Gândurile finale

După cum am menționat mai devreme, Paper.js este ușor de învățat și vă permite să creați grafice vectoriale cu ușurință. Acest tutorial a acoperit foarte multe lucruri de bază pe care trebuie să le cunoașteți pentru a lucra cu biblioteca. În curând, vom publica următorul tutorial al seriei, care va dezbate în detaliu traiectoriile și geometria. 

Între timp, este important să rețineți că JavaScript a devenit una dintre limbile de facto de lucru pe web. Nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.


Până atunci, vă sugerez să creați câteva demo-uri de bază ale noastre și să faceți ceea ce ați învățat până acum. Dacă aveți întrebări legate de acest tutorial, anunțați-ne în comentarii.