Share
Panza HTML5 a fost susținută de toate browserele populare de mult timp. Puteți să-l utilizați pentru a desena grafică într-un browser cu ajutorul JavaScript-ului. Grafica care poate fi creată pe o gamă de pânză de la linii simple și forme la compoziții și animații de fotografie.
În această serie, veți afla despre o bibliotecă de pânză foarte utilă numită Konva. Puteți folosi Konva pentru a desena diferite forme pe pânză sau pe scenă. Printre altele, biblioteca vă permite să scalați, să rotiți și să animați toate aceste forme și să le atașați ascultătorilor de evenimente.
Acest tutorial se va concentra pe conceptele fundamentale ale bibliotecii, oferind în același timp o scurtă trecere în revistă a diferitelor caracteristici ale bibliotecii. După aceasta, vom trece mai departe la subiecte mai specifice și mai complexe. Biblioteca a luat ființă în primul rând ca o furculiță a bibliotecii populare KineticJS.
Tot ceea ce faceți cu Konva va cere să creați o scenă folosind Konva.Stage. Puteți specifica elementul container al unei etape folosind recipient atribut. Fiecare etapă necesită, de asemenea, o valoare de lățime și înălțime care poate fi specificată utilizând lăţime și înălţime atribute.
O singură etapă poate conține mai multe straturi. Fiecare dintre aceste straturi va avea două renderers. Redactorul de scenă este folosit pentru a desena toate formele care vă sunt vizibile pe scenă. Răsplata graficelor de lovituri este ascunsă de utilizatori. Acesta este folosit pentru a efectua detectarea evenimentelor de înaltă performanță.
Un singur strat poate conține mai multe forme, grupuri de forme diferite sau un grup de grupuri. Scena, straturile, grupurile și formele acționează ca niște noduri virtuale care pot fi personalizate și transformate.
Înainte de a crea orice formă, trebuie să includeți biblioteca în proiectul dvs. Există mai multe modalități de a face acest lucru. Dacă utilizați administratori de pachete, puteți executa următoarele comenzi.
npm instalare konva // SAU bower install konva
De asemenea, puteți să vă conectați direct la o versiune minimizată a bibliotecii găzduită pe cdnjs și jsDelivr.
Odată ce ați instalat biblioteca, puteți folosi următorul cod pentru a crea forme rectangulare pe panza.
var canvasWidth = 600; var canvasHeight = 400; vară etapă = nou Konva.Stage (container: "exemplu", lățime: canvasWidth, înălțime: canvasHeight); var stratul A = noul Konva.Layer (); var rectA = noul Konva.Rect (x: 75, y: 150, lățimea: 200, înălțimea: 50, rotația: 45, umplerea: "albastru", cursa: "negru", lățimea cursei: 4); var rectB = nou Konva.Rect (x: 350, y: 50, lățimea: 100, înălțimea: 250, cornerRadius: 50, umplere: "roșu", accident vascular cerebral: "maro", strokeWidth: 10); layerA.add (recta); layerA.add (rectB); stage.add (layerA);
Desenarea a ceva pe panza este un proces în cinci pași. În primul rând, trebuie să instanțiați o etapă în care ar fi desenate diferite forme Konva.Stage. Acest lucru vă cere să specificați lățimea și înălțimea scenei, precum și id pentru elementul container care ar conține etapa. În cazul nostru, dreptunghiurile sunt trase în interior div a caror id este exemplu.
În pasul următor, trebuie să instanțiați toate straturile pe care doriți să le redați pe scenă. În acest exemplu, creăm doar un singur strat, dar puteți crea mai multe straturi și le puteți adăuga într-o singură etapă. Straturile diferite pot fi foarte utile atunci când fundalul dvs. constă din elemente statice și în mișcare. În astfel de cazuri, puteți adăuga elementele statice pe un singur strat și elementele mutante pe celălalt. Deoarece nu trebuie să actualizați fundalul static după fiecare redirecționare, acest lucru poate îmbunătăți drastic performanța.
După crearea straturilor, puteți inițializa diferite forme, cum ar fi dreptunghiuri, elipse, stele și inele pe care doriți să le afișați pe straturi. În cele din urmă, trebuie să adăugați formele pe straturi și pe straturi pe scenă.
Gruparea de forme diferite împreună este o idee bună atunci când doriți să gestionați toate formele ca o singură unitate. De exemplu, să presupunem că ați creat o mașină folosind două cercuri pentru roți și două blocuri dreptunghiulare pentru corp. Dacă doriți să mutați această mașină înainte fără a crea un grup, va trebui să traduceți individual toate formele unul câte unul. O metodă mai eficientă este doar să adăugați cercurile și dreptunghiurile unui grup și să le traduceți simultan.
Pentru a adăuga orice formă la un grup, trebuie să utilizați adăuga() , la fel ca și când ați adăugat forme la un strat. De asemenea, puteți adăuga un grup unui alt grup pentru a crea entități mai complexe. De exemplu, puteți crea o persoană în interiorul mașinii ca un singur grup și puteți adăuga acea persoană la grupul care reprezintă mașina.
În următorul exemplu, am păstrat lucrurile simple și am creat doar o CARA grup. După asta, pot să rotesc și să scal întreg mașina imediat.
var canvasWidth = 600; var canvasHeight = 400; vară etapă = nou Konva.Stage (container: "exemplu", lățime: canvasWidth, înălțime: canvasHeight); var stratul A = noul Konva.Layer (); var rotativA = nou Konva.Ring (x: 130, y: 230, innerRadius: 5, outerRadius: 30, umplere: "gri", accident vascular cerebral: "negru", nume: "First Wheel"); var rotativB = nou Konva.Ring (x: 270, y: 230, innerRadius: 5, outerRadius: 30, umplere: "gri", accident vascular cerebral: "negru", nume: "Roata a doua"); var cadruA = nou Konva.Rect (x: 80, y: 150, lățimea: 240, înălțimea: 60, cornerRadius: 10, umplere: "roșu", accident vascular cerebral: "negru", nume: "Cadru inferior"); var frameB = nou Konva.Rect (x: 135, y: 90, lățimea: 120, înălțimea: 60, cornerRadius: 10, umpleți: "portocaliu", accident: "negru"; var carA = noua grupă Konva.Group (x: 50, y: 0, rotație: 20, scaleX: 1,2); carA.add (roată A, roatăB, cadruA, cadruB); layerA.add (CARA); stage.add (layerA);
Știți deja despre straturile din Konva. Layering-ul este ceva diferit. Implicit, toate formele pe care le adăugați la un strat sunt desenate în ordinea în care au fost adăugate. Aceasta înseamnă că formele adăugate unui strat după toate celelalte vor fi desenate pe lângă alte forme.
Konva vă permite să controlați ordinea în care sunt desenate formele folosind diferite metode de stratificare, cum ar fi moveToTop (), moveToBottom (), moveUp (), moveDown (), și zindex ().
moveToTop () metoda va desena forma dată peste toate celelalte forme care au fost adăugate la același strat. Forme desenate pe un strat care a fost adăugat la etapa Konva după stratul formei noastre specifice va rămâne încă deasupra formei noastre. Acesta este motivul pentru care cercul indigo din exemplul următor rămâne sub cercul verde deschis chiar și după apel moveToTop ().
moveToBottom () metoda va desena forma dată sub toate celelalte forme care au fost adăugate la același strat. Ca și cum moveToTop (), formele se vor muta în partea de jos a propriilor lor straturi și nu în straturile de sub ele.
moveUp () și moveDown () metode muta forma pe care sunt numite, o pozitie deasupra sau sub pozitia lor curenta in acelasi strat. zindex () metoda este utilizată pentru a seta indicele unei forme în interiorul stratului părinte. Spre deosebire de CSS, nu puteți seta un arbitrar zindex valoare în Konva. Pentru un strat cu 10 forme, zindex valoarea poate fi cuprinsă între 0 și 9 (inclusiv).
În exemplul de mai sus, puteți vedea că simpla apăsare a butonului "Indigo Top" nu desenează cercul indigo deasupra tuturor celorlalte, în timp ce apăsând "Indigo Above All Others" îl poziționați în partea de sus. Acest lucru se datorează faptului că ultimul buton deplasează de asemenea stratul care conține cercul indigo în partea de sus.
Deoarece cercurile pot fi trase în jurul valorii de, ar fi o idee bună să le trageți unul peste celălalt și să vedeți cum se schimbă poziția cercului indigo când apăsați diferite butoane.
Am abordat câteva concepte fundamentale legate de Konva în acest tutorial. Acum ar trebui să puteți desena câteva forme comune pe pânză și să le mutați în grup. Tutorialul vă arată, de asemenea, cum să împingeți o anumită formă în sus sau în jos în cazul unei suprapuneri.
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 disponibil pe Envato Market.
Dacă aveți întrebări legate de acest tutorial, nu ezitați să ne anunțați în comentarii. Următorul tutorial vă va învăța cum să desenați forme de bază în Konva.
Accentsconagua