Share
I den andra handledningen i denna serie lärde du dig att rita grundläggande former med Konva. Du kan kombinera de grundläggande formerna på ett eller annat sätt för att skapa stjärnor, ringar, pilar, klockor eller en hut. Konva låter dig också skapa några vanliga komplexa former genom att använda inbyggda funktioner som tillhandahålls av biblioteket.
I denna handledning lär du dig att skapa stjärnor och ringar i Konva. Därefter kommer vi att diskutera hur man skriver text med Konva och hur man skriver den längs en viss väg. Du kommer också att lära dig att rita bilder och sprites på en duk med Konva.
Jämfört med många andra komplexa former som du kan dra på duken är en stjärnform en av de vanligaste. Med rätt uppsättning värden kan du också vrida punktiga stjärnor i enkla märkesliknande former. Konva låter dig rita stjärnor med hjälp av Konva.Star () objekt.
Du kan ange hur många spikar en stjärna ska ha med numPoints fast egendom. Du kan styra storleken på dessa spikar med hjälp av innerRadius och outerRadius egenskaper. En stor skillnad i värdet av dessa egenskaper gör stjärnorna mer spikiga. Inställning av yttre radie lika med den inre raden skapar en regelbunden polygon med antalet sidor dubbla värdet på numPoints. Varierar värdena på numPoints, innerRadius, och outerRadius kan resultera i några intressanta former.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var starA = ny Konva.Star (x: 70, y: 80, numPoäng: 4, innerRadius: 10, yttreRadius: 50, stroke: "svart", fyll: "rgba (200,0,200, 1)" ; var starB = ny Konva.Star (x: 200, y: 100, numPoäng: 8, innerRadius: 10, yttreRadius: 50, stroke: "svart", fyll: "rgba (0, 0, 200, 1)" ); var starC = ny Konva.Star (x: 475, y: 175, numPoäng: 20, inreRadius: 90, yttreRadius: 100, stroke: "orange", fyll: "gul",); var starD = ny Konva.Star (x: 325, y: 75, numPoäng: 5, inreRadius: 20, yttreRadius: 40, stroke: "svart", fyll: "ljusgrön",); var starE = ny Konva.Star (x: 100, y: 250, numPoäng: 25, innerRadius: 25, yttreRadius: 80, stroke: "svart", fyll: "vit",); var starF = ny Konva.Star (x: 300, y: 275, numPoäng: 40, inreRadius: 5, yttreRadius: 80, stroke: "svart", fyll: "svart",); layerA.add (starA, starB, starC, starD, starE, starF); stage.add (layerA);
Som vanligt kan du rotera och skala stjärnformerna som du skapar med hjälp av rotation, skala, scaleX, och scaleY egenskaper. På samma sätt kan du styra opaciteten hos en stjärna med hjälp av opacitet egendom och visa eller göm det med hjälp av synlig fast egendom.
Ringar i Konva består av en större solid cirkel och en mindre ihålig cirkel som läggs över den. Inre cirkelns radie specificeras med hjälp av innerRadius egenskap och radius av yttercirkeln specificeras med hjälp av outerRadius fast egendom. De x och y egenskaper styr positionen av stjärnans mittpunkt.
Du kan skala och rotera ringarna som du skapar med hjälp av scaleX, scaleY, skala, och rotation egenskaper. Tänk dock på att rotationen inte verkar ha någon effekt om du inte har skala upp ringen med olika storheter i x- och y-riktningen.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var ringA = ny Konva.Ring (x: 125, y: 100, innerRadius: 10, yttreRadius: 50, stroke: "svart", fyll: "rgba (200,0,200, 1)"; var ringB = ny Konva.Ring (x: 200, y: 100, innerRadius: 10, yttreRadius: 50, slag: "svart", fyll: "rgba (0, 0, 200, 0,5)"; var ringC = ny Konva.Ring (x: 475, y: 175, innerRadius: 90, yttreRadius: 100, stroke: "orange", fyll: "gul",); var ringD = ny Konva.Ring (x: 325, y: 100, innerRadius: 20, yttreRadius: 40, skalaY: 2, skalaX: 0,3, rotation: 45, slag: "svart", fyll: "ljusgrön" ); var starA = ny Konva.Star (x: 200, y: 275, numPoäng: 20, innerRadius: 50, yttreRadius: 115, stroke: "svart", fyll: "svart",); var ringE = ny Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 90, stroke: "black", fyll: "red",); var starB = ny Konva.Star (x: 200, y: 275, numPoäng: 10, innerRadius: 50, yttreRadius: 80, stroke: "svart", fyll: "vit",); var starC = ny Konva.Star (x: 200, y: 275, numPoäng: 10, innerRadius: 25, yttreRadius: 50, stroke: "svart", fyll: "orange",); var ringF = ny Konva.Ring (x: 200, y: 275, innerRadius: 10, yttreRadius: 20, stroke: "svart", fyll: "vit",); skiktA.add (ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF); stage.add (layerA);
I det följande exemplet har jag sammanlagt flera stjärn- och ringformer tillsammans för att skapa ett bra mönster. De tre stjärnorna och två ringarna i mönstret är koncentriska. Tänk på att när du försöker skapa något så här, dra alltid den största formen först. Om jag hade lagt till stara senare till skiktet skulle det ha täckt alla mindre ringar och stjärnor, dölja dem från tittarna.
Du kan skriva text på en duk med hjälp av Konva.Text () objekt. När du skapar ett textobjekt kan du ange värdet för teckensnittsfamilj, teckensnittstorlek, typsnittstyp och typsnitt variant med hjälp av typsnittsfamilj, textstorlek, typsnitt, och fontVariant egenskaper. Standardfontsfamiljen är Arial, och standardfonstorleken är 12. Du kan ställa in typsnitt egenskapen till normalt, fet eller kursiv. Liknande, fontVariant kan ställas in till antingen normal eller smallcaps.
Den faktiska texten som du vill skriva kan specificeras med hjälp av text fast egendom. Om det inte finns tillräckligt med utrymme mellan rader i en flervals kommentar kan du öka den med hjälp av radavstånd fast egendom.
Den övre vänstra punkten från vilken Konva ska börja skriva texten anges med hjälp av x och y egenskaper. Du kan begränsa textens bredd med egenskapen bredd. Varje text som du skriver kommer att lämnas som standard. Du kan justera den till höger eller i mitten med hjälp av justera fast egendom.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var textA = ny Konva.Text (y: 25, bredd: canvasWidth, justera: "center", text: "QUOTE OF DAY", fontSize: 50, fontFamily: "Lato"); var textB = ny Konva.Text (x: canvasWidth / 10, y: 175, bredd: canvasWidth * 8/10, justera: "center", lineHeight: 1.4, text: "Du måste dansa som att ingen ser, \ n Kärlek som att du aldrig kommer att bli sårad, \ n Sjung som att ingen lyssnar, \ n Och leva som det är himlen på jorden. ", fontSize: 25, fontFamily:" Lato "); var rectA = ny Konva.Rect (x: canvasWidth / 10 - 10, y: 140, bredd: canvasWidth * 8/10 + 20, höjd: 240, slag: "svart", fyll: "brown"); var rectB = ny Konva.Rect (x: canvasWidth / 10, y: 150, bredd: canvasWidth * 8/10, höjd: 220, slag: "svart", fyll: "ljusblå"); var starA = ny Konva.Star (x: canvasWidth / 10, y: 150, innerRadius: 40, outerRadius: 30, numPoäng: 10, stroke: "svart", fyll: "orange"); layerA.add (textA, rectA, starA, rectB, textB); stage.add (layerA);
I ovanstående exempel bör du notera att jag har lagt till textB till lagret efter att ha lagt till alla andra element. På detta sätt kan vi se till att det faktiska citatet stannar på alla andra former.
Texten som du skriver på duken behöver inte följa raka linjer. Du kan också ge en sökväg för texten som ska följas med data fast egendom. Banan tillhandahålls i form av en SVG-datasträng och kan innefatta kommandon för att följa linjer, kurvor och bågar.
En viktig sak som du bör komma ihåg är att texten som du vill skriva längs en viss väg måste skapas med hjälp av Konva.TextPath () objekt. Här är ett exempel som ger vägen för texten att följa i form av en Cubic Bezier-kurva.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var textA = ny Konva.TextPath (y: 25, justera: 'center', data: 'M100,300 C150,100 200,50 500 60', text: "DENNA TEXT GÅR SIDAN EN STEG", fontSize: 35, fontFamily: "Lato", fyll: "orange"); var textB = ny Konva.TextPath (y: 28, align: 'center', data: 'M100,320 C200,200 400,400 500 80', text: "DENNA TEXT GÅR SOM EN ANNAN PATH", fontSize: 25, fontFamily: "Lato", fyll: "grönt"); layerA.add (textA, textB); stage.add (layerA);
Du borde nu kunna skapa en mängd olika former med de metoder som vi har diskuterat i den här och den tidigare handledningen, men ibland är det mer meningsfullt att direkt använda en bild när man försöker dra en grafik på duken. Konva låter dig rita bilder med hjälp av Konva.Image () objekt.
Positionen till det övre vänstra hörnet av en bild bestäms av värdet av x och y egenskaper. På samma sätt specificeras dess bredd och höjd med hjälp av bredd och höjd egenskaper. Värdena för bredd och höjd Egenskaper behöver inte vara lika med bildens faktiska dimensioner. Du kan också skala eller rotera bilden med hjälp av rotation, skala, scaleX, och scaleY egenskaper.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var theImage = ny bild (); theImage.src = "path / to / the / image.jpg"; theImage.onload = function () varfält = ny Konva.Image (x: 35, y: 115, bild: theImage, width: 500, height: 250, rotation: -10, stroke: "black", strokeWidth: 15); layerA.add (fält); stage.add (layerA); ;
Det är värt att märka att i ovanstående kod instämde jag Konva.Image () objekt efter att bilden redan hade laddats. Försöker att instansera Konva.Image () objektet innan bilden har laddats kommer att resultera i ett fel. Bilden av fältet har tagits från Pixabay.
Konva låter dig också göra sprites på duken med hjälp av Konva.Sprite () objekt. Den enda skillnaden är att den här gången måste du använda animering och animationer nycklar utöver den bildnyckel som vi använde tidigare samtidigt som bilden gjordes.
De animering nyckeln accepterar en sträng som anger id av animationen som ska spelas. De animationer tangent accepterar ett objekt som lagrar animeringskartan för sprite som dess värde. Du kan styra den hastighet vid vilken en sprite animation ska spelas med framerate fast egendom.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var theSprite = ny bild (); theSprite.src = "path / to / hero_spritesheet.png"; var animationer = 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], hoppning: [0, 282, 80, 94, 80, 282, 80, 94, 160, 282, 80, 94]; theSprite.onload = function () var heroA = ny Konva.Sprite (x: 50, y: 50, bild: theSprite, animation: 'standing', animeringar: animeringar, frameRate: 6, frameIndex: 0); var heroB = ny Konva.Sprite (x: 50, y: 150, bild: theSprite, animation: 'walking', animeringar: animeringar, frameRate: 6, frameIndex: 0); var heroC = ny Konva.Sprite (x: 50, y: 250, bild: theSprite, animation: 'walking', animeringar: animeringar, frameRate: 60, frameIndex: 0); var heroD = ny Konva.Sprite (x: 275, y: 150, skala: 2, bild: theSprite, animation: 'hoppa', animeringar: animationer, frameRate: 2, frameIndex: 0); layerA.add (heroA, heroB, heroC, heroD); stage.add (layerA); heroA.start (); heroB.start (); heroC.start (); heroD.start (); ;
Bredden och höjden på vår hjältesprit är 80px respektive 94px. Jag har använt dessa värden för att berätta Konva positionen för en sprite som ska visas medan du spelar en viss animationssekvens. Varje animationssekvens har fått en id att identifiera vad hjälten gör. Detta id används senare när du vill berätta för Konva vilken animation den ska spela. Precis som i föregående exempel har jag instanser hjälten efter att bilden laddas för att undvika fel.
Den hjälte sprite sheet som vi använder i demo skapades av tokka. Jag har också använt samma bild i Crafty Beyond the Basics: Sprites handledning för att skapa en sprite animation. Tutorials i den serien visar dig hur man skapar ett enkelt 2D-spel med Crafty.
Kommer tillbaka till Konva, visar följande exempel en gå och hoppa hjälteanimation. Heltan i botten har en högre framerate värde, vilket gör att det verkar som om hjälten körs vid superhuman hastighet.
Efter avslutad andra och tredje handledning bör du nu kunna skapa många former, mönster och mönster av dig själv med hjälp av Konva. Det sista avsnittet visade dig också hur man ritar bilder och sprites på din duk. Detta borde täcka alla dina ritningsrelaterade behov.
Om du har några frågor relaterade till denna handledning, skulle jag vara glad att hjälpa till. Nästa handledning lär dig hur du fyller dina former med gradienter och hur man applicerar skuggor på vad som helst som du ritar på duken.
Accentsconagua