Share
Il tutorial introduttivo della serie ti ha insegnato come disegnare la tua prima forma usando Konva. Ha anche spiegato come funzionano i livelli e i gruppi in Konva. Nel resto della serie, ci concentreremo su argomenti più specifici come la creazione di forme di base e complesse o il collegamento di listener di eventi a forme diverse al fine di rendere la tua grafica interattiva.
Questo particolare tutorial ti mostrerà come creare forme base come rettangoli, cerchi ed ellissi in Konva. Imparerai anche diversi attributi che possono essere utilizzati per personalizzare l'aspetto di tutte queste forme in base alle tue esigenze. Le sezioni successive del tutorial illustreranno come disegnare diversi tipi di linee e poligoni regolari usando Konva.
Puoi creare rettangoli in Konva usando il Konva.rect () oggetto. La posizione dell'angolo in alto a sinistra di un rettangolo può essere specificata usando X e y proprietà. Allo stesso modo, puoi specificare la larghezza e l'altezza del rettangolo usando il larghezza e altezza proprietà. Tutti i rettangoli che disegni avranno angoli acuti di default. Tuttavia, puoi renderli rotondi scegliendo un valore appropriato per raggio dell'angolo proprietà.
È possibile mostrare o nascondere un rettangolo usando il visibile proprietà. Se non si desidera nascondere completamente un rettangolo ma renderlo semitrasparente, è possibile utilizzare il opacità proprietà. Puoi impostarlo su qualsiasi numero compreso tra 0 e 1 incluso. La forma non sarà visibile se l'opacità è impostata su 0.
Puoi anche ruotare o ridimensionare le forme del rettangolo usando il rotazione e scala proprietà rispettivamente. La rotazione viene specificata come un numero normale ma applicata in gradi. Hai la possibilità di ridimensionare qualsiasi rettangolo sull'asse xo y in modo indipendente usando il scaleX e scaleY proprietà.
Ecco un esempio che disegna rettangoli diversi su una tela utilizzando tutte le proprietà che abbiamo appena discusso.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var rectA = new Konva.Rect (x: 10, y: 10, larghezza: 200, altezza: 50, riempimento: "giallo", tratto: "nero"); var rectB = new Konva.Rect (x: 160, y: 30, larghezza: 80, altezza: 250, riempimento: "arancione", tratto: "nero"); var rectC = new Konva.Rect (x: 200, y: 160, width: 180, height: 180, cornerRadius: 10, strokeWidth: 10, opacity: 0.8, fill: "red", stroke: "black") ; var rectD = new Konva.Rect (x: 400, y: 20, larghezza: 180, altezza: 180, scalaX: 1,8, scalaY: 0,75, rotazione: 45, riempimento: "verde chiaro", tratto: "nero") ; layerA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Dovresti notare che i rettangoli sono non disegnato nell'ordine in cui sono stati creati. Invece, vengono disegnati nell'ordine in cui sono stati aggiunti al livello. Il riempire e ictus le proprietà vengono utilizzate per impostare rispettivamente il colore di riempimento e di tracciamento.
Puoi creare cerchi in Konva usando il Konva.circle () oggetto. Questa volta, il X e y le proprietà determinano il punto centrale per disegnare il cerchio. È comunque possibile specificare un valore per entrambe le proprietà width e height. Questi valori vengono utilizzati per calcolare il diametro del cerchio da disegnare. Tuttavia, un cerchio ha uguale larghezza e altezza. Ciò significa che il valore specificato in seguito ha la precedenza su quello specificato in precedenza in caso di conflitto. In altre parole, se imposti il larghezza di un cerchio a 100 e dopo impostare il suo altezza a 180, il cerchio avrà un diametro di 180 e la larghezza verrà ignorata.
Per evitare confusione, puoi omettere il larghezza e altezza proprietà e specificare un valore per il raggio del cerchio. Tieni presente che devi impostare il raggio su 50 per disegnare un cerchio di larghezza e altezza pari a 100.
In modo simile, puoi anche creare un'ellisse usando il Konva.ellipse () oggetto. L'unica differenza è che la proprietà raggio ora accetterà un oggetto con proprietà xey come valore. Se specificato, la proprietà width e height verrà ora applicata indipendentemente per determinare la forma finale dell'ellisse.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var circA = new Konva.Circle (x: 100, y: 100, larghezza: 180, riempimento: "giallo", tratto: "nero"); var circB = new Konva.Circle (x: 180, y: 150, height: 100, fill: "orange", stroke: "black"); var circC = new Konva.Circle (x: 200, y: 275, raggio: 100, opacità: 0.5, riempimento: "rosso", tratto: "nero"); var ellipA = new Konva.Ellipse (x: 400, y: 75, width: 70, height: 100, rotation: -15, fill: "lightgreen", stroke: "black"); var ellipB = new Konva.Ellipse (x: 400, y: 75, width: 80, height: 120, rotation: -15, strokeWidth: 5, fill: "white", stroke: "black"); var ellipC = new Konva.Ellipse (x: 450, y: 275, raggio: x: 100, y: 50, scalaY: 2, riempimento: "viola", tratto: "nero"); layerA.add (circA, circB, circC, ellipB, ellipA, ellipC); stage.add (layerA);
Dovresti notare quello ellipB ha maggiore altezza e larghezza rispetto a ellipA. Dal momento che entrambi hanno lo stesso X e y valori, ho dovuto aggiungere ellipB prima allo strato per mantenere ellipA visibile. Se ellipB è stato aggiunto dopo ellipA, sarebbe stato disegnato ellipA, nascondendolo dagli spettatori.
Se osservi da vicino, vedrai anche che il cerchio viola è in realtà un'ellisse con y raggio impostato a 50 e X raggio impostato su 100. Tuttavia, è stato ridimensionato di un fattore 2 nella direzione y. Il ridimensionamento aumenta anche la larghezza del tratto, rendendolo due volte più ampio nella parte superiore e inferiore dell'ellisse rispetto ai suoi bordi sinistro e destro.
Puoi usare il Konva.Line () oggetto per creare diversi tipi di linee e curve. Tutte le linee richiedono di specificare i punti attraverso i quali la linea deve passare usando punti proprietà. I punti sono specificati come una matrice.
È possibile partecipare a qualsiasi serie di punti forniti utilizzando il punti array per formare un poligono impostando il valore del chiuso attribuire a vero. Allo stesso modo, è possibile convertire un insieme di linee rette in spline impostando un valore per il tensione attributo. Un valore pari a zero si tradurrà in linee rette. Valori più alti creano linee più curvilinee.
È possibile creare una forma chiusa e sinuosa (un blob) impostando un valore per il tensione proprietà oltre a chiudere la curva impostando chiuso a vero.
Come il resto delle forme che abbiamo discusso, puoi impostare la larghezza del tratto per disegnare le linee usando il strokeWidth attributo. Puoi anche specificare a riempire colore per forme chiuse.
Nell'esempio seguente, ho utilizzato lo stesso insieme di punti per tracciare tutte le forme. Tuttavia, ho anche usato il mossa() metodo per spostare ogni forma di una distanza specifica in modo da evitare sovrapposizioni.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var lineA = new Konva.Line (punti: [50, 20, 100, 80, 140, 60, 80, 200, 20], tratto: "nero"); var lineB = new Konva.Line (punti: [50, 20, 100, 80, 140, 60, 80, 200, 20], chiuso: vero, riempimento: "giallo", tratto: "nero") ; var lineC = new Konva.Line (punti: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], tensione: 0.8, tratto: "blu"); var lineD = new Konva.Line (punti: [50, 20, 100, 80, 140, 60, 80, 200, 20], tensione: 1.8, tratto: "rosso"); var lineE = new Konva.Line (punti: [50, 20, 100, 80, 140, 60, 80, 200, 20], chiuso: true, tension: 2.2, fill: "lightblue", stroke: " nero" ); lineB.move (x: 180, y: 40); lineC.move (x: 380, y: 0); lineD.move (x: 0, y: 200); lineE.move (x: 180, y: 220); layerA.add (rigaA, rigaB, rigaC, lineaD, lineaE); stage.add (layerA);
Dovresti anche notare che le linee rosse e blu sono tracciate usando lo stesso insieme di punti, ma una diversa tensione valore cambia in modo significativo la forma finale della curva.
Puoi scegliere con cura il valore di diversi punti nel punti array per disegnare poligoni regolari come pentagoni ed esagoni. Disegnare poligoni regolari più complessi come gli ottagoni usando questo metodo può essere macchinoso e soggetto a errori. Per evitare errori, dovresti usare il Konva.RegularPolygon () oggetto per creare poligoni regolari.
Il X e y le proprietà vengono utilizzate per specificare il centro del poligono. Il raggio proprietà viene utilizzata per specificare la distanza tra il punto centrale del poligono e tutti i suoi vertici. Puoi usare il lati proprietà per specificare il numero di lati che il poligono dovrebbe avere. Tieni presente che tutti i lati di un poligono creato con questo metodo avranno le stesse lunghezze. Puoi cambiare la lunghezza di alcuni lati usando il scaleX e scaleY proprietà, ma cambierà anche la larghezza del tratto del lato scalato.
Proprio come tutte le altre forme che abbiamo discusso, puoi modificare la larghezza del tratto, l'opacità e la visibilità dei poligoni regolari usando strokeWidth, opacità, e visibilità.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var triangle = new Konva.RegularPolygon (x: 150, y: 275, lati: 3, raggio: 100, scalaY: 1.6, tratto: "nero", riempimento: "rgba (200,0,200, 1)",) ; var square = new Konva.RegularPolygon (x: 60, y: 60, lati: 4, raggio: 50, riempimento: "rgba (200,0,0, 0,5)", tratto: "nero"); var pentagon = new Konva.RegularPolygon (x: 160, y: 160, lati: 5, raggio: 80, riempimento: "rgba (0,200,0, 0,5)", tratto: "nero"); var hexagon = new Konva.RegularPolygon (x: 350, y: 120, lati: 6, raggio: 80, riempimento: "rgba (0,0,200, 0,5)", tratto: "nero"); var octagon = new Konva.RegularPolygon (x: 450, y: 275, lati: 8, raggio: 100, riempimento: "rgba (200,200,0, 0,5)", tratto: "nero"); layerA.add (triangolo, quadrato, pentagono, esagono, ottagono); stage.add (layerA);
In questo tutorial, abbiamo coperto le forme più semplici che Konva ci consente di disegnare sulla tela con facilità. Abbiamo anche imparato a conoscere diversi attributi che possono essere utilizzati per controllare l'aspetto di tutte queste forme. La maggior parte degli attributi sono comuni a tutte le forme, ma alcune sono applicabili solo su forme specifiche.
.
Accentsconagua