Share
I den andre opplæringen i denne serien lærte du hvordan du tegner grunnleggende former ved hjelp av Konva. Du kan kombinere de grunnleggende figurene på en eller annen måte for å lage stjerner, ringer, piler, klokker eller en hytte. Konva lar deg også lage noen vanlige komplekse former ved hjelp av innebygde funksjoner fra biblioteket.
I denne opplæringen lærer du hvordan du lager stjerner og ringer i Konva. Etter det vil vi diskutere hvordan du skriver tekst ved hjelp av Konva og hvordan du skriver den langs en bestemt sti. Du vil også lære å tegne bilder og sprites på et lerret ved hjelp av Konva.
Sammenlignet med mange andre komplekse former som du kan tegne på lerretet, er en stjerneform en av de vanligste. Med det riktige settet av verdier kan du også vende spisse stjerner inn i enkle skiltliknende former. Konva lar deg tegne stjerner ved hjelp av Konva.Star () gjenstand.
Du kan angi antall toppene som en stjerne skal ha med numPoints eiendom. Du kan kontrollere størrelsen på disse pigger med innerRadius og outerRadius eiendommer. En stor forskjell i verdien av disse egenskapene vil gjøre stjernene mer spikete. Innstilling av ytre radius lik den indre radiusen vil skape en vanlig polygon med antall sider doble verdien av numPoints. Varierer verdiene for numPoints, innerRadius, og outerRadius kan resultere i noen interessante former.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var starA = ny Konva.Star (x: 70, y: 80, numPoints: 4, innerRadius: 10, outerRadius: 50, slag: "svart", fyll: "rgba (200,0,200, 1)",) ; var starB = ny Konva.Star (x: 200, y: 100, numPoints: 8, innerRadius: 10, outerRadius: 50, slag: "svart", fyll: "rgba (0, 0, 200, 1)" ); var starC = ny Konva.Star (x: 475, y: 175, numPoints: 20, innerRadius: 90, outerRadius: 100, slag: "oransje", fyll: "gul",); var starD = ny Konva.Star (x: 325, y: 75, numPoints: 5, innerRadius: 20, outerRadius: 40, slag: "svart", fyll: "lysegrønn",); var starE = ny Konva.Star (x: 100, y: 250, numPoints: 25, innerRadius: 25, outerRadius: 80, slag: "svart", fyll: "hvit",); var starF = ny Konva.Star (x: 300, y: 275, numPoints: 40, innerRadius: 5, outerRadius: 80, slag: "svart", fyll: "svart",); layerA.add (starA, starB, starC, starD, starE, starF); stage.add (layerA);
Som vanlig kan du rotere og skala stjernevannene du lager ved hjelp av rotasjon, skala, scaleX, og Scaley eiendommer. På samme måte kan du kontrollere opaciteten til en stjerne ved hjelp av opasitet eiendom og vise eller skjule det ved hjelp av synlig eiendom.
Ringene i Konva består av en større solid sirkel og en mindre hul sirkel lagt over den. Radius av den indre sirkelen er spesifisert ved hjelp av innerRadius eiendom, og radius av ytre sirkel er spesifisert ved hjelp av outerRadius eiendom. De x og y Egenskaper styr posisjonen til stjernens midtpunkt.
Du kan skala og rotere ringene du lager ved hjelp av scaleX, Scaley, skala, og rotasjon eiendommer. Vær imidlertid oppmerksom på at rotasjon ikke ser ut til å ha noen effekt med mindre du har skalert ringen med forskjellige størrelser i x og y retningen.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var ringA = ny Konva.Ring (x: 125, y: 100, innerRadius: 10, outerRadius: 50, slag: "svart", fyll: "rgba (200,0,200, 1)"; var ringB = ny Konva.Ring (x: 200, y: 100, innerRadius: 10, outerRadius: 50, slag: "svart", fyll: "rgba (0, 0, 200, 0.5)"; var ringC = ny Konva.Ring (x: 475, y: 175, innerRadius: 90, outerRadius: 100, slag: "oransje", fyll: "gul",); var ringD = ny Konva.Ring (x: 325, y: 100, innerRadius: 20, ytreRadius: 40, skalaY: 2, skalaX: 0.3, rotasjon: 45, slag: "svart", fyll: "lysegrønn" ); var starA = ny Konva.Star (x: 200, y: 275, numPoints: 20, innerRadius: 50, outerRadius: 115, slag: "svart", fyll: "svart",); var ringE = ny Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 90, slag: "svart", fyll: "rød",); var starB = ny Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 50, outerRadius: 80, slag: "svart", fyll: "hvit",); var starC = ny Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 25, outerRadius: 50, slag: "svart", fyll: "oransje",); var ringF = ny Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 20, slag: "svart", fyll: "hvit",); layerA.add (ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF); stage.add (layerA);
I det følgende eksemplet har jeg lagt sammen flere stjerne- og ringformer for å lage et fint mønster. De tre stjernene og to ringene i mønsteret er konsentriske. Husk at når du prøver å lage noe slikt, må du alltid tegne den største formen først. Hvis jeg hadde lagt til Stara senere til laget, ville det ha dekket alle de mindre ringene og stjernene, gjemmer dem fra seerne.
Du kan skrive tekst på et lerret ved hjelp av Konva.Text () gjenstand. Når du oppretter et tekstobjekt, kan du angi verdien for skrifttypefamilie, skriftstørrelse, skrifttypestil og skriftvariant ved hjelp av fontfamily, skriftstørrelse, fontstil, og fontVariant eiendommer. Standardfontefamilien er Arial, og standard skriftstørrelsen er 12. Du kan angi fontstil Egenskapen til normal, fet eller kursiv. på samme måte, fontVariant kan settes til enten normal eller smallcaps.
Den faktiske teksten du vil skrive kan spesifiseres ved hjelp av tekst eiendom. Hvis det ikke er nok plass mellom linjer i en linje med flere linjer, kan du øke den ved hjelp av linjehøyde eiendom.
Det øverste venstre punktet fra hvilket Konva skal begynne å skrive teksten, er spesifisert ved hjelp av x og y eiendommer. Du kan begrense bredden på teksten ved hjelp av breddeegenskapen. Eventuell tekst som du skriver vil bli igjen justert som standard. Du kan justere den til høyre eller midt ved hjelp av rette inn eiendom.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var textA = ny Konva.Text (y: 25, bredde: canvasWidth, justere: 'senter', tekst: "KVOTE AV DAGEN", fontSize: 50, fontFamily: "Lato"); var textB = ny Konva.Text (x: canvasWidth / 10, y: 175, bredde: canvasWidth * 8/10, juster: 'senter', lineHeight: 1.4, text: "Du må danse som det er ingen som ser på, \ n Kjærlighet som at du aldri blir skadet, \ n Syng slik at ingen lytter, \ n Og leve som det er himmelen på jorden. ", fontSize: 25, fontFamily:" Lato "); var rectA = ny Konva.Rect (x: canvasWidth / 10 - 10, y: 140, bredde: canvasWidth * 8/10 + 20, høyde: 240, slag: "svart", fyll: "brun"); var rectB = ny Konva.Rect (x: canvasWidth / 10, y: 150, bredde: canvasWidth * 8/10, høyde: 220, slag: "svart", fyll: "lyseblå"); var starA = ny Konva.Star (x: canvasWidth / 10, y: 150, innerRadius: 40, outerRadius: 30, numPoints: 10, slag: "black", fyll: "orange"); layerA.add (textA, rectA, starA, rectB, textB); stage.add (layerA);
I eksemplet ovenfor bør du merke at jeg har lagt til textB til laget etter å ha lagt til alle andre elementer. På denne måten kan vi sørge for at det faktiske tilbudet forblir på toppen av alle andre former.
Teksten du skriver på lerretet trenger ikke å følge rette linjer. Du kan også gi en bane for teksten som skal følges ved hjelp av data eiendom. Banen er gitt i form av en SVG datastreng og kan inneholde kommandoer for å følge linjer, kurver og buer.
En viktig ting du bør huske er at teksten du vil skrive langs en bestemt bane, må opprettes ved hjelp av Konva.TextPath () gjenstand. Her er et eksempel som gir banen for teksten som følger i form av en Cubic Bezier-kurve.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var textA = ny Konva.TextPath (y: 25, justere: 'senter', data: 'M100,300 C150,100 200,50 500 60', tekst: "DENNE TEKST GJORDER LENGT EN STEG", fontSize: 35, fontFamily: "Lato", fyll: "orange"); var textB = ny Konva.TextPath (y: 28, juster: 'senter', data: 'M100,320 C200,200 400,400 500 80', tekst: "DENNE TEKSTEN GJORDER EN ANNEN STEG", fontSize: 25, fontFamily: "Lato", fyll: "green"); layerA.add (textA, textB); stage.add (layerA);
Du bør nå kunne lage en rekke former ved hjelp av metodene som vi har diskutert i denne og den forrige opplæringen, men noen ganger er det mer fornuftig å bruke et bilde direkte når du prøver å tegne en grafikk på lerretet. Konva lar deg tegne bilder ved hjelp av Konva.Image () gjenstand.
Posisjonen til det øverste venstre hjørnet av et bilde bestemmes av verdien av x og y eiendommer. På samme måte er bredden og høyden spesifisert ved bruk av bredde og høyde eiendommer. Verdiene av bredde og høyde Egenskaper trenger ikke å være lik de faktiske dimensjonene i bildet. Du kan også skalere eller rotere bildet ved hjelp av rotasjon, skala, scaleX, og Scaley eiendommer.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var theImage = nytt bilde (); theImage.src = "path / to / the / image.jpg"; theImage.onload = function () var field = ny Konva.Image (x: 35, y: 115, bilde: theImage, width: 500, height: 250, rotasjon: -10, slag: "black", strokeWidth: 15); layerA.add (felt); stage.add (layerA); ;
Det er verdt å merke seg at i ovennevnte kode, instanserte jeg Konva.Image () objekt etter at bildet allerede var lastet inn. Prøver å instansere Konva.Image () objektet før bildet er lastet, vil føre til en feil. Bildet av feltet er tatt fra Pixabay.
Konva lar deg også gjengi sprites på lerretet ved hjelp av Konva.Sprite () gjenstand. Den eneste forskjellen er at denne gangen må du bruke animasjon og animasjoner nøkler i tillegg til bildetasten som vi brukte tidligere mens bildet ble gjengitt.
De animasjon nøkkelen aksepterer en streng som spesifiserer id av animasjonen som skal spilles. De animasjoner nøkkel aksepterer et objekt som lagrer animasjonskartet for sprite som dets verdi. Du kan kontrollere hastigheten der en sprite animasjon skal spilles med Framerate eiendom.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var theSprite = nytt bilde (); theSprite.src = "path / to / hero_spritesheet.png"; var animasjoner = stående: [0, 0, 80, 94], gå: [0, 94, 80, 94, 80, 94, 80, 94, 160, 94, 80, 94, 240, 94, 80, 94 , 320, 94, 80, 94, 400, 94, 80, 94], hopper: [0, 282, 80, 94, 80, 282, 80, 94, 160, 282, 80, 94]; theSprite.onload = function () var heroA = ny Konva.Sprite (x: 50, y: 50, bilde: theSprite, animasjon: 'standing', animasjoner: animasjoner, frameRate: 6, frameIndex: 0); var heroB = ny Konva.Sprite (x: 50, y: 150, bilde: theSprite, animasjon: 'walking', animasjoner: animasjoner, frameRate: 6, frameIndex: 0); var heroC = ny Konva.Sprite (x: 50, y: 250, bilde: theSprite, animasjon: 'walking', animasjoner: animasjoner, frameRate: 60, frameIndex: 0); var heroD = ny Konva.Sprite (x: 275, y: 150, skala: 2, bilde: theSprite, animasjon: 'jumping', animasjoner: animasjoner, frameRate: 2, frameIndex: 0); layerA.add (heroA, heroB, heroC, heroD); stage.add (layerA); heroA.start (); heroB.start (); heroC.start (); heroD.start (); ;
Bredden og høyden på vår heltesprite er henholdsvis 80px og 94px. Jeg har brukt disse verdiene til å fortelle Konva posisjonen til en sprite som skal vises mens du spiller en bestemt animasjonssekvens. Hver animasjonssekvens har blitt gitt en id å identifisere hva helten gjør. Dette id brukes senere når du vil fortelle Konva hvilken animasjon den skal spille. I likhet med det forrige eksempelet har jeg opprettet helten etter at bildet laster for å unngå feil.
Hero-sprite-arket som vi bruker i demoen, ble opprettet av tokka. Jeg har også brukt det samme bildet i Crafty Beyond the Basics: Sprites tutorial for å lage en sprite animasjon. Opplæringen i denne serien viser deg hvordan du lager et enkelt 2D-spill med Crafty.
Kommer tilbake til Konva, viser følgende eksempel en walking og hoppende helt animasjon. Helt i bunnen har en høyere Framerate verdi, noe som gjør at det ser ut som om helten kjører på overmenneskelige hastigheter.
Etter å ha fullført den andre og tredje opplæringen, bør du nå kunne lage mange former, mønstre og design selv ved hjelp av Konva. Den siste delen viste deg også hvordan du tegner bilder og sprites på lerretet ditt. Dette burde dekke alle dine tegningsrelaterte behov.
Hvis du har spørsmål knyttet til denne opplæringen, vil jeg gjerne hjelpe. Den neste opplæringen vil lære deg hvordan du fyller dine figurer med gradienter og hvordan du bruker skygger på alt du tegner på lerretet.
Accentsconagua