Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Introduzione alla libreria Raphael JS

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Danilo Maccioni (you can also view the original English article)

Raphael JS è un framework javascript snello ed affascinante, che permette di inserire disegni vettoriali nei browser! In questo seminario, introdurrò le basi delle funzionalità per il disegno, offrirò uno sguardo alle animazioni, esporrò l'accesso DOM e terminerò creando un bel widget per il vostro sito...

I dettagli del tutorial

  • Framework: Raphael JS
  • Versione: 1.0
  • Difficoltà: da principiante a intermedio
  • Stima del tempo di completamento: 30 minuti

1. Preparazione

Iniziamo scaricando Raphael JS da qui. In cima alla pagina, sulla destra, vedrete
copie compresse e non compresse della versione 1.0 di Raphael. Per il momento, raccomando di usare la versione non compressa - in questo
modo potrete consultare il sorgente e conoscere gli extra vantaggi  offerti dalla documentazione.

Ora che abbiamo una copia della libreria, creiamo un semplice documento HTML che chiameremo index.htm dove includeremo Rapahel. Includeremo anche our_script.js, che sarà il file dove
scriveremo le nostre istruzioni javascript, inoltre creiamo all'interno del body del documento, un div con id canvas_container, con minimi attributi di stile, che fungerà da
contenitore dei nostri disegni.

N.B. Il primo rilascio stabile (versione 1.0) è stato reso disponibile il 7 ottobre 2009, quindi è abbastanza recente. Segna un importante cambiamento nella maniera
di disegnare i path, perciò se state usando una versione precedente di Rapahel, impegnatevi ad aggiornare e verificare la documentazione riguardo alla retro-compatibilità.

2. Creiamo il foglio da disegno

Quando disegniamo con Raphael, lo facciamo dentro un foglio. Questo foglio, che referenzieremo nella variabile 'paper', viene generato usando
l'oggetto Raphael(). Abbiamo sempre l'obbligo di specificare la larghezza e l'altezza del foglio, ma anche la facoltà di specificare sia a) la posizione assoluta del
foglio relativa al viewport, oppure b) un elemento contenitore all'interno del quale possa essere disegnato il foglio.

In generale prediligo quest'ultimo (il b), dato che solitamente sappiamo dove si trovano i nostri div.  Dentro our_script.js, dovremmo attendere che il DOM sia caricato, dopodiché creeremo un foglio 500x500px
all'interno del nostro div canvas_container:

Tutti i nostri metodi per il disegno, saranno ora accessibili attraverso la variabile paper.

3. Le forme disponibili

Ora che abbiamo il nostro foglio, disegnamoci qualche forma dentro. L'origine, che è il punto x = 0, y = 0, è situato nell'angolo in alto a sinistra del
nostro foglio. Ciò significa che qualsiasi coordinata che specificheremo nei nostri metodi, saranno relativi a questo punto.

Prima di tutto, un cerchio. Modifichiamo il nostro our_script.js in questa maniera:

Questo disegnerà un cerchio con un raggio di 80px e il suo centro posizionato a x = 100 e y = 100. Possiamo disegnare tutti i cerchi che vogliamo, senza 
referenziarli ad una variabile:

Ora, disegnamo un rettangolo. Lo facciamo attraverso il metodo rect(), che prende come parametri: le coordinate x ed y dell'angolo alto sinistro della figura e la
sua larghezza ed altezza desiderate. 

Per finire, disegniamo un ellisse. I suoi parametri sono simili a quelli del cerchio (x, y, semiasse), tranne per il fatto che possiamo specificare i semiassi arbitrariamente.

Questa istruzione disegnerà un ellisse con semiasse maggiore x = 100 e semiasse minore y = 50, alle coordinate x = 200, y = 400. Il nostro file our_script.js, dovrebbe apparire così:

Se ora apriamo index.html nel nostro browser, dovremmo ottenere una serie di disegni di forme geometriche:

Qui l'esempio

4. Disegnare paths (percorsi)

Constatato che ottenere le forme disponibili è semplice, vediamo i path che ci permettono una maggiore flessibilità di disegno.
Quando disegniamo percorsi, può aiutarci immaginare un cursore oppure un punto di penna premuto sul nostro foglio. Quando generiamo il nostro foglio, il cursore ha origine
all'angolo in alto a sinistra. La prima cosa che dobbiamo fare, è quella di
alzare il cursore o penna e spostarci nell'area nella quale possiamo disegnare. 

