Share
Nel secondo tutorial di questa serie, hai imparato come disegnare forme base usando Konva. Puoi combinare le forme di base in un modo o nell'altro per creare stelle, anelli, frecce, orologi o una capanna. Konva consente anche di creare forme complesse comuni utilizzando le funzioni integrate fornite dalla libreria.
In questo tutorial imparerai come creare stelle e anelli in Konva. Dopodiché, discuteremo come scrivere testo usando Konva e come scriverlo lungo un percorso specifico. Imparerai anche come disegnare immagini e sprite su una tela usando Konva.
Rispetto a molte altre forme complesse che è possibile disegnare sulla tela, una forma a stella è una delle più comuni. Con il giusto insieme di valori, puoi anche trasformare le stelle appuntite in semplici forme simili a badge. Konva ti permette di disegnare stelle usando il Konva.Star () oggetto.
Puoi specificare il numero di picchi che una stella dovrebbe avere usando il NumPoints proprietà. Puoi controllare la dimensione di quei picchi usando il innerRadius e outerRadius proprietà. Una grande differenza nel valore di queste proprietà renderà le stelle più appuntite. Impostando il raggio esterno uguale al raggio interno creerai un poligono regolare con il numero di lati doppio del valore di NumPoints. Variare i valori di NumPoints, innerRadius, e outerRadius può risultare in alcune forme interessanti.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var starA = new Konva.Star (x: 70, y: 80, numPoints: 4, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (200,0,200, 1)",) ; var starB = new Konva.Star (x: 200, y: 100, numPoints: 8, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (0, 0, 200, 1)", ); var starC = new Konva.Star (x: 475, y: 175, numPoints: 20, innerRadius: 90, outerRadius: 100, stroke: "orange", fill: "yellow",); var starD = new Konva.Star (x: 325, y: 75, numPoints: 5, innerRadius: 20, outerRadius: 40, stroke: "black", fill: "lightgreen",); var starE = new Konva.Star (x: 100, y: 250, numPoints: 25, innerRadius: 25, outerRadius: 80, stroke: "black", fill: "white",); var starF = new 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);
Come al solito, puoi ruotare e ridimensionare le forme a stella che crei usando il rotazione, scala, scaleX, e scaleY proprietà. Allo stesso modo, puoi controllare l'opacità di una stella usando il opacità proprietà e mostrare o nascondere con l'aiuto del visibile proprietà.
Gli anelli di Konva consistono in un cerchio solido più grande e un cerchio cavo più piccolo posto sopra di esso. Il raggio della circonferenza interna è specificato usando il innerRadius proprietà, e il raggio del cerchio esterno è specificato usando il outerRadius proprietà. Il X e y le proprietà controllano la posizione del centro della stella.
Puoi ridimensionare e ruotare gli anelli che crei usando il scaleX, scaleY, scala, e rotazione proprietà. Tuttavia, tieni presente che la rotazione non sembra avere alcun effetto a meno che tu non abbia ridimensionato l'anello con diverse grandezze nella direzione xey.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var ringA = new Konva.Ring (x: 125, y: 100, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (200,0,200, 1)",); var ringB = new Konva.Ring (x: 200, y: 100, innerRadius: 10, outerRadius: 50, stroke: "black", fill: "rgba (0, 0, 200, 0.5)",); var ringC = new Konva.Ring (x: 475, y: 175, innerRadius: 90, outerRadius: 100, stroke: "orange", fill: "yellow",); var ringD = new Konva.Ring (x: 325, y: 100, innerRadius: 20, outerRadius: 40, scaleY: 2, scaleX: 0.3, rotation: 45, stroke: "black", fill: "lightgreen", ); var starA = new Konva.Star (x: 200, y: 275, numPoints: 20, innerRadius: 50, outerRadius: 115, stroke: "black", fill: "black",); var ringE = new Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 90, stroke: "black", fill: "red",); var starB = new Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 50, outerRadius: 80, stroke: "black", fill: "white",); var starC = new Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 25, outerRadius: 50, stroke: "black", fill: "orange",); var ringF = new Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 20, stroke: "black", fill: "white",); layerA.add (ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF); stage.add (layerA);
Nell'esempio seguente, ho sovrapposto più stelle e forme di suoneria per creare un motivo piacevole. Le tre stelle e due anelli nel motivo sono concentrici. Tieni presente che ogni volta che stai cercando di creare qualcosa di simile, disegna sempre la forma più grande. Se avessi aggiunto STARA in seguito allo strato, avrebbe coperto tutti gli anelli e le stelle più piccoli, nascondendoli agli spettatori.
Puoi scrivere del testo su una tela usando il Konva.Text () oggetto. Quando si crea un oggetto di testo, è possibile specificare il valore per la famiglia di caratteri, la dimensione del carattere, lo stile del carattere e la variante del carattere usando il famiglia di font, dimensione del font, stile del font, e fontVariant proprietà. La famiglia di font di default è Arial, e la dimensione del font di default è 12. Puoi impostare il file stile del font proprietà normale, grassetto o corsivo. allo stesso modo, fontVariant può essere impostato su normale o small cap.
Il testo effettivo che si desidera scrivere può essere specificato utilizzando testo proprietà. Se non c'è abbastanza spazio tra le righe in un commento su più righe, è possibile aumentarlo utilizzando il comando altezza della linea proprietà.
Il punto in alto a sinistra da cui Konva dovrebbe iniziare a scrivere il testo viene specificato usando X e y proprietà. Puoi limitare la larghezza del testo usando la proprietà width. Qualsiasi testo che scrivi verrà lasciato allineato per impostazione predefinita. Puoi allinearlo a destra o al centro usando il allineare proprietà.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new 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: "Devi ballare come se nessuno guardasse, \ n Ama come se non fossi mai ferito, \ n Canta come se nessuno ascoltasse, \ n E vivi come se fosse il paradiso in terra. ", 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 = new 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);
Nell'esempio sopra, dovresti notare che ho aggiunto textB allo strato dopo aver aggiunto tutti gli altri elementi. In questo modo possiamo essere sicuri che la quotazione attuale rimanga in cima a tutte le altre forme.
Il testo che scrivi sulla tela non deve seguire linee rette. È inoltre possibile fornire un percorso per il testo da seguire utilizzando il dati proprietà. Il percorso è fornito sotto forma di una stringa di dati SVG e può includere comandi per seguire linee, curve e archi.
Una cosa importante che dovresti ricordare è che il testo che vuoi scrivere lungo un percorso specifico deve essere creato usando il Konva.TextPath () oggetto. Ecco un esempio che fornisce il percorso per il testo da seguire sotto forma di una curva di Bezier cubica.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var textA = new Konva.TextPath (y: 25, align: 'center', data: 'M100,300 C150,100 200,50 500 60', testo: "QUESTO TESTO VA LUNGO UN PERCORSO", fontSize: 35, fontFamily: "Lato", riempire: "orange"); var textB = new Konva.TextPath (y: 28, align: 'center', data: 'M100,320 C200,200 400,400 500 80', testo: "QUESTO TESTO VA LUNGO UN ALTRO PERCORSO", fontSize: 25, fontFamily: "Lato", riempire: "verde"); layerA.add (textA, textB); stage.add (layerA);
Ora dovresti essere in grado di creare una varietà di forme usando i metodi che abbiamo discusso in questo e nel tutorial precedente, ma a volte ha più senso usare direttamente un'immagine quando si tenta di disegnare un disegno sulla tela. Konva ti permette di disegnare immagini usando il Konva.Image () oggetto.
La posizione dell'angolo in alto a sinistra di un'immagine è determinata dal valore di X e y proprietà. Allo stesso modo, la sua larghezza e altezza sono specificate usando il larghezza e altezza proprietà. I valori di larghezza e altezza le proprietà non devono essere uguali alle dimensioni reali dell'immagine. Puoi anche ridimensionare o ruotare l'immagine usando il rotazione, scala, scaleX, e scaleY proprietà.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var theImage = new Image (); theImage.src = "percorso / verso / il / image.jpg"; theImage.onload = function () var field = new Konva.Image (x: 35, y: 115, image: theImage, width: 500, height: 250, rotation: -10, stroke: "black", strokeWidth: 15); layerA.add (campo); stage.add (layerA); ;
Vale la pena notare che nel codice sopra, ho istanziato il Konva.Image () oggetto dopo che l'immagine era già stata caricata. Cercando di istanziare il Konva.Image () oggetto prima che l'immagine sia caricata causerà un errore. L'immagine del campo è stata presa da Pixabay.
Konva ti permette anche di renderizzare sprite sulla tela con l'aiuto di Konva.Sprite () oggetto. L'unica differenza è che questa volta devi usare il animazione e animazioni tasti in aggiunta alla chiave immagine che abbiamo usato in precedenza durante il rendering dell'immagine.
Il animazione la chiave accetta una stringa che specifica il id dell'animazione da riprodurre. Il animazioni la chiave accetta un oggetto che memorizza la mappa di animazione dello sprite come valore. Puoi controllare la velocità con cui un'animazione sprite dovrebbe essere riprodotta usando il frequenza dei fotogrammi proprietà.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var theSprite = new Image (); theSprite.src = "percorso / a / 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], saltando: [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', animazioni: animazioni, frameRate: 6, frameIndex: 0); var heroB = new Konva.Sprite (x: 50, y: 150, image: theSprite, animazione: 'walking', animazioni: animazioni, frameRate: 6, frameIndex: 0); var heroC = new Konva.Sprite (x: 50, y: 250, image: theSprite, animazione: 'walking', animazioni: animazioni, frameRate: 60, frameIndex: 0); var heroD = new Konva.Sprite (x: 275, y: 150, scala: 2, immagine: theSprite, animazione: 'jumping', animazioni: animazioni, frameRate: 2, frameIndex: 0); layerA.add (heroA, heroB, heroC, heroD); stage.add (layerA); heroA.start (); heroB.start (); heroC.start (); heroD.start (); ;
La larghezza e l'altezza del nostro eroe sprite sono rispettivamente 80px e 94px. Ho usato questi valori per dire a Konva la posizione di uno sprite che dovrebbe essere mostrato mentre si gioca una sequenza di animazione specifica. Ogni sequenza di animazione è stata data a id per identificare cosa sta facendo l'eroe. Questo id è usato più tardi quando vuoi dire a Konva quale animazione dovrebbe suonare. Proprio come nell'esempio precedente, ho istanziato l'eroe dopo che l'immagine è stata caricata per evitare errori.
Il foglio dell'eroe sprite che stiamo usando nella demo è stato creato da tokka. Ho anche usato la stessa immagine nel tutorial di Crafty Beyond the Basics: Sprites per creare un'animazione sprite. I tutorial di quella serie ti mostrano come creare un semplice gioco 2D usando Crafty.
Tornando a Konva, il seguente esempio mostra un'animazione dell'eroe che cammina e salta. L'eroe in fondo ha un punteggio più alto frequenza dei fotogrammi valore, che fa sembrare che l'eroe stia correndo a velocità sovrumane.
Dopo aver completato il secondo e il terzo tutorial, ora dovresti essere in grado di creare un sacco di forme, schemi e disegni utilizzando Konva. L'ultima sezione ti ha mostrato come disegnare immagini e sprite sulla tua tela. Questo dovrebbe coprire tutte le tue esigenze relative al disegno.
Se hai domande relative a questo tutorial, sarei lieto di aiutarti. Il prossimo tutorial ti insegnerà come riempire le tue forme con sfumature e come applicare ombre su tutto ciò che disegni sulla tela.
Accentsconagua