Share
Raphael JS è un framework JavaScript leggero e super-sexy che ti permette di disegnare grafica vettoriale nel tuo browser! In questo tutorial, ti presenterò alcune funzionalità di base del disegno, dare un'occhiata all'animazione, fornire l'accesso DOM e infine terminare creando un fantastico widget per il tuo sito ...
Iniziamo scaricando il framework Raphael JS da qui. In alto a destra della pagina, vedrai
copie compresse e non compresse di Raphael versione 1.0. Ti consiglierei di prendere una copia della fonte non compressa per il momento - questo
puoi dare un'occhiata alla fonte e vedere quale margine extra puoi ottenere sulla documentazione.
Con quello scaricato, impostiamo un semplice documento HTML chiamato index.htm e includi Raffaello in esso. Includiamo anche our_script.js, che è dove
scriveremo il nostro JavaScript, e nel corpo del documento creiamo un div minimamente stilizzato con ID canvas_container, che agirà come a
contenitore per i nostri disegni.
Raphael Gioca
NB. Il primo rilascio stabile della versione 1.0 è stato reso disponibile solo il 7 ottobre 2009, quindi è piuttosto nuovo. Rende un cambiamento molto importante per il modo
si tracciano percorsi, quindi se si sta utilizzando una versione precedente di Raphael, assicurarsi di aggiornare e controllare la documentazione sull'effetto della retrocompatibilità.
Quando disegniamo con Raffaello, lo facciamo su una tela. Questa tela, che faremo riferimento in una variabile chiamata 'carta', viene creata usando il
Raphael () oggetto. Specifichiamo sempre la larghezza e l'altezza della tela, ma abbiamo la possibilità di specificare anche a) la posizione assoluta di
la tela relativa al viewport, oppure b) un elemento 'contenitore' in cui la tela è disegnata all'interno.
var paper = new Raphael (x, y, width, height); // option (a) var paper = new Raphael (elemento, larghezza, altezza); // opzione (b)
Generalmente preferisco il secondo metodo (b), dato che di solito sappiamo dove sono i nostri div. Nel our_script.js, aspettiamo che il DOM venga caricato e quindi creiamo un 500px per 500px
tela dentro la nostra canvas_container div:
Accentsconagua
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); Tutti i nostri metodi di disegno saranno ora associati a carta variabile.
Ora che abbiamo la nostra tela, disegniamo alcune forme su di essa. Il origine, cioè, il punto x = 0, y = 0, si trova nell'angolo in alto a sinistra di
la nostra tela. Ciò significa che tutte le coordinate x, y specificate nei nostri metodi sono relative a questo punto.
Prima di tutto, a cerchio. Modificare our_script.js per assomigliare a questo:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var circle = paper.circle (100, 100, 80); Questo disegnerà un cerchio con un raggio di 80 px con il centro posizionato a x = 100, y = 100. Possiamo disegnare quanti cerchi vogliamo e non lo facciamo avere a
riferimento a loro in una variabile:
per (var i = 0; i < 5; i+=1) var multiplier = i*5; paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
Quindi, disegniamo a rettangolo. Lo facciamo usando il metodo rect (), che prende come parametri: le coordinate xey dell'angolo in alto a sinistra del rettangolo e il
la larghezza e l'altezza desiderate del rettangolo.
var rectangle = paper.rect (200, 200, 250, 100);
Alla fine, disegneremo un ellisse. I suoi parametri sono gli stessi del cerchio, cioè x, y, raggio, tranne per il fatto che possiamo specificare i raggi xey specificatamente.
var ellipse = paper.ellipse (200, 400, 100, 50);
Questo disegnerà un'ellisse con x-raggio = 100, raggio y = 50 a x = 200, y = 400. Il nostro our_script.js il file dovrebbe ora assomigliare a questo:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var circle = paper.circle (100, 100, 80); per (var i = 0; i < 5; i+=1) var multiplier = i*5; paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier) var rectangle = paper.rect(200, 200, 250, 100); var ellipse = paper.ellipse(200, 400, 100, 50); Se ora ci apriamo index.htm nel nostro browser, dovremmo ottenere una serie di disegni di forme:
Esempio qui
Mentre le forme incorporate sono a portata di mano, lo è percorsi che ci offre una vera flessibilità di disegno.
Quando si disegnano percorsi, è utile pensare a un cursore immaginario oa un punto di penna premuto sullo schermo. Quando creiamo la nostra tela, il cursore è radicato al
Angolo in alto a sinistra. La prima cosa che dovremmo fare, quindi, è
solleva il cursore o il punto di penna e spostalo in una regione ampia in cui possiamo disegnare.
Ad esempio, spostiamo il cursore al centro della nostra tela. Ovvero, spostiamolo di 250 px nella direzione x e spostiamolo di 250 px nella direzione Y..
Lo facciamo usando un cosiddetto stringa di percorso.
Una stringa di percorso è una stringa composta da comandi di "azione" e valori numerici corrispondenti al comando. Spostiamo il cursore su x = 250, y = 250 usando il seguente
stringa:
"M 250 250"
'M' significa che vogliamo muoviti senza disegnare ed è seguito dalle coordinate della tela xey.
Ora che il nostro cursore è dove lo vogliamo, disegniamo una linea relativo a questo punto usando il comando 'L' minuscolo, 'l'.
"M 250 250 l 0 -50"
Questo disegnerà una linea verso l'alto 50 px nella direzione Y. Scriviamo una stringa di percorso che disegnerà un tetris tetris:
"M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"
Il comando 'z' indica la chiusura del percorso: unirà una linea da qualsiasi punto del punto specificato dal nostro comando iniziale 'M'.
Diciamo a Raffaele di disegnare effettivamente questo percorso usando il metodo path (). Modificare our_script.js per assomigliare a questo:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); Se si carica index.htm, ora dovresti vedere un tetronimo come questo:
Le stringhe di percorso possono diventare incredibilmente (brillantemente) complesse usando i comandi di curva e arco. La copertura completa dei percorsi può essere trovata al
Pagina delle specifiche del percorso SVG.
Il nostro tetris tetronimo, pur essendo meraviglioso, non è molto esteticamente gradevole. Lo risolveremo usando il metodo attr ().
Il metodo attr () accetta come parametro un oggetto costituito da varie coppie valore-valore. Dal momento che abbiamo memorizzato un riferimento al nostro tetronimo nella variabile Tetronimo, possiamo prendere questa variabile e aggiungere il metodo attr () ad esso. Potremmo ugualmente bene
concatena il metodo attr () al metodo path (), ma manteniamo le cose per bene al momento. Mostrerò l'uso di attr () con l'esempio:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); tetronimo.attr (fill: '# 9cf', stroke: '#ddd', 'stroke-width': 5); produce questo:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); tetronimo.attr (gradient: '90 - # 526c7a- # 64a0c1 ', tratto:' # 3b4449 ',' larghezza del tratto ': 10,' stroke-linejoin ':' round ', rotazione: -90); produce questo:
La documentazione di Raffaello è piuttosto estesa quando si tratta del metodo attr ().
Gioca con le varie combinazioni di valori e proprietà dell'oggetto.
Il metodo animate () in Raphael è davvero, veramente bene. Ci consente di animare i nostri disegni in modo jQuery-esque, animando
gli attributi che forniamo per un certo periodo di tempo con un allentamento opzionale.
Ruotiamo il nostro tetronimo più recente di 360 gradi. La rotazione
l'attributo è assoluto, quindi questo dovrebbe prendere una rotazione completa e riportarlo allo stato non ruotato.
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); tetronimo.attr (gradient: '90 - # 526c7a- # 64a0c1 ', tratto:' # 3b4449 ',' larghezza del tratto ': 10,' stroke-linejoin ':' round ', rotazione: -90); tetronimo.animate (rotation: 360, 2000, 'bounce'); L'animazione si svolge in 2 secondi (2000 millisecondi) e viene detto di facilitare il suo stato finale con un "rimbalzo".
Esempio qui.
Possiamo anche fornire una funzione di callback come argomento. Questa funzione di callback viene richiamata al termine dell'animazione. Il seguente esempio
animerà la rotazione del tetronimo e la larghezza del tratto e quindi si resetterà con un'altra animazione nella funzione di callback.
tetronimo.animate (rotation: 360, 'stroke-width': 1, 2000, 'bounce', function () / * callback dopo l'animazione originale termina * / this.animate (rotation: -90, stroke: ' # 3b4449 ',' larghezza del tratto ': 10, 1000););
Il Questo la parola chiave fa riferimento al tetronimo originale dalla funzione di callback.
Esempio qui.
Essendo un po 'geek del codice, raramente ho passato il passato a disegnare forme semplici in Flash. Ma una cosa con cui mi piaceva giocare era interpolazione di forma. Bene,
Raphael va in qualche modo a emulare l'interpolazione di forma specificando una stringa di percorso nel metodo animate ().
Un altro tetronimo, il tetronimo Z di Tetris, ha la seguente stringa di percorso,
"M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"
e sembra questo:
Ora, usando il nostro tetronimo originale con uno stile di attributo minimo, ho intenzione di specificare la nuova stringa di percorso nel nostro metodo animate ().
tetronimo.attr (stroke: 'none', fill: 'blue'); tetronimo.animate (percorso: "M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z", 5000, "elastico");
Dovresti vedere il nostro originale tetronimo morph nel nostro nuovo. L'effetto è reso ancora più pronunciato specificando 'elastico' come tipo di andamento.
Esempio qui.
Se vogliamo avere accesso ai nostri elementi come elementi DOM, possiamo farlo con una certa facilità. Questo grazie al nodo proprietà. Usando questo, possiamo
aggiungi i gestori di eventi ai nostri disegni, che continuerò a mostrarti.
Iniziamo disegnando un cerchio nel nostro our_script.js file.
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var circ = paper.circle (250, 250, 40); circ.attr (fill: '# 000', stroke: 'none'); Ora aggiungiamo il testo, "Ciao ciao cerchio!" in modo che il suo punto centrale si trovi nello stesso punto del nostro centro del cerchio.
var text = paper.text (250, 250, 'Bye Bye Circle!') text.attr (opacity: 0, 'font-size': 12). toBack ();
Ho impostato l'opacità su 0 in modo che sia inizialmente nascosto. Si noti il concatenamento del metodo toBack (). Questo pone il testo dietro a tutti gli altri
elementi di disegno su tela (allo stesso modo, toFront () porta gli elementi nella parte anteriore della nostra tela).
Ora, aggiungiamo un gestore di eventi mouseover alla nostra cerchia usando la proprietà node. Imposteremo lo stile del cursore su 'puntatore'.
circ.node.onmouseover = function () this.style.cursor = 'pointer';
Ciò che effettivamente fa è impostare la proprietà di stile di
Ora, aggiungiamo infine un gestore di eventi onclick alla nostra cerchia:
circ.node.onclick = function () text.animate (opacity: 1, 2000); circ.animate (opacity: 0, 2000, function () this.remove (););
Quando si fa clic sul cerchio, il testo a cui si fa riferimento nella variabile testo è animato a piena opacità in 2 secondi. Il cerchio stesso è animato
a 0 opacità nello stesso periodo di tempo. Includiamo anche una funzione di callback nel metodo animato del cerchio. Questo rimuove il
l'elemento del cerchio dal nostro documento una volta che l'animazione è terminata, poiché mentre il cerchio ha 0 opacità, è ancora cliccabile finché non viene rimosso.
Esempio qui.
Infine, cerchiamo insieme ciò che abbiamo imparato e costruiamo un piccolo Mood Meter. Fondamentalmente, si selezionerà un valore dell'umore tra 1 e 5, 1 essendo 'spazzatura' e
5 è "positvely maniacale" e Raphael creerà una bella rappresentazione di questo.
Guarda il widget qui
Inizia modificando our_script.js per assomigliare a questo:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var circ = paper.circle (250, 250, 20) .attr (fill: '# 000'); var mood_text = paper.text (250, 250, 'My \ nMood'). attr (fill: '#fff'); Questo crea un cerchio di raggio 20 px al centro della nostra tela e del testo in cima al cerchio che dice "My Mood". 'Mood' viene posizionato su una nuova riga usando
'\ N'.
Quindi, creiamo alcune informazioni personalizzate corrispondenti ai nostri stati d'animo e scegliamo in quale umore ci troviamo.
mood = ['Spazzatura', 'Non buono', 'OK', 'Smile', 'Positivamente mania']; colors = ['# cc0000', '# a97e22', '# 9f9136', '# 7c9a2d', '# 3a9a2d']; // scegli un umore tra 1 e 5, 1 è spazzatura e 5 è positivamente maniacale my_mood = 1;
La descrizione testuale del nostro stato d'animo è memorizzata in un array chiamato 'stati d'animo' e il colore corrispondente a questo stato d'animo è memorizzato in un array chiamato 'colori'.
L'umore scelto, un valore compreso tra 1 e 5, è memorizzato nella variabile my_mood.
Ora creiamo una funzione chiamata show_mood. Quando invocato, questa funzione mostrerà i nostri cerchi dell'umore (i cerchi colorati) e il testo corrispondente a questo stato d'animo.
function show_mood () for (var i = 0; i < my_mood; i+=1) (function(i) setTimeout(function() paper.circle(250, 250, 20).attr( stroke: 'none', fill: colors[my_mood - 1] ).animate(translation: '0 ' + (-42 * (i+1)), 2000, 'bounce').toBack(); , 50*i); )(i); paper.text(250, 300, moods[my_mood - 1]).attr(fill: colors[my_mood - 1]); mood_text.node.onclick = function() return false; circ.node.onclick = function() return false;
In show_mood (), abbiamo un ciclo che esegue lo stesso iterazione del valore di my_mood. All'interno di questo ciclo c'è una funzione anonima autoeseguibile. Questo è necessario così
abbiamo accesso alla variabile io in ogni fase dell'iterazione. All'interno della funzione autoeseguibile, creiamo un timeout: ogni 50 * i secondi, un cerchio
è creato nel punto della nostra cerchia originale. Ogni cerchio viene quindi tradotto in 2 secondi a 0 px in x e alcuni multipli di -42 px in y. Ci assicuriamo di posizionare
ogni cerchio successivo sul retro della tela. Si noti che i cerchi sono riempiti in base al colore nell'array dei colori, determinato da my_mood.
show_mood () è anche responsabile della visualizzazione del nostro mood text che usa my_mood per scegliere l'umore corrispondente da moods_array.
show_mood () quindi finalmente sbarazzarsi di qualsiasi gestore di eventi onclick assegnato al testo originale e al cerchio che abbiamo posizionato al centro della tela. Questo impedisce
il re-disegno dei cerchi degli stati d'animo.
Infine, assegniamo i gestori di eventi onclick al cerchio centrale e al testo "My Mood". Assegno i gestori di eventi a entrambi gli elementi in modo che facendo clic su entrambi
il testo o il cerchio ha l'effetto di chiamare show_mood ().
circ.node.onclick = show_mood; mood_text.node.onclick = show_mood;
Bene, è così! Ora dovresti avere una piattaforma sonora su cui basare le tue esplorazioni nel framework Raphael JS. Soprattutto, spero
ora sei curioso di approfondire Raphael JS e di creare bellissimi disegni e widget per il browser. Non dimenticare di seguirmi su Twitter e condividere le tue creazioni.
