Share
La tela HTML5 è stata supportata da tutti i browser più popolari da molto tempo. Puoi usarlo per disegnare grafici in un browser con l'aiuto di JavaScript. La grafica che può essere creata su una tela varia da linee e forme semplici a composizioni e animazioni di foto.
In questa serie, imparerai a conoscere una libreria di tela molto utile chiamata Konva. Puoi usare Konva per disegnare forme diverse sulla tela o sul palco. Tra le altre cose, la libreria consente di ridimensionare, ruotare e animare tutte queste forme e allegare loro i listener di eventi.
Questo tutorial si concentrerà sui concetti fondamentali della libreria fornendo al contempo una breve panoramica delle diverse funzionalità della libreria. Successivamente, passeremo ad argomenti più specifici e complessi in seguito. La libreria nacque come una forchetta della famosa libreria KineticJS.
Tutto ciò che disegni con Konva ti richiederà di creare un palco usando Konva.Stage. Puoi specificare l'elemento contenitore di uno stage usando il contenitore attributo. Ogni fase richiede anche un valore di larghezza e altezza che può essere specificato utilizzando larghezza e altezza attributi rispettivamente.
Una singola fase può contenere più livelli. Ciascuno di questi strati ne avrà due renderer. Il renderer di scena è usato per disegnare tutte le forme che sono visibili sul palco. Il renderer del grafico di successo è nascosto agli utenti. Viene utilizzato per eseguire il rilevamento di eventi ad alte prestazioni.
Un singolo livello può contenere più forme, gruppi di forme diverse o un gruppo di gruppi. Il palcoscenico, i livelli, i gruppi e le forme si comportano come nodi virtuali che possono essere personalizzati e trasformati.
Prima di creare qualsiasi forma, è necessario includere la libreria nel progetto. Ci sono molti modi per farlo. Se si utilizzano i gestori di pacchetti, è possibile eseguire i seguenti comandi.
npm install konva // OR bower install konva
Puoi anche collegarti direttamente a una versione ridotta della libreria ospitata su cdnjs e jsDelivr.
Una volta installata la libreria, è possibile utilizzare il codice seguente per creare forme rettangolari 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: 75, y: 150, width: 200, height: 50, rotation: 45, fill: "blue", stroke: "black", strokeWidth: 4); var rectB = new Konva.Rect (x: 350, y: 50, width: 100, height: 250, cornerRadius: 50, fill: "red", stroke: "brown", strokeWidth: 10); layerA.add (recta); layerA.add (rectB); stage.add (layerA);
Disegnare qualsiasi cosa sulla tela è un processo in cinque fasi. In primo luogo, è necessario creare un'istanza di uno stage in cui verranno disegnate forme diverse Konva.Stage. Ciò richiede di specificare la larghezza e l'altezza dello stage e il id per l'elemento contenitore che conterrebbe lo stage. Nel nostro caso, i rettangoli vengono disegnati all'interno di a div di chi id è esempio.
Nel prossimo passaggio devi istanziare tutti i livelli che vuoi rendere sul tuo stage. In questo esempio creiamo solo un singolo livello, ma puoi creare più livelli e aggiungerli tutti a un unico livello. Livelli diversi possono essere molto utili quando lo sfondo è costituito da elementi statici e in movimento. In questi casi, puoi aggiungere gli elementi statici su un livello e spostare gli elementi sull'altro. Poiché non è necessario aggiornare lo sfondo statico dopo ogni nuovo aggiornamento, questo può migliorare drasticamente le prestazioni.
Dopo aver creato i livelli, puoi inizializzare forme diverse come rettangoli, ellissi, stelle e anelli che vuoi mostrare sui livelli. Infine, devi aggiungere le forme ai livelli e i livelli allo stage.
Raggruppare diverse forme insieme è una buona idea quando si desidera gestire tutte le forme come una singola unità. Ad esempio, diciamo che hai creato un'auto usando due cerchi per ruote e due blocchi rettangolari per il corpo. Se vuoi spostare questa macchina in avanti senza creare un gruppo, dovrai tradurre singolarmente tutte le forme una alla volta. Un metodo più efficiente consiste semplicemente nell'aggiungere cerchi e rettangoli a un gruppo e tradurli tutti in una volta.
Per aggiungere una forma a un gruppo, è necessario utilizzare il Inserisci() metodo, proprio come hai fatto quando aggiungi forme a un livello. Puoi anche aggiungere un gruppo a un altro gruppo per creare entità più complesse. Ad esempio, puoi creare una persona all'interno dell'automobile come un gruppo e aggiungere quella persona al gruppo che rappresenta la macchina.
Nell'esempio seguente, ho mantenuto le cose semplici e creato solo a CARA gruppo. Dopo di ciò, posso ruotare e scalare l'intera macchina in una sola volta.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var wheelA = new Konva.Ring (x: 130, y: 230, innerRadius: 5, outerRadius: 30, fill: "gray", stroke: "black", nome: "First Wheel"); var wheelB = new Konva.Ring (x: 270, y: 230, innerRadius: 5, outerRadius: 30, fill: "gray", stroke: "black", nome: "Second Wheel"); var frameA = new Konva.Rect (x: 80, y: 150, width: 240, height: 60, cornerRadius: 10, fill: "red", tratto: "black", nome: "Bottom Frame"); var frameB = new Konva.Rect (x: 135, y: 90, width: 120, height: 60, cornerRadius: 10, fill: "orange", stroke: "black", nome: "Top Frame"); var carA = new Konva.Group (x: 50, y: 0, rotation: 20, scaleX: 1.2); carA.add (wheelA, wheelB, frameA, frameB); layerA.add (cara); stage.add (layerA);
Sai già dei livelli in Konva. Stratificare è qualcosa di diverso. Per impostazione predefinita, tutte le forme aggiunte a un livello vengono disegnate nell'ordine in cui sono state aggiunte. Ciò significa che le forme aggiunte a un livello dopo tutte le altre verranno disegnate sopra altre forme.
Konva ti permette di controllare l'ordine in cui le forme sono disegnate usando diversi metodi di stratificazione come moveToTop (), moveToBottom (), andare avanti(), abbassati(), e zIndex ().
Il moveToTop () il metodo disegnerà la forma data su tutte le altre forme che sono state aggiunte allo stesso livello. Forme disegnate su un livello che è stato aggiunto allo stage di Konva dopo lo strato della nostra forma specifica rimarrà comunque sopra la nostra forma. Questo è il motivo per cui il cerchio indaco nel seguente esempio rimane al di sotto del cerchio verde chiaro anche dopo aver chiamato moveToTop ().
Il moveToBottom () il metodo disegnerà la forma indicata sotto tutte le altre forme che sono state aggiunte allo stesso livello. Proprio come moveToTop (), le forme si sposteranno sul fondo dei propri livelli e non sugli strati sottostanti.
Il andare avanti() e abbassati() i metodi spostano la forma su cui sono chiamati, una posizione sopra o sotto la loro posizione corrente nello stesso livello. Il zIndex () metodo è usato per impostare l'indice di una forma all'interno del suo livello genitore. A differenza dei CSS, non è possibile impostare un arbitrario zIndex valore in Konva. Per un livello con 10 forme, il zIndex il valore può essere compreso tra 0 e 9 (incluso).
Nell'esempio sopra, puoi vedere che premendo semplicemente il pulsante "Indigo Top" non si disegna il cerchio indaco sopra tutti gli altri, mentre premendo "Indigo Sopra tutti gli altri" lo posizionerai in alto. Questo perché l'ultimo pulsante sposta anche il livello contenente il cerchio indaco verso l'alto.
Poiché i cerchi possono essere trascinati, potrebbe essere una buona idea trascinarli l'uno sull'altro e vedere come cambia la posizione del cerchio indaco quando si premono pulsanti diversi.
In questo tutorial abbiamo trattato alcuni concetti fondamentali relativi a Konva. Ora dovresti essere in grado di disegnare alcune forme comuni sulla tela e spostarle come gruppo. Il tutorial ti mostra anche come spingere una particolare forma in alto o in basso in caso di sovrapposizione.
JavaScript è diventato una delle lingue di fatto del lavoro sul web. Non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione su Envato Market.
Se hai domande relative a questo tutorial, sentiti libero di farmi sapere nei commenti. Il prossimo tutorial ti insegnerà come disegnare forme di base in Konva.
Accentsconagua