Share
Nel secondo tutorial della serie, hai imparato a disegnare alcune forme di base come rettangoli, cerchi e poligoni regolari usando Konva. Il terzo tutorial illustrava come utilizzare Konva per disegnare forme più complesse come stelle e anelli e sprite sulla tela.
In questo tutorial, faremo un ulteriore passo avanti e impareremo come applicare stili diversi alle forme modificando i loro valori di riempimento e di tratto. Imparerai anche come controllare l'opacità di una forma e applicare ombre ad essa. Nelle sezioni finali, imparerai come usare le modalità di fusione per specificare come dovrebbe apparire il risultato finale se si sovrappongono forme diverse.
Abbiamo usato il riempire e ictus proprietà del primo tutorial della serie. Tuttavia, li abbiamo utilizzati solo per riempire forme con un colore solido finora. Puoi anche riempire una forma con sfumature (sia lineari che radiali) e immagini. Lo stesso vale per i diversi tratti applicati a una forma.
Esistono due modi per applicare un riempimento a forme diverse. È possibile impostare il valore di riempimento utilizzando il riempire proprietà quando viene creata per la prima volta una forma in Konva, oppure puoi usare il riempire() metodo per applicare un riempimento dinamico in risposta ad alcuni eventi come passaggio del mouse, clic del pulsante, ecc.
Quando si riempie un elemento con un colore solido, è possibile specificare un valore per il riempire proprietà e funzionerà bene. Quando si utilizza un gradiente lineare per riempire l'interno di una forma, è necessario specificare valori validi per molte altre proprietà come fillLinearGradientStartPoint, fillLinearGradientEndPoint, e fillLinearGradientColorStops. Le prime due proprietà accettano oggetti che specificano le coordinate x e y dei punti iniziale e finale di un gradiente. È inoltre possibile specificare separatamente i valori xey utilizzando il fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, e fillLinearGradientEndPointY proprietà.
I gradienti radiali hanno anche lo stesso insieme di proprietà, ma la parola Lineare è sostituito con Radiale. Due proprietà aggiuntive relative ai gradienti radiali sono fillRadialGradientStartRadius e fillRadialGradientEndRadius.
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: 25, y: 25, larghezza: 200, altezza: 150, fillLinearGradientStartPoint: x: 0, y: 0, fillLinearGradientEndPoint: x: 200, y: 150, fillLinearGradientColorStops : [0, 'blu', 1, 'giallo'], tratto: "nero"); var rectB = new Konva.Rect (x: 375, y: 25, width: 200, height: 150, fillLinearGradientStartPoint: x: 0, y: 50, fillLinearGradientEndPoint: x: 100, y: -50, fillLinearGradientColorStops: [0, 'green', 0.1, 'yellow', 0.5, 'red', 0.9, 'black'], tratto: "black"); var rectC = new Konva.Rect (x: 25, y: 200, width: 200, height: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 220, fillRadialGradientColorStops: [0, 'green', 0.5, 'yellow', 0.75, 'rosso', 0.9, 'nero'], tratto: "nero"); var rectD = new Konva.Rect (x: 375, y: 200, larghezza: 200, altezza: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 150, fillRadialGradientStartPoint: x: 100, y: 75, fillRadialGradientEndPoint: x: 100, y: 75, fillRadialGradientColorStops: [0, 'blue', 0.5, 'yellow', 0.9, 'green'], tratto: "black"); layerA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Quando non specificato, si assume che il punto iniziale e finale di un gradiente radiale siano 0,0. Questo è il motivo per cui il gradiente radiale nel terzo rettangolo proviene dall'angolo in alto a sinistra. Ricorda inoltre che i punti iniziale e finale sono specificati in relazione alla forma stessa.
Proprio come il riempimento, puoi impostare un valore per il colore del tratto e la larghezza del tratto usando ictus e strokeWidth proprietà quando una forma viene prima istanziata. Puoi anche impostare dinamicamente entrambi questi valori usando il ictus() e strokewidth () metodi.
Puoi applicare ombre a qualsiasi forma creata usando Konva con l'aiuto di quattro diverse proprietà chiamate shadowColor, shadowOffset, shadowBlur, e shadowOpacity. Il shadowOffset proprietà accetta un oggetto con X e y componenti come valore, ma puoi anche usarlo shadowOffsetX e shadowOffsetY per specificare il X e y coordinate separatamente. Hai anche la possibilità di abilitare e disabilitare le ombre per ogni forma particolare usando il shadowEnabled proprietà.
Puoi controllare l'opacità della forma stessa usando il opacità proprietà. Si prega di notare che un oggetto completamente trasparente non proietterà alcuna ombra. Allo stesso modo, se hai impostato il riempire colore di una forma a trasparente, solo l'ombra della sua ictus sarà reso sulla tela.
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: 25, y: 25, width: 200, height: 150, cornerRadius: 5, fill: "orange", opacity: 0.5, shadowColor: "black", shadowOffset: x: -10, y: 10, shadowBlur: 10, tratto: "nero"); var starA = new Konva.Star (x: 400, y: 200, numPoints: 10, innerRadius: 50, outerRadius: 150, fill: "transparent", tratto: "black", strokeWidth: 5, shadowColor: "red" , shadowOffset: x: 5, y: 5, shadowBlur: 0); layerA.add (rectA, starA); stage.add (layerA);
Impostazione del shadowBlur proprietà a 0 rende l'ombra nitida come la forma originale stessa. L'impostazione di questo valore troppo alto farà sì che l'ombra perda la forma originale; vedrai solo una macchia scura sulla tela.
Vorrei sottolineare che è anche possibile creare ombre di testo con lo stesso insieme di proprietà dopo aver istanziato a Konva.Text () oggetto.
Finora nella serie, qualsiasi sovrapposizione tra le forme nascondeva completamente la forma inferiore. L'unico modo per mantenere visibile la forma inferiore era rendere parzialmente trasparenti tutte le forme su di esso.
A volte, potresti volere il risultato finale dopo la sovrapposizione di forme diverse per seguire determinate regole. Ad esempio, è possibile visualizzare solo il colore più chiaro o più scuro nei casi in cui le forme si sovrappongono.
Konva ti permette di specificare alcuni valori per determinare come i colori delle forme sovrapposte dovrebbero fondersi usando il globalCompositeOperation proprietà. Puoi leggere la documentazione su MDN per conoscere meglio la proprietà e tutti i suoi possibili valori.
Nell'esempio seguente, ho applicato una modalità di fusione diversa a ciascuno dei rettangoli posizionati all'angolo del rettangolo centrale.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var rectCenter = new Konva.Rect (x: 225, y: 125, width: 150, height: 150, fill: "rgb (255, 100, 0)"); var rectA = new Konva.Rect (x: 125, y: 25, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "lighten"); var rectB = new Konva.Rect (x: 325, y: 25, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "darken"); var rectC = new Konva.Rect (x: 125, y: 225, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "hue"); var rectD = new Konva.Rect (x: 325, y: 225, width: 150, height: 150, fill: "rgb (0, 255, 0)", globalCompositeOperation: "xor"); layerA.add (rectCenter, rectA, rectB, rectC, rectD); stage.add (layerA);
Il colore del rettangolo in alto a sinistra è rgb (0, 200, 100), e il colore del rettangolo centrale è rgb (255, 100, 0). Quando il alleggerire si applica la modalità di fusione, il rgb i componenti di entrambi i colori vengono confrontati singolarmente e i valori più alti per ciascun componente vengono utilizzati per ottenere il colore finale. Nel nostro caso, il colore finale per l'angolo in alto a sinistra diventa rgb (255, 200, 100).
Quando il scurire si applica la modalità di fusione, il rgb i componenti di entrambi i colori vengono confrontati singolarmente e i valori inferiori per ciascun componente vengono utilizzati per ottenere il colore finale. Nel nostro caso, il colore finale per l'angolo in alto a destra diventa rgb (0, 100, 0).
Quando il colore viene applicata la modalità di fusione, la luminanza e la crominanza del colore di fondo vengono combinate con la tonalità del colore superiore. Questo è il motivo per cui il colore finale rimane verde ma diventa più leggero. Quando il xor viene applicata la modalità di fusione, il colore finale diventa trasparente in tutti i punti di sovrapposizione.
In questo tutorial, abbiamo imparato come riempire una forma con sfumature lineari o radiali anziché colori solidi. Abbiamo anche imparato come applicare le ombre a forme diverse e renderle parzialmente trasparenti usando il opacità proprietà. La sezione finale mostrava come usare i metodi di fusione per cambiare il colore finale dopo la sovrapposizione di due forme.
Se avete domande relative a questo tutorial, fatemelo sapere nei commenti. Il prossimo e ultimo tutorial della serie ti insegnerà come associare gli eventi a forme diverse in Konva.
Accentsconagua