Ad esempio, spostiamoci al centro del nostro foglio. Muoviamoci di 250px in senso orizzontale e 250px in quello verticale, in questo modo.

Facciamo questo attraverso il cosiddetto path string (stringa di percorso).

La stringa di percorso è una stringa che contiene l'isieme delle 'azioni' di comando ed i suoi relativi valori, corrispondenti alla forma che vogliamo disegnare. Muoviamo il nostro cursore a x = 250, y = 250 attraverso la seguente
stringa:

'M' significa che vogliamo spostarci senza disegnare alle coordinate x ed y che la seguono.

Ora che il nostro cursore si trova dove lo volevamo, disegnamo una linea relativa a questo punto usando il comando (L minuscola) 'l'.

Ciò disegnerà una linea sull'asse y verso l'alto di 50px. Componiamo una stringa di percorso che descrive un tetronimo del Tetris.

Il comando 'z' conclude il percorso - disegnando una linea che dall'ultima posizione torna al nostro punto di partenza, identificato attraverso il comando 'M'.

Ora diciamo a Raphael di disegnare questa stringa di percorso attraverso il metodo path(). Modifichiamo our_script.js in questa maniera:

Se ricaricate index.html, dovreste vedere un tetronimo così:

Le stringhe di percorso possono diventare incredibilmente complesse (in positivo) utilizzando i comandi per curve ed archi. L'elenco completo dei percorsi può essere trovato alla
pagina SVG Path specification.

5. Attribuire gli stili

Il nostro tetronimo di Tetris, seppur meraviglioso, non è abbastanza attraente. Rimedieremo a questo utilizzando il metodo attr().

Il metodo attr() acquisisce come parametro un oggetto che composto da varie coppie proprietà-valore. Dal momento che abbiamo referenziato il nostro tetronimo nella variabile omonima tetronimo possiamo applicare il metodo attr() direttamente ad essa. Avremmo anche potuto
concatenare il metodo attr() al metodo path(), ma preferiamo mantenere le cose più comprensibili per il momento. Dimostriamo l'uso di attr() attraverso l'esempio:

produrrà questo effetto:

produrrà l'effetto:

La documentazione di Raphael è piuttosto esaustiva riguardo al metodo attr().
Giochiate con le varie combinazioni di proprietà-valore dell'oggetto. 

6. Animazione

Il metodo animate() di Raphael è davvero, davvero bello. Ci permette di animare i nostri disegni in maniera simile a jQuery, animando
gli attributi noi forniamo un tempo di esecuzione con un effetto opzionale.

Ruotiamo il nostro più recente tetronimo di 360 gradi. L'attibuto di rotazione
è assoluto, dovrebbe compiere una rotazione completa e riportarlo al suo stato originale.

L'animazione dura 2 secondi (2000 millisecondi) e le viene detto di adottare l'effetto 'bounce' (rimbalzo) al suo temine.

Qui l'esempio.

Possiamo anche fornire come argomento una funzione di callback. Questa funzione di callback verrà invocata al termine dell'animazione. Il seguente esempio
animerà la rotazione del tetronimo e lo spessore del contorno e poi tornerà allo stato iniziale attraverso un'altra animazione dichiarata nella funzione di callback.

La parola chiave this, referenzia il tetronimo originale dall'interno della funzione di callback.

Qui l'esempio.

Animare i paths

Essendo un po' fissato con la programmazione, raramente ho speso tempo a disegnare forme in Flash. Ma una cosa con cui mi piaceva giocare era l'interpolazione delle forme. Bene,
Raphael offre un modo per emulare l'interpolazione della forma, passando come parametro una stringa di percorso al metodo animate();

Un altro tetronimo dal Tetris, il tetronimo Z ha la seguente stringa di percorso,

e appare così:

Ora, usando il nostro tetronimo originale con uno stile minimale, specifico il nuovo path nel metodo animate().

Dovreste vedere il tetronimo originale trasfigurare nel nuovo. L'effetto appare ancor più evidente specificando l'effetto di easing 'elastic'.

Qui l'esempio.

Accessibilità DOM

Se vogliamo ottenere l'accesso ai nostri elementi come elementi DOM, possiamo farlo con facilità. Questo grazie alla proprietà node. Usandola, possiamo
aggiungere gestori di eventi ai nostri disegni, come mi appresto a mostrarvi.

