Introduzione
SVG, abbreviazione 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 creati mediante script con JavaScript. SVG ha diversi tipi primitivi integrati, come
cerchi e rettangoli, e consente di visualizzare testo. Sebbene la tecnologia SVG non sia una novità, ora HTML5 consente di incorporare gli oggetti SVG in una pagina direttamente senza l'utilizzo di un tag <object> o <embed>, in modo che sia in linea con ciò che è attualmente disponibile con le canvas. Raphaël.js è una libreria JavaScript che consente di creare scene SVG in modo programmatico.
Utilizza un'API unificata per creare scene SVG in cui è supportato o VML(Vector Modeling Language) in cui si trova attualmente, ovvero le versioni di Internet Explorer precedenti a IE9.
Disegna la tua prima scena
Iniziamo disegnando una semplice scena con Raphaël. Iniziamo a disegnare la scena creando un'istanza di 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 si potrebbe anche chiedere a Raphaël di aggiungere l'oggetto al DOM (Document Object Model). Poi, ho creato un rettangolo specificando le posizioni x e y desiderate con larghezza e altezza. Poi ho creato un cerchio indicando le coordinate e il raggio desiderati. Infine, ho usato la funzione di attributo (attr) per assegnare i colori agli oggetti.
A ogni oggetto SVG possono essere assegnati attributi come colore, rotazione, colore e dimensione del tratto e così via. Puoi trovare un elenco dettagliato degli attributi assegnabili qui.
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 percorsi
Un percorso è una serie di istruzioni utilizzate dal renderer per creare oggetti. Disegnare con un percorso è come disegnare con una penna su un gigantesco foglio di carta millimetrata. Puoi indicare di sollevare la penna dal foglio e di spostarsi in una posizione diversa(spostamento in), per tracciare una linea(linea verso) o tracciare una curva(arco di). I percorsi consentono a SVG di creare oggetti con lo stesso livello di dettaglio, a prescindere dalla scala. Quando imponi un'istruzione per dire "disegna una curva", il formato SVG tiene conto della dimensione originale e finale desiderata della curva (dopo la scalabilità), calcola matematicamente i punti intermedi per eseguire il rendering di una curva uniforme.
Il codice e la figura riportati di seguito mostrano un rettangolo e una curva chiusa disegnata con percorsi. La lettera M seguita dalle coordinate sposta la penna in quella posizione, la L seguita dalla coppia di coordinate disegna una linea dalla posizione corrente a quella posizione. s disegna una curva di Bézier uniforme con un determinato punto di controllo e punto di arrivo con coordinate relative. Z chiude un percorso. In genere, l'uso di una lettera maiuscola consente di inviare al comando le coordinate assolute, mentre le lettere minuscole usano coordinate relative. M/m e Z/z, rispettivamente, eseguono lo stesso comando sia in maiuscolo che in minuscolo. Puoi visualizzare un elenco di tutte le istruzioni del percorso 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 disegno
Avere illustrazioni senza la possibilità di disegnare testo sarebbe davvero noioso. Per fortuna, Raphaël offre due metodi per disegnare un testo. Il primo metodo, text, usa le coordinate x e y insieme alla stringa per tracciare. Il metodo di testo non offre molto controllo sul carattere o su altri effetti. Utilizza il carattere predefinito con le dimensioni predefinite.
Il secondo metodo, la stampa, disegna il testo come una raccolta di percorsi. Di conseguenza, siamo in grado di modificare singole lettere. Nell'esempio seguente, abbiamo colorato il numero 5 con un riempimento arancione, "ROCKS" di colore blu con un riempimento e abbiamo reso il tratto più spesso per simulare un testo in grassetto. Per farlo, abbiamo utilizzato un carattere personalizzato con una dimensione di 40 pt.
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 è in Raphaël, né lo è. Inoltre, la maggior parte dei caratteri utilizza il formato TrueType(TTF) o OpenType(OTF). Per trasformare questi formati in qualcosa che possa essere usato da Raphaël, dobbiamo convertirli con uno strumento chiamato Cufon. Cufon ti consente di esportare i diversi stili di un font (normale, grassetto, corsivo, grassetto corsivo ecc.) da usare con Raphaël. Non rientra nell'ambito di questo tutorial parlare di Cufon in dettaglio. Per ulteriori informazioni, consulta il link sopra indicato. Un'ottima fonte di caratteri disponibili per le tue applicazioni è Google Font Directory.
Eventi
Gli elementi SVG possono iscriversi direttamente a tutti i tradizionali eventi basati sul mouse: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup e passaggio del mouse. Raphaël offre la possibilità di aggiungere metodi personalizzati al canvas o ai singoli elementi, quindi in teoria non c'è nulla che ti impedisca di aggiungere gesti per i browser mobile.
Lo snippet seguente associa una funzione per ruotare una determinata lettera in "ROCKS" di 45 gradi 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
Considerato che si tratta di entrambi i metodi per disegnare oggetti sullo schermo, spesso non è immediatamente chiaro perché conviene utilizzare l'uno sopra l'altro. I due mezzi hanno approcci molto diversi. Canvas è un'API in modalità immediata, molto come disegnare con i pastelli. Puoi cancellare o distruggere parte del disegno, ma per impostazione predefinita non puoi ripristinare o modificare un tratto precedente. Canvas è anche una bitmap raster, pertanto è molto soggetto a pixelizzazione quando le immagini vengono scalate. Il formato SVG, d'altra parte, come detto in precedenza può pubblicare diverse risoluzioni con lo stesso livello di dettaglio e può essere basato su script.
Scegliere se usare il formato SVG o Canvas per la programmazione di giochi è abbastanza semplice. A parte i normali vincoli di deployment su computer o dispositivi mobili, il numero di sprite dipende davvero dal numero di sprite. Il formato SVG si presta a quelli che definirei giochi a bassa fedeltà. Li definisco come giochi che hanno un movimento simultaneo limitato di oggetti e la creazione e la rimozione di sprite. Rientrano in questa categoria molti giochi da tavolo come scacchi, dama o corazzata, nonché giochi di carte come BlackJack, Poker e Hearts. Un altro filo conduttore è che in molti di questi giochi un giocatore deve spostare un oggetto arbitrario e la capacità di scripting di SVG semplifica la scelta degli oggetti.
Strumenti di creazione per SVG
Utilizzare SVG non significa affatto dover creare percorsi a mano. Esistono diversi strumenti, sia open source che commerciali, con cui puoi eseguire l'esportazione in formato SVG. I due strumenti che ho usato ampiamente e vivamente sono Inkscape e svg-edit.
svg-edit
svg-edit è un editor SVG basato su browser e scritto in JavaScript. Offre un'interfaccia utente limitata che ricorda GIMP o MS Paint. A meno che il livello di dettaglio non fosse relativamente basso, ho usato svg-edit soprattutto per modificare i disegni SVG, invece che crearli. svg-edit consente di creare oggetti graficamente o con il codice SVG.
Inkscape
Inkscape è un editor di grafica vettoriale completo e multipiattaforma simile a CorelDraw, Adobe Illustrator e Xara. Inkscape si avvale di una vivace community di plug-in e di un codebase maturo. Il predecessore di Inkscape, da cui Inkscape ha creato il fork, è stato sviluppato nel 1999. Inkscape è la mia applicazione ideale per gli asset vettoriali e bitmap.
A parte minore
Il formato 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 usano SVG o VML, se supportato. Raphaël è un modo semplice per offrire un supporto multipiattaforma.
Riferimenti
- Rapahël.js: http://raphaeljs.com
- Documentazione di Raphaël: http://raphaeljs.com/reference.html