Share
În cel de-al doilea tutorial al acestei serii, ați învățat cum să desenați forme de bază utilizând Konva. Puteți combina formele de bază într-un fel sau altul pentru a crea stele, inele, săgeți, ceasuri sau o colibă. Konva vă permite, de asemenea, să creați câteva forme complexe comune prin utilizarea funcțiilor încorporate furnizate de bibliotecă.
În acest tutorial, veți învăța cum să creați stele și inele în Konva. După aceasta, vom discuta cum să scriem text folosind Konva și cum să scriem pe o cale specifică. Veți învăța, de asemenea, cum să desenați imagini și sprites pe o pânză folosind Konva.
În comparație cu multe alte forme complexe pe care le puteți desena pe pânză, o formă de stea este una dintre cele mai comune. Cu setul corect de valori, puteți transforma, de asemenea, stelele pointite în simple simboluri asemănătoare cu insignele. Konva vă permite să desenați stele folosind Konva.Star () obiect.
Puteți specifica numărul de spikes pe care o stea ar trebui să o folosească numPoints proprietate. Puteți controla mărimea acestor spikes folosind innerRadius și outerRadius proprietăți. O mare diferență în valoarea acestor proprietăți va face ca stelele să fie mai spinoase. Setarea razei exterioare egale cu raza interioară va crea un poligon regulat cu numărul de laturi dublu față de valoarea numPoints. Varierea valorilor numPoints, innerRadius, și outerRadius poate duce la unele forme interesante.
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 steaA = nou KonvaStar (x: 70, y: 80, numPoints: 4, innerRadius: 10, outerRadius: 50, accident vascular cerebral: "black", fill: "rgba (200,0,200,1) ; var starB = nou Konva.Star (x: 200, y: 100, numPoints: 8, innerRadius: 10, outerRadius: 50, accident vascular cerebral: "negru", fill: "rgba (0, 0, 200, 1) ); var starC = nou Konva.Star (x: 475, y: 175, numPoints: 20, innerRadius: 90, outerRadius: 100, accident vascular cerebral: "portocaliu", umple: "galben",); var starD = noul Konva.Star (x: 325, y: 75, numPoints: 5, innerRadius: 20, outerRadius: 40, accident vascular cerebral: "negru", umple: "lightgreen",); var starE = noul Konva.Star (x: 100, y: 250, numPoints: 25, innerRadius: 25, outerRadius: 80, accident vascular cerebral: "negru", umplere: "alb",); var starF = nou Konva.Star (x: 300, y: 275, numPoints: 40, innerRadius: 5, outerRadius: 80, accident vascular cerebral: "negru", umplere: "negru",); stratul A.add (starA, starB, starC, starD, starE, starF); stage.add (layerA);
Ca de obicei, aveți posibilitatea să rotiți și să scalați formele de stele pe care le creați folosind rotație, scară, scaleX, și scaleY proprietăți. În mod similar, puteți controla opacitatea unei stele folosind opacitate de proprietate și de a arăta sau ascunde cu ajutorul vizibil proprietate.
Inelele din Konva sunt alcătuite dintr-un cerc solid mai mare și un cerc gol inferior așezat peste el. Raza cercului interior este specificată folosind innerRadius proprietății, iar raza cercului exterior este specificată folosind outerRadius proprietate. X și y proprietățile controlează poziția centrului stelei.
Puteți scala și roti inelele pe care le creați utilizând scaleX, scaleY, scară, și rotație proprietăți. Cu toate acestea, rețineți că rotația nu va părea să aibă efect decât dacă ați scalat inelul cu magnitudine diferite în direcția x și y.
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 varAA = nou Konva.Ring (x: 125, y: 100, innerRadius: 10, outerRadius: 50, accident vascular cerebral: "negru", umple: "rgba (200,0,200,1)"; var varB = nou Konva.Ring (x: 200, y: 100, innerRadius: 10, outerRadius: 50, accident vascular cerebral: "negru", umplere: "rgba (0, 0, 200, 0,5)"; var ringC = nou Konva.Ring (x: 475, y: 175, interiorRadius: 90, exteriorRadius: 100, accident vascular cerebral: "portocaliu", umplere: "galben",); var ringD = nou Konva.Ring (x: 325, y: 100, interiorRadius: 20, outerRadius: 40, scaleY: 2, scaleX: 0.3, rotație: 45, accident vascular cerebral: "negru" ); var steaA = nou Konva.Star (x: 200, y: 275, numPoints: 20, innerRadius: 50, outerRadius: 115, accident vascular cerebral: "negru", umplere: "negru",); var ringE = nou Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 90, accident vascular cerebral: "negru", umplere: "roșu",); var starB = nou KonvaStar (x: 200, y: 275, numPoints: 10, innerRadius: 50, outerRadius: 80, accident vascular cerebral: "negru", umplere: "alb",); var starC = nou Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 25, outerRadius: 50, accident vascular cerebral: "negru", umple: "orange",); var ringF = nou Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 20, accident vascular cerebral: "negru", umplere: "alb",); stratA.add (ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF); stage.add (layerA);
În exemplul următor, am suprapus mai multe forme de stea și inel pentru a crea un tipar frumos. Cele trei stele și două inele din model sunt concentrice. Rețineți că ori de câte ori încercați să creați ceva de genul acesta, întotdeauna trageți mai întâi cea mai mare formă. Dacă aș fi adăugat stara mai târziu, la strat, ar fi acoperit toate inelele mici și stelele, ascunzându-le de spectatori.
Puteți scrie text pe o pânză folosind Konva.Text () obiect. Când creați un obiect text, puteți specifica valoarea pentru familia de fonturi, dimensiunea fontului, stilul fontului și varianta fontului utilizând familie de fonturi, marimea fontului, stilul fontului, și fontVariant proprietăți. Familia de fonturi implicită este Arial, iar dimensiunea implicită a fontului este 12. Puteți seta stilul fontului proprietate la normal, bold sau italic. asemănător, fontVariant pot fi setate fie la normal, fie la mici.
Textul real pe care doriți să îl scrieți poate fi specificat utilizând text proprietate. Dacă nu există spațiu suficient între liniile dintr-un comentariu cu mai multe linii, îl puteți mări utilizând inaltimea liniei proprietate.
Punctul de sus-stânga din care Konva ar trebui să înceapă să scrie textul este specificat folosind X și y proprietăți. Puteți limita lățimea textului utilizând proprietatea lățime. Orice text pe care îl scrieți va fi aliniat în mod implicit. Puteți să o aliniați spre dreapta sau spre centru folosind alinia proprietate.
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 textA = nou Konva.Text (y: 25, lățime: canvasWidth, aliniați: 'center', text: "QUOTE OF THE DAY", fontSize: 50, fontFamily: "Lato"); var textB = nou text Konva.Text (x: canvasWidth / 10, y: 175, lățime: canvasWidth * 8/10, aliniere: 'center', lineHeight: 1.4, text: \ n Dragoste ca și cum nu vei fi niciodată rănit, \ n Cântă ca și cum n-ai ascultat, \ n Și trăiești ca și cum ar fi cerul pe pămînt. ", fontSize: 25, fontFamily:" Lato "); var rectA = nou Konva.Rect (x: canvasWidth / 10 - 10, y: 140, lățime: canvasWidth * 8/10 + 20, înălțime: 240, cursa: "negru", umplere: "maro"); var rectB = nou Konva.Rect (x: canvasWidth / 10, y: 150, lățime: canvasWidth * 8/10, înălțime: 220, cursa: "negru", umpleți: "lightblue"); var starA = nou Konva.Star (x: canvasWidth / 10, y: 150, innerRadius: 40, outerRadius: 30, numPoints: 10, accident vascular cerebral: "negru", umplere: "orange"); layerA.add (textA, rectA, starA, rectB, textB); stage.add (layerA);
În exemplul de mai sus, trebuie să rețineți că am adăugat textB la strat după adăugarea tuturor celorlalte elemente. În acest fel, putem să ne asigurăm că cota actuală rămâne pe lângă toate celelalte forme.
Textul pe care îl scrieți pe panza nu trebuie să urmeze linii drepte. Puteți oferi, de asemenea, o cale pentru ca textul să poată urma folosind date proprietate. Calea este furnizată sub forma unui șir de date SVG și poate include comenzi pentru urmărirea liniilor, curbelor și arcurilor.
Un lucru important pe care ar trebui să-l amintiți este că textul pe care doriți să-l scrieți pe o cale specifică trebuie să fie creat folosind Konva.TextPath () obiect. Iată un exemplu care oferă calea pentru urmarea textului sub forma unei curbe Cubic Bezier.
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 textA = nou Konva.TextPath (y: 25, align: 'center', date: 'M100,300 C150,100 200,50 500 60', text: fontFamily: "Lato", umpleți: "portocaliu"); var textB = nou Konva.TextPath (y: 28, aliniați: 'center', date: 'M100,320 C200,200 400,400 500 80', text: "ACEST TEXT SE ÎNALTĂ ALTĂ CALEA", fontSize: 25, fontFamily: "Lato", umpleți: "verde"); layerA.add (textA, textB); stage.add (layerA);
Acum ar trebui să puteți crea o varietate de forme utilizând metodele pe care le-am discutat în acest tutorial și în cele precedente, dar uneori are mai mult sens să folosești direct o imagine când încerci să desenezi un grafic pe pânză. Konva vă permite să desenați imagini utilizând Konva.Image () obiect.
Poziția colțului din stânga sus al unei imagini este determinată de valoarea lui X și y proprietăți. În mod similar, lățimea și înălțimea ei sunt specificate folosind lăţime și înălţime proprietăți. Valorile lăţime și înălţime proprietățile nu trebuie să fie egale cu dimensiunile reale ale imaginii. De asemenea, puteți scala sau roti imaginea folosind rotație, scară, scaleX, și scaleY proprietăţi.
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 theImage = noua imagine (); theImage.src = "cale / spre / imagine / imagine.jpg"; theImage.onload = function () var field = noua Konva.Image (x: 35, y: 115, imagine: theImage, lățime: 500, înălțime: 250, rotație: 15); layerA.add (câmp); stage.add (layerA); ;
Merită să observăm că în codul de mai sus am instanțiat Konva.Image () după ce imaginea fusese deja încărcată. Încercarea de a instanția Konva.Image () obiectul înainte de încărcarea imaginii va duce la o eroare. Imaginea câmpului a fost luată de la Pixabay.
Konva vă permite de asemenea să faceți sprites pe panza cu ajutorul Konva.Sprite () obiect. Singura diferență este că de data aceasta trebuie să utilizați animaţie și animații în plus față de cheia de imagine pe care am folosit-o mai devreme în timp ce redăm imaginea.
animaţie cheia acceptă un șir care specifică id din animația care va fi jucată. animații cheia acceptă un obiect care stochează harta de animație pentru sprite ca valoare. Puteți controla rata la care ar trebui să fie redată o animație sprite folosind FRAMERATE proprietate.
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 theSprite = noua imagine (); theSprite.src = "cale / spre / hero_spritesheet.png"; var animații = picioare: [0, 0, 80, 94], mersul pe jos: [0, 94, 80, 94, 80, 94, 80, 94, 94, , 320, 94, 80, 94, 400, 94, 80, 94], sărituri: [0, 282, 80, 94, 80, 282, 80, 94, 160, 282, 80, 94]; theSprite.onload = funcția () var heroA = noua Konva.Sprite (x: 50, y: 50, imagine: theSprite, animație: "în picioare", animații: animații, frameRate: 6, frameIndex: 0); var heroB = nou Konva.Sprite (x: 50, y: 150, imagine: theSprite, animație: 'mers pe jos', animații: animații, frameRate: 6, frameIndex: 0); var heroC = nou Konva.Sprite (x: 50, y: 250, imagine: theSprite, animație: 'mersul pe jos', animații: animații, frameRate: 60, frameIndex: 0); var heroD = nou Konva.Sprite (x: 275, y: 150, scară: 2, imagine: theSprite, animație: 'jumping', animații: animații, frameRate: 2, frameIndex: 0); strat A.add (heroA, heroB, heroC, heroD); stage.add (layerA); heroA.start (); heroB.start (); heroC.start (); heroD.start (); ;
Lățimea și înălțimea spritei eroului sunt de 80px și respectiv 94px. Am folosit aceste valori pentru a spune Konva poziția unui sprite care ar trebui afișat în timp ce jucați o secvență de animație specifică. Fiecare secvență de animație a fost dată id pentru a identifica ce face eroul. Acest id este folosit mai târziu când vrei să-i spui lui Konva ce animație ar trebui să joace. La fel ca și exemplul precedent, am instanțiat eroul după încărcarea imaginii pentru a evita erorile.
Foaia de sprite a eroului pe care o folosim în demo a fost creată de tokka. Am folosit, de asemenea, aceeași imagine în programul Craft Beyond the Basics: Sprites tutorial pentru a crea o animație sprite. Tutorialele din acea serie vă arată cum să creați un simplu joc 2D folosind Crafty.
Revenind la Konva, următorul exemplu arată o animație de eroi de mers pe jos și de sărituri. Eroul din partea de jos are un nivel mai ridicat FRAMERATE valoare, ceea ce îl face să pară ca eroul să meargă la viteze supraumane.
După ce ați terminat al doilea și al treilea tutorial, acum ar trebui să puteți crea o mulțime de forme, modele și modele cu ajutorul dvs. Konva. Ultima secțiune vă arată, de asemenea, cum să desenați imagini și sprite pe panza dvs. Acest lucru ar trebui să acopere toate nevoile legate de desen.
Dacă aveți întrebări legate de acest tutorial, aș fi bucuros să vă ajut. Următorul tutorial vă va învăța cum să vă umpleți formele cu gradienți și cum să aplicați umbre pe orice pe care îl trageți pe pânză.
Accentsconagua