Share
Tutorialul introductiv al seriei te-a invatat cum sa-ti desenezi prima forma folosind Konva. De asemenea, a explicat cum funcționează straturile și grupurile în Konva. În restul seriei, ne vom concentra pe subiecte mai specifice cum ar fi crearea de forme de bază și complexe sau atașarea ascultătorilor de evenimente la diferite forme pentru a vă face grafica interactivă.
Acest tutorial vă va arăta cum să creați forme de bază, cum ar fi dreptunghiuri, cercuri și elipse în Konva. De asemenea, veți afla despre diferite atribute care pot fi utilizate pentru a personaliza aspectul tuturor acestor forme pe baza nevoilor dvs. Secțiunile mai vechi ale tutorialului vor discuta cum să desenezi diferite tipuri de linii și poligoane regulate folosind Konva.
Puteți crea dreptunghiuri în Konva folosind Konva.rect () obiect. Poziția colțului din stânga sus al unui dreptunghi poate fi specificată utilizând X și y proprietăți. În mod similar, puteți specifica lățimea și înălțimea dreptunghiului folosind lăţime și înălţime proprietăți. Toate dreptunghiurile pe care le desenați vor avea colțuri ascuțite în mod implicit. Cu toate acestea, le puteți face rotunde prin alegerea unei valori adecvate pentru cornerRadius proprietate.
Este posibil să se afișeze sau să se ascundă un dreptunghi folosind vizibil proprietate. Dacă nu doriți să ascundeți complet un dreptunghi, dar să îl faceți semi-transparent, puteți utiliza opacitate proprietate. Puteți să-l setați la orice număr între 0 și 1 inclusiv. Forma nu va fi vizibilă dacă opacitatea este setată la 0.
Puteți, de asemenea, să rotiți sau să vă scalați forma dreptunghiului folosind rotație și scară proprietăți. Rotația este specificată ca număr simplu, dar aplicată în grade. Aveți opțiunea de a scala orice dreptunghi pe axa x sau y independent utilizând butonul scaleX și scaleY proprietăţi.
Iată un exemplu care atrage diferite dreptunghiuri pe o pânză folosind toate proprietățile pe care tocmai le-am discutat.
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 = nou Konva.Rect (x: 10, y: 10, lățimea: 200, înălțimea: 50, umpleți: "galben", accident vascular cerebral: "negru"); var rectB = nou Konva.Rect (x: 160, y: 30, lățimea: 80, înălțimea: 250, umpleți: "portocaliu", accidentul: "negru"); var rectC = nou Konva.Rect (x: 200, y: 160, lățimea: 180, înălțimea: 180, cornerRadius: 10, strokeWidth: 10, opacity: 0.8, fill: ; var rectD = noul Konva.Rect (x: 400, y: 20, lățimea: 180, înălțimea: 180, scaleX: 1.8, scaleY: 0.75, rotație: 45, umplere: "lightgreen" ; stratA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Trebuie să rețineți că sunt dreptunghiurile nu trase în ordinea în care sunt create. În schimb, ele sunt desenate în ordinea în care au fost adăugate la strat. completati și accident vascular cerebral proprietățile sunt utilizate pentru a seta culoarea de umplere și respectiv de curgere.
Puteți crea cercuri în Konva folosind Konva.circle () obiect. De data aceasta, X și y proprietățile determină punctul central pentru desenarea cercului. Puteți să specificați o valoare pentru proprietățile de lățime și înălțime. Aceste valori sunt folosite pentru a calcula diametrul cercului de tras. Cu toate acestea, un cerc are o lățime și o înălțime egale. Aceasta înseamnă că valoarea specificată ulterior are prioritate față de cea specificată anterior în caz de conflict. Cu alte cuvinte, dacă setați lăţime a unui cerc la 100 și mai tarziu setați-o înălţime la 180, cercul va avea un diametru de 180, iar lățimea va fi ignorată.
Pentru a evita confuzia, omiteți lăţime și înălţime și specificați o valoare pentru rază din cerc. Rețineți că trebuie să setați raza la 50 pentru a trage un cerc a cărui lățime și înălțime este de 100.
În mod similar, puteți crea o elipsă folosind Konva.ellipse () obiect. Singura diferență este că proprietatea radiusului va accepta acum un obiect cu proprietățile x și y ca valoare. Dacă este specificat, proprietatea lățimii și înălțimii va fi aplicată în mod independent pentru a determina forma finală a elipsei.
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 circA = noul Konva.Circle (x: 100, y: 100, lățimea: 180, umpleți: "galben", accident vascular cerebral: "negru"); var circB = noul Konva.Circle (x: 180, y: 150, înălțime: 100, umplere: "portocaliu", accident vascular cerebral: "negru"); var circC = nou Konva.Circle (x: 200, y: 275, raza: 100, opacitate: 0.5, umplere: "roșu", accident vascular cerebral: "negru"); var ellipA = noul Konva.Ellipse (x: 400, y: 75, lățimea: 70, înălțimea: 100, rotația: -15, umpleți: "verde deschis", accident: "negru"); var ellipB = nou Konva.Elipsa (x: 400, y: 75, lățimea: 80, înălțimea: 120, rotația: -15, cursa Lățime: 5, umplere: "alb", accident vascular cerebral: "negru"); var ellipC = noul Konva.Elipsa (x: 450, y: 275, raza: x: 100, y: 50, scaleY: 2, umple: "violet", accident vascular cerebral: "black"); stratA.add (circA, circB, cirC, ellipB, ellipA, ellipC); stage.add (layerA);
Ar trebui să țineți cont de asta ellipB are înălțime și lățime mai mari comparativ cu ellipA. Deoarece ambele au același lucru X și y valori, a trebuit să adaug ellipB pentru a păstra primul strat ellipA vizibil. Dacă ellipB a fost adăugat după ellipA, ar fi fost retras ellipA, ascunzându-l de la telespectatori.
Dacă observați cu atenție, veți vedea, de asemenea, că cercul violet este de fapt o elipsă y raza setată la 50 și X raza setată la 100. Cu toate acestea, a fost scalată cu un factor de 2 în direcția y. Scalarea mărește și lățimea cursei, făcându-l de două ori mai mare la partea superioară și inferioară a elipsei, comparativ cu marginea stângă și dreaptă.
Puteți utiliza funcția Konva.Line () obiect pentru a crea diferite tipuri de linii și curbe. Toate liniile solicită să specificați punctele prin care linia trebuie să treacă utilizând puncte proprietate. Punctele sunt specificate ca o matrice.
Puteți să vă alăturați oricăror seturi de puncte furnizate utilizând puncte pentru a forma un poligon prin setarea valorii închis atribuit lui Adevărat. În mod similar, puteți converti un set de linii drepte în spline prin stabilirea unei valori pentru tensiune atribut. O valoare de zero va avea ca rezultat liniile drepte. Valorile mai mari creează linii curviene.
Este posibil să creați o formă închisă și curbată (o pată) prin stabilirea unei valori pentru tensiune proprietății, precum și închiderea curbei prin setare închis la Adevărat.
Ca și restul formelor pe care le-am discutat, puteți seta lățimea cursei pentru desenarea liniilor utilizând strokeWidth atribut. De asemenea, puteți specifica a completati culoare pentru forme închise.
În următorul exemplu, am folosit același set de puncte pentru a compila toate formele. Cu toate acestea, am folosit de asemenea mișcare() pentru a schimba fiecare formă cu o anumită distanță, pentru a evita suprapunerile.
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 linieA = noul Konva.Line (puncte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], accident vascular cerebral: "negru"); var linieB = noua linie Konva.Line (puncte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20] ; vară linieC = nouă linie Konva.Line (puncte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], tensiune: 0,8, accident vascular cerebral: "albastru"); vară linie = nouă linie Konva.Line (puncte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], tensiune: 1,8, accident vascular cerebral: "roșu"); var linieE = noua linie Konva.Line (puncte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20] negru "); lineB.move (x: 180, y: 40); lineC.move (x: 380, y: 0); lineD.move (x: 0, y: 200); lineE.move (x: 180, y: 220); layerA.add (linia A, linia B, linia C, linia D, linia E); stage.add (layerA);
De asemenea, trebuie să rețineți că liniile roșu și albastru sunt reprezentate folosind aceleași seturi de puncte, dar diferite tensiune valoare modifică semnificativ forma finală a curbei.
Puteți alege cu atenție valoarea diferitelor puncte din puncte pentru a desena poligoane regulate, cum ar fi pentagonii și hexagoanele. Desenarea unor poligoane mai complexe, cum ar fi octogonii, folosind această metodă poate fi greoaie și predispusă la erori. Pentru a evita erorile, ar trebui să utilizați Konva.RegularPolygon () obiect pentru a crea poligoane regulate.
X și y proprietățile sunt folosite pentru a specifica centrul poligonului. rază proprietatea este utilizată pentru a specifica distanța dintre punctul central al poligonului și toate vârfurile acestuia. Puteți utiliza funcția fete proprietate pentru a specifica numărul de laturi pe care trebuie să le aibă poligonul. Rețineți că toate laturile unui poligon creat utilizând această metodă vor avea lungimi egale. Puteți schimba lungimea unor laturi folosind scaleX și scaleY proprietăți, dar va schimba și lățimea cursei laterale scalate.
La fel ca toate celelalte forme pe care le-am discutat, puteți schimba lățimea cursei, opacitatea și vizibilitatea poligoanelor obișnuite utilizând strokeWidth, opacitate, și vizibilitate.
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 (); triunghi var = nou Konva.RegularPolygon (x: 150, y: 275, fețe: 3, rază: 100, scaleY: 1.6, accident vascular cerebral: "black", fill: "rgba (200,0,200,1) ; var pătrat = nou Konva.RegularPolygon (x: 60, y: 60, fețe: 4, rază: 50, umpleți: "rgba (200,0,0, 0,5)", accident vascular cerebral: "negru"); var pentagon = nou Konva.RegularPolygon (x: 160, y: 160, fețe: 5, rază: 80, umplere: "rgba (0,200,0, 0,5)", accident vascular cerebral: "negru"); var hexagon = nou Konva.RegularPolygon (x: 350, y: 120, fețe: 6, rază: 80, umplere: "rgba (0,0,200, 0,5)", accident vascular cerebral: "negru"); var octagon = nou Konva.RegularPolygon (x: 450, y: 275, fețe: 8, rază: 100, umplere: "rgba (200,200,0, 0,5)", accident vascular cerebral: "negru"); stratul A.add (triunghi, pătrat, pentagon, hexagon, octogon); stage.add (layerA);
În acest tutorial, am acoperit cele mai elementare forme pe care Konva le permite să le folosim cu ușurință pe panza. De asemenea, am învățat despre diferite atribute care pot fi folosite pentru a controla aspectul tuturor acestor forme. Majoritatea atributelor sunt comune tuturor formelor, dar unele dintre ele sunt aplicabile numai pe forme specifice.
.
Accentsconagua