Share
In de tweede zelfstudie van deze serie heb je geleerd hoe je basisvormen tekent met Konva. Je kunt de basisvormen op de een of andere manier combineren om sterren, ringen, pijlen, klokken of een hut te maken. Met Konva kunt u ook enkele veelvoorkomende complexe vormen maken met behulp van ingebouwde functies die door de bibliotheek worden geboden.
In deze tutorial leer je hoe je sterren en ringen kunt maken in Konva. Daarna bespreken we hoe je tekst kunt schrijven met Konva en hoe je het op een specifiek pad kunt schrijven. Je leert ook hoe je afbeeldingen en sprites tekent op een canvas met Konva.
In vergelijking met veel andere complexe vormen die u op het canvas kunt tekenen, is een stervorm een van de meest voorkomende. Met de juiste reeks waarden kunt u ook puntige sterren veranderen in eenvoudige, op een badge gelijkende vormen. Konva laat je sterren tekenen met behulp van de Konva.Star () voorwerp.
U kunt het aantal pieken opgeven dat een ster zou moeten hebben met behulp van de numPoints eigendom. U kunt de grootte van die spikes regelen met behulp van de innerRadius en outerRadius eigenschappen. Een groot verschil in de waarde van deze eigenschappen maakt de sterren meer stekelig. Als u de buitenste straal gelijk aan de binnenradius instelt, wordt een regelmatige polygoon gemaakt met het aantal zijden verdubbeld numPoints. Variërend van de waarden van numPoints, innerRadius, en outerRadius kan resulteren in een aantal interessante vormen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var starA = nieuwe Konva.Star (x: 70, y: 80, numPoints: 4, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (200,0.200, 1)",) ; var starB = nieuwe Konva.Star (x: 200, y: 100, numPoints: 8, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (0, 0, 200, 1)", ); var starC = nieuwe Konva.Star (x: 475, y: 175, numPoints: 20, innerRadius: 90, outerRadius: 100, stroke: "orange", fill: "yellow",); var starD = nieuwe Konva.Star (x: 325, y: 75, numPoints: 5, innerRadius: 20, outerRadius: 40, stroke: "black", fill: "lightgreen",); var starE = nieuwe Konva.Star (x: 100, y: 250, numPoints: 25, innerRadius: 25, outerRadius: 80, stroke: "black", fill: "white",); var starF = nieuwe Konva.Star (x: 300, y: 275, numPoints: 40, innerRadius: 5, outerRadius: 80, stroke: "black", fill: "black",); layerA.add (starA, starB, starC, starD, starE, starF); stage.add (layerA);
Zoals gewoonlijk kunt u de stervormen die u met behulp van de draait, roteren en schalen omwenteling, schaal, scaleX, en scaleY eigenschappen. Evenzo kunt u de dekking van een ster bepalen met behulp van de ondoorzichtigheid eigendom en tonen of verbergen met behulp van de zichtbaar eigendom.
Ringen in Konva bestaan uit een grotere dichte cirkel en een kleinere holle cirkel eroverheen. De straal van de binnenste cirkel wordt opgegeven met behulp van de innerRadius eigenschap en de straal van de buitenste cirkel wordt opgegeven met behulp van de outerRadius eigendom. De X en Y eigenschappen bepalen de positie van het centrum van de ster.
U kunt de ringen die u maakt, schalen en roteren met behulp van de scaleX, scaleY, schaal, en omwenteling eigenschappen. Houd er echter rekening mee dat rotatie geen effect lijkt te hebben tenzij u de ring met verschillende magnitudes in de x- en y-richting hebt geschaald.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var ringA = nieuwe Konva.Ring (x: 125, y: 100, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (200,0.200, 1)",); var ringB = nieuwe Konva.Ring (x: 200, y: 100, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (0, 0, 200, 0.5)",); var ringC = nieuwe Konva.Ring (x: 475, y: 175, innerRadius: 90, outerRadius: 100, stroke: "orange", fill: "yellow",); var ringD = nieuwe Konva.Ring (x: 325, y: 100, innerRadius: 20, outerRadius: 40, scaleY: 2, scaleX: 0.3, rotation: 45, stroke: "black", fill: "lightgreen", ); var starA = nieuwe Konva.Star (x: 200, y: 275, numPoints: 20, innerRadius: 50, outerRadius: 115, stroke: "black", fill: "black",); var ringE = nieuwe Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 90, stroke: "black", fill: "red",); var starB = nieuwe Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 50, outerRadius: 80, stroke: "black", fill: "white",); var starC = nieuwe Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 25, outerRadius: 50, stroke: "black", fill: "orange",); var ringF = nieuwe Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 20, stroke: "black", fill: "white",); layerA.add (ringA, ringB, ringC, ringD, sterA, ringE, sterB, sterC, ringF); stage.add (layerA);
In het volgende voorbeeld heb ik meerdere ster- en ringvormen over elkaar gelegd om een mooi patroon te maken. De drie sterren en twee ringen in het patroon zijn concentrisch. Houd er rekening mee dat wanneer je iets probeert te creëren altijd eerst de grootste vorm tekent. Als ik had toegevoegd STARA later naar de laag, zou het alle kleinere ringen en sterren bedekt hebben, waardoor ze voor de toeschouwers verborgen waren.
U kunt tekst op een canvas schrijven met behulp van de Konva.Text () voorwerp. Wanneer u een tekstobject maakt, kunt u de waarde voor de lettertypefamilie, tekengrootte, tekenstijl en lettertypevariant opgeven met behulp van de fontFamily, lettertypegrootte, lettertype, en fontVariant eigenschappen. De standaardlettertypefamilie is Arial en de standaardlettergrootte is 12. U kunt de lettertypen instellen lettertype eigenschap op normaal, vet of cursief. evenzo, fontVariant kan worden ingesteld op normale of kleine caps.
De daadwerkelijke tekst die u wilt schrijven, kunt u opgeven met de tekst eigendom. Als er niet genoeg ruimte tussen de regels is in een commentaarregel met meerdere regels, kunt u deze verhogen met behulp van de lijnhoogte eigendom.
Het punt linksboven waarvan Konva moet beginnen met het schrijven van de tekst, wordt gespecificeerd met behulp van de X en Y eigenschappen. U kunt de breedte van de tekst beperken met de eigenschap width. Alle tekst die u schrijft, wordt standaard uitgelijnd gelaten. U kunt het uitlijnen met rechts of in het midden met behulp van de richten eigendom.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var textA = new Konva.Text (y: 25, width: canvasWidth, align: 'center', text: "QUOTE OF THE DAY", fontSize: 50, fontFamily: "Lato"); var textB = new Konva.Text (x: canvasWidth / 10, y: 175, width: canvasWidth * 8/10, align: 'center', lineHeight: 1.4, text: "Je moet dansen alsof er niemand kijkt, \ n Liefde alsof je nooit gewond zult raken, \ n Zing alsof er niemand luistert, \ n En leef alsof het de hemel op aarde is. ", fontSize: 25, fontFamily:" Lato "); var rectA = new Konva.Rect (x: canvasWidth / 10 - 10, y: 140, width: canvasWidth * 8/10 + 20, height: 240, stroke: "black", fill: "brown"); var rectB = new Konva.Rect (x: canvasWidth / 10, y: 150, width: canvasWidth * 8/10, height: 220, stroke: "black", fill: "lightblue"); var starA = nieuwe Konva.Star (x: canvasWidth / 10, y: 150, innerRadius: 40, outerRadius: 30, numPoints: 10, stroke: "black", fill: "orange"); layerA.add (textA, rectA, starA, rectB, textB); stage.add (layerA);
In het bovenstaande voorbeeld moet u opmerken dat ik heb toegevoegd textB naar de laag na het toevoegen van alle andere elementen. Op deze manier kunnen we ervoor zorgen dat het eigenlijke citaat bovenop alle andere vormen blijft.
De tekst die u op het canvas schrijft, hoeft geen rechte lijnen te volgen. U kunt ook een pad opgeven voor de tekst die moet worden gevolgd met behulp van de gegevens eigendom. Het pad wordt aangeboden in de vorm van een SVG-gegevensreeks en kan opdrachten bevatten om lijnen, curven en bogen te volgen.
Een belangrijk ding dat u moet onthouden, is dat de tekst die u langs een specifiek pad wilt schrijven, moet worden gemaakt met behulp van de Konva.TextPath () voorwerp. Hier is een voorbeeld dat het pad biedt voor de te volgen tekst in de vorm van een Cubic Bezier-curve.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var textA = nieuwe Konva.TextPath (y: 25, align: 'center', data: 'M100.300 C150.100 200,50 500 60', tekst: "DEZE TEKST GAAT LANGS EEN PAD", fontSize: 35, fontFamily: "Lato", vul in: "orange"); var textB = new Konva.TextPath (y: 28, align: 'center', data: 'M100,320 C200,200 400,400 500 80', tekst: "DEZE TEKST GAAT OVER EEN ANDER PAD", fontSize: 25, fontFamily: "Lato", vul in: "groen"); layerA.add (textA, textB); stage.add (layerA);
U zou nu in staat moeten zijn verschillende vormen te maken met behulp van de methoden die we in deze en de vorige zelfstudie hebben besproken, maar soms heeft het meer zin om een afbeelding direct te gebruiken wanneer u probeert een afbeelding op het canvas te tekenen. Met Konva kunt u afbeeldingen tekenen met behulp van de Konva.Image () voorwerp.
De positie van de linkerbovenhoek van een afbeelding wordt bepaald door de waarde van de X en Y eigenschappen. Evenzo worden de breedte en hoogte gespecificeerd met behulp van de breedte en hoogte eigenschappen. De waarden van de breedte en hoogte eigenschappen hoeven niet gelijk te zijn aan de werkelijke afmetingen van de afbeelding. U kunt de afbeelding ook schalen of roteren met behulp van de omwenteling, schaal, scaleX, en scaleY eigenschappen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var theImage = new Image (); theImage.src = "path / to / the / image.jpg"; theImage.onload = function () var field = new Konva.Image (x: 35, y: 115, image: the Image, width: 500, height: 250, rotation: -10, stroke: "black", strokeWidth: 15); layerA.add (veld); stage.add (layerA); ;
Het is de moeite waard om op te merken dat ik in de bovenstaande code de Konva.Image () object nadat de afbeelding al was geladen. Probeert de Konva.Image () object voordat de afbeelding is geladen, resulteert in een fout. De afbeelding van het veld is overgenomen van Pixabay.
Konva laat je ook toe om sprites op het canvas te maken met behulp van de Konva.Sprite () voorwerp. Het enige verschil is dat je deze keer de animatie en animaties toetsen naast de afbeeldingssleutel die we eerder hebben gebruikt tijdens het renderen van de afbeelding.
De animatie sleutel accepteert een string die de ID kaart van de af te spelen animatie. De animaties key accepteert een object dat de animatiekaart voor de sprite als waarde opslaat. U kunt de snelheid bepalen waarmee een sprite-animatie moet worden afgespeeld met behulp van de frame rate eigendom.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var theSprite = new Image (); theSprite.src = "path / to / hero_spritesheet.png"; var animations = standing: [0, 0, 80, 94], walking: [0, 94, 80, 94, 80, 94, 80, 94, 160, 94, 80, 94, 240, 94, 80, 94 , 320, 94, 80, 94, 400, 94, 80, 94], springen: [0, 282, 80, 94, 80, 282, 80, 94, 160, 282, 80, 94]; theSprite.onload = function () var heroA = new Konva.Sprite (x: 50, y: 50, image: theSprite, animation: 'standing', animations: animations, frameRate: 6, frameIndex: 0); var heroB = new Konva.Sprite (x: 50, y: 150, image: theSprite, animation: 'walking', animations: animations, frameRate: 6, frameIndex: 0); var heroC = new Konva.Sprite (x: 50, y: 250, image: theSprite, animation: 'walking', animations: animations, frameRate: 60, frameIndex: 0); var heroD = new Konva.Sprite (x: 275, y: 150, scale: 2, image: theSprite, animation: 'jumping', animations: animations, frameRate: 2, frameIndex: 0); layerA.add (heroA, heroB, heroC, heroD); stage.add (layerA); heroA.start (); heroB.start (); heroC.start (); heroD.start (); ;
De breedte en hoogte van onze heldensprite zijn respectievelijk 80px en 94px. Ik heb deze waarden gebruikt om Konva de positie te geven van een sprite die moet worden getoond tijdens het afspelen van een specifieke animatiereeks. Elke animatiereeks heeft een ID kaart om te identificeren wat de held aan het doen is. Deze ID kaart wordt later gebruikt als u Konva wilt vertellen welke animatie hij moet spelen. Net als in het vorige voorbeeld heb ik de held geïnstantieerd nadat de afbeelding is geladen om fouten te voorkomen.
Het hero-sprite-blad dat we gebruiken in de demo is gemaakt door tokka. Ik heb ook dezelfde afbeelding gebruikt in de Crafty Beyond the Basics: Sprites-tutorial om een sprite-animatie te maken. De tutorials in die serie laten je zien hoe je een eenvoudig 2D-spel kunt maken met behulp van Crafty.
Terugkomend op Konva, toont het volgende voorbeeld een lopende en springende held-animatie. De held onderaan heeft een hoger frame rate waarde, waardoor het lijkt alsof de held op bovenmenselijke snelheden draait.
Na het voltooien van de tweede en derde zelfstudie, zou je nu in staat moeten zijn om veel vormen, patronen en ontwerpen zelf te maken met Konva. De laatste sectie liet je ook zien hoe je afbeeldingen en sprites tekent op je canvas. Dit zou al uw tekengerelateerde behoeften moeten dekken.
Als je vragen hebt over deze tutorial, help ik je graag. In de volgende zelfstudie leert u hoe u uw vormen kunt vullen met verlopen en hoe u schaduwen kunt toepassen op alles dat u op het canvas tekent.
Accentsconagua