Iniziamo disegnando un cerchio nel nostro file our_script.js.

Ora, aggiungiamo il testo, 'Bye Bye CIrcle!' facendo sì che il suo centro sia lo stesso di quello del cerchio.

Ho impostato l'opacità a 0, di modo che inizialmente sia nascosto. Notate il concatenamento del metodo toBack(). Questo posiziona il testo dietro tutti gli altri
elementi disegnati nel foglio (specularmente, toFront() posiziona gli elementi al di sopra di tutto il resto).

Ora, aggiungiamo il gestore all'evento mouseover al nostro cerchio sfruttando la proprietà nodo. Impostiamo lo stile del cursore a 'pointer'.

Ciò assegnerà la proprietà di stile dell'oggetto <circle> nel nostro documento. Il nostro documento risulterà così:

Ora finalmente, aggiungiamo il gestore dell'evento onclick al nostro cerchio:

Quando si clicca, il testo referenziato nella variabile text viene animato incrementando l'opacità al massimo, in 2 secondi. Il cerchio stesso è animato
verso opacità 0 durante lo stesso lasso di tempo. Includiamo anche una funzione di callback nel metodo animate. Ciò cancella
l'elemento cerchio dal nostro documento, una volta che l'animazione è compiuta, dal momento che il cerchio ha opacità 0, risulterà cliccabile finché non verrà rimosso.

Qui l'esempio.

8. Strutturiamo un widget

Finalmente, metteremo assieme ciò che abbiamo imparato creando un piccolo misuratore di stati d'animo. Semplicemente, si potrà inserire un valore umorale compreso tra 1 e 5, dove 1 sarà 'rubbish' (pessimo) e
5 sarà 'positvely manic' (ottimo, in modo preoccupante), 

Osservate qui il widget.

Cominciamo modificando our_script.js in questa maniera:

Questo crea un cerchio con raggio 20px al centro del nostro foglio, e il testo 'My Mood' sopra di esso. 'Mood' è posto a capo usando
'\n'.

Ora, creiamo le informazioni corrispondenti ai vari stati d'animo e scegliamo in quale di essi ci troviamo.

Le descrizioni dei nostri stati d'animo sono memorizzate in un array chiamato 'moods' ed i colori corrispondenti in un altro, chiamato 'colors'.
Lo stato d'animo selezionato, un valore tra 1 e 5, è memorizzato nella variabile my_mood.

Ora creiamo una funzione chiamata show_mood. Quando invocata, questa funzione mostrerà i cerchi degli stati d'animo (i cerchi colorati) e i testi relativi a ciascuno di essi.

In show_mood(), abbiamo un ciclo che si ripete tante volte quanto è il valore del mio stato d'animo. Dentro il ciclo c'è una funzione anonima istantanea. Questa è necessaria per
garantire l'accesso alla variabile i a ciascun piano dell'iterazione. Dentro la funzione istantanea, creiamo un timeout - ogni 50*i secondi, un cerchio
viene creato nel punto del cerchio originale. Ciascun cerchio viene poi spostato in due secondi a 0px in x e un multiplo di -42 in y. Assicuriamoci di posizionare
ciascuno dei successivi cerchi dietro il foglio. Notate che i cerchi sono colorati rispetto al valore presente nell'array, determinato da my_mood.

show_mood() è anche responsabile della visualizzazione del testo relativo allo stato d'animo riferendosi a my_mood per ottenere il testo corrispondente dall'array moods.

Infine show_mood() si libera dei gestori di evento assegnati al testo originale e al cerchio che abbiamo piazzato al centro del foglio. Questo impedisce
il ri-disegnamento dei cerchi degli stati d'animo.

Infine, assegnamo al cerchio centrale ed al testo 'My Mood', il gestore d'evento onclick. Lo assegno ad entrambi gli elementi in modo che un click su ciascuno dei due
inneschi la chiamata a show_mood().

Conclusione

Bene, questo è quanto! Ora dovreste avere le fondamenta su cui basare le vostre sperimentazioni riguardo al framework Raphael JS. Più imporante, spero
siate desiderosi di elevare la conoscenza di Raphael JS e di progettare meravigliosi disegni e widgets.  Non dimenticate di seguirmi su Twitter, e condividere le vostre creazioni.

  • Seguiteci su Twitter, o sottoscrivete il Nettuts+ RSS Feed per altri tutorial ed articoli giornalieri sullo sviluppo web.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.