Introduzione
SVG, acronimo di Scalable Vector Graphics, è un linguaggio basato su XML per la descrizione di oggetti e scene. Gli elementi SVG possono attivare eventi e possono essere sceneggiati con JavaScript. SVG include diversi tipi primitivi integrati, come cerchi e rettangoli, oltre a essere in grado di visualizzare il testo. Sebbene la tecnologia SVG non sia nuova, HTML5 ora consente di incorporare direttamente gli oggetti SVG in una pagina senza l'utilizzo di un tag <object> o <embed>, rendendola conforme a quanto attualmente disponibile con la tela. Raphaël.js è una libreria JavaScript che consente di creare scene SVG in modo programmatico.
Utilizza un'API unificata per creare scene SVG dove è supportata o VML(Vector Modeling Language) dove è attualmente, ovvero le versioni di Internet Explorer precedenti a IE9.
Disegno della prima scena
Iniziamo disegnando una scena semplice con Raphaël. Iniziamo a disegnare la scena creando un oggetto Raphaël. In questo caso, ho utilizzato il costruttore che lo inserisce in un determinato elemento HTML con una determinata larghezza e altezza, ma potresti anche chiedere a Raphaël di accodare l'oggetto al DOM (Document Object Model). Successivamente, ho creato un rettangolo specificando le posizioni x e y desiderate con la larghezza e l'altezza. Poi ho creato un cerchio indicando le coordinate e il raggio desiderati. Infine, ho utilizzato la funzione di attributo (attr) per assegnare i colori agli oggetti.
A ogni oggetto SVG possono essere assegnati attributi per elementi quali colore, rotazione, colore e dimensioni della traccia e così via. Qui puoi trovare un elenco dettagliato degli attributi assegnabili.
var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);
rect.attr({fill: "green"});
circle.attr({fill: "blue"});
Disegno di forme avanzate con i tracciati
Un percorso è una serie di istruzioni utilizzate dal renderer per creare oggetti. Disegnare con un percorso è come disegnare con una penna su un foglio di carta millimetrata gigante. Puoi chiedere alla penna di sollevarsi dalla carta e spostarsi in un'altra posizione(move to), di disegnare una linea(line to) o una curva(arc to). I percorsi consentono a SVG di creare oggetti con lo stesso livello di dettaglio indipendentemente dalla scala. Quando emetti un'istruzione, ad esempio per disegnare una curva, SVG prende in considerazione le dimensioni originali e finali desiderate della curva (dopo la scalatura) e calcola matematicamente i punti intermedi per visualizzare una curva uniforme.
Il codice e la figura di seguito mostrano un rettangolo e una curva chiusa disegnati con percorsi. La lettera M seguita dalle coordinate sposta la penna in quella posizione, L seguita da una coppia di coordinate disegna una linea dalla posizione corrente a quella specificata. S disegna una curva di Bezier liscia con un determinato punto di controllo e un punto finale con coordinate relative. Z chiude un percorso. In genere, l'utilizzo di una lettera maiuscola emette il comando con coordinate assolute, mentre le lettere minuscole utilizzano coordinate relative. M/m e Z/z, rispettivamente, emettono lo stesso comando per le lettere maiuscole o minuscole. Puoi visualizzare un elenco di tutte le istruzioni per i percorsi qui.
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
Testo del disegno
Avere illustrazioni senza la possibilità di disegnare il testo sarebbe davvero noioso, gelukkig, Raphaël fornisce due metodi per disegnare il testo. Il primo metodo, text, accetta le coordinate x e y insieme alla stringa da disegnare. Il metodo text non ti offre molto controllo sul carattere o su altri effetti. Viene visualizzato nel carattere predefinito con le dimensioni predefinite.
Il secondo metodo, print, disegna il testo come una raccolta di percorsi. Di conseguenza, possiamo modificare le singole lettere. Nell'esempio riportato di seguito, abbiamo colorato il numero 5 con un riempimento arancione, colorato "ROCCE" con un riempimento bluastro e reso il tratto più spesso per simulare il testo in grassetto. Per farlo, abbiamo utilizzato un carattere personalizzato con dimensione dei caratteri di 40 punti.
var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
Il carattere Vegur non è presente in Raphaël, né qualsiasi altro carattere. Inoltre, la maggior parte dei caratteri utilizza il formato TrueType(TTF) o OpenType(OTF). Per passare da questi formati a qualcosa di utilizzabile da Raphaël, dobbiamo convertirli utilizzando uno strumento chiamato Cufon. Cufon ti consente di esportare i diversi stili di carattere di un determinato carattere (normale, grassetto, corsivo, grassetto corsivo e così via) per utilizzarli con Raphaël. Non rientra nell'ambito di questo tutorial trattare Cufon in dettaglio. Per ulteriori dettagli, consulta il link sopra indicato. La directory dei caratteri di Google è un'ottima fonte di caratteri non soggetti a limitazioni per le tue applicazioni.
Eventi
Gli elementi SVG possono iscriversi direttamente a tutti gli eventi tradizionali basati sul mouse: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup e hover. Raphaël offre la possibilità di aggiungere i tuoi metodi alla tela o ai singoli elementi, quindi in teoria nulla ti impedisce di aggiungere gesti per i browser mobile.
Lo snippet seguente lega una funzione per ruotare di 45 gradi una determinata lettera in "ROCKS" quando viene fatto clic.
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
letters[i].click(function(evt) {
this.rotate(45);
});
}
SVG e Canvas
Dato che entrambi sono metodi per disegnare oggetti sullo schermo, spesso non è subito chiaro perché dovresti utilizzare uno piuttosto che l'altro. I due mezzi hanno approcci molto diversi. Canvas è un'API in modalità immediata molto simile al disegno con i pastelli. Puoi cancellare o distruggere parte del disegno, ma per impostazione predefinita non puoi annullare o modificare un tratto precedente. Canvas è anche un bitmap raster, quindi è molto soggetto alla pixelizzazione quando le immagini vengono ridimensionate. L'SVG, invece, come accennato in precedenza, può pubblicare più risoluzioni con lo stesso livello di dettaglio e può essere eseguito tramite script.
Scegliere se utilizzare SVG o Canvas per la programmazione di giochi è abbastanza semplice. Oltre ai normali vincoli relativi alla scelta di eseguire il deployment su computer o dispositivo mobile, tutto dipende dal numero di sprite. Lo SVG si presta a ciò che chiamerei giochi con fedeltà ridotta. Li descrivo come giochi con movimento simultaneo limitato degli oggetti e rimozione e creazione di sprite. Molti giochi da tavolo come scacchi, dama o battaglia navale, nonché giochi di carte come blackjack, poker e cuori rientrano in questa categoria. Un altro elemento comune è che in molti di questi giochi un giocatore deve spostare un oggetto arbitrario e la possibilità di scrivere script in SVG semplifica la selezione degli oggetti.
Strumenti di authoring per SVG
L'utilizzo di SVG non significa affatto che devi creare i percorsi manualmente. Esistono diversi strumenti, sia open source che commerciali, che consentono di esportare in SVG. I due strumenti che ho utilizzato molto e che consiglio vivamente sono Inkscape e svg-edit.
svg-edit
svg-edit è un editor SVG basato su browser scritto in JavaScript. Fornisce un'interfaccia utente limitata che ricorda GIMP o MS Paint. A meno che il livello di dettaglio non fosse relativamente basso, ho utilizzato principalmente svg-edit per modificare i disegni SVG anziché crearli. svg-edit consente di creare oggetti graficamente o con codice SVG.
Inkscape
Inkscape è un editor di grafica vettoriale multipiattaforma completo, simile a CorelDraw, Adobe Illustrator e Xara. Inkscape beneficia di una vivace community di plug-in e di un codebase maturo. Il predecessore di Inkscape, da cui è stato creato il fork, è stato sviluppato nel 1999. Inkscape è la mia applicazione di riferimento per gli asset vettoriali e bitmap.
Una breve digressione
SVG non è supportato su Windows nelle versioni di Internet Explorer precedenti a IE9. IE utilizza un formato di grafica vettoriale chiamato VML (Vector Markup Language), che offre molte delle stesse funzionalità di SVG. Raphaël può creare scene che utilizzano SVG o VML, se supportate. L'utilizzo di Raphaël è un modo semplice per fornire assistenza multipiattaforma.
Riferimenti
- Rapahël.js: http://raphaeljs.com
- Documentazione di Raphaël: http://raphaeljs.com/reference.html