jsDraw2DX è una libreria che permette di disegnare grafica SVG tramite JavaScript, mettendo a disposizione primitive grafiche che rappresentano gli strumenti per la creazione di figure geometriche, grafici e testo, permettendoci di realizzare anche disegni di una certa complessità. In questo articolo scopriamo come utilizzare questo piccolo framework, esaminandone alcuni esempi di utilizzo.
Gli strumenti di base
Dopo aver scaricato la libreria, inseriamo un riferimento nella nostra pagina Web:
<script src="js/jsDraw2DX.js"></script>Creiamo quindi un <div> nel corpo della pagina che servirà come area su cui inserire in nostro disegno, come nel seguente esempio:
<div id="divLine"></div>A questo punto possiamo scrivere il codice JavaScript necessario per disegnare sfruttando la libreria. Questa mette a disposizione una serie di oggetti che rappresentano gli strumenti di disegno.
Ad esempio, l'oggetto jxColor rappresenta un colore, mentre jxPen rappresenta una penna, jxPoint indica un punto sull'area di lavoro rappresentata dal nostro <div> e jxLine indica una linea.
Quindi se, ad esempio, vogliamo disegnare una linea rossa possiamo farlo con il seguente codice:
var area = new jxGraphics(document.getElementById("divLine"));
var col = new jxColor("red");
var pen = new jxPen(col,'2px');
var pt1 = new jxPoint(20,30);
var pt2 = new jxPoint(120,230);
var line = new jxLine(pt1,pt2,pen);
line.draw(area);Trasformiamo il <div> in un'area di lavoro tramite la creazione di un'istanza dell'oggetto jxGraphics, creiamo un oggetto jxColor impostandolo a rosso, istanziamo una penna indicando il colore da utilizzare e le dimensioni del tratto. A questo punto individuiamo due punti dell'area di lavoro tramite jxPoint specificando le coordinate e definiamo una linea indicando i punti delle estremità e la penna da utilizzare. Infine disegniamo la linea nell'area di lavoro tramite il metodo draw(). Il risultato che otteniamo è una semplice riga rossa inclinata simile a quella mostrata dalla seguente figura:
Una volta compresi i principi di base di jsDraw2DX possiamo sbizzarrirci a disegnare figure geometriche sfruttando gli oggetti predefiniti. Ad esempio, per disegnare un rettangolo possiamo utilizzare l'oggetto jxRect:
var gr = new jxGraphics(document.getElementById("divRectangle"));
var col = new jxColor("blue");
var pen = new jxPen(col,'1px');
var rectangle = new jxRect(new jxPoint(200,100), 200, 100, pen);
rectangle.draw(gr);Mentre per creare un cerchio procediamo nel seguente modo:
var gr = new jxGraphics(document.getElementById("divCircle"));
var colBlue = new jxColor("blue");
var colYellow = new jxColor("yellow");
var pen = new jxPen(colBlue,'1px');
var brush = new jxBrush(colYellow, 'linear-gradient');
var circle = new jxCircle(new jxPoint(550,150), 100, pen, brush);
circle.draw(gr);In questo caso utilizziamo due colori: il blu per disegnare la circonferenza ed il giallo per riempire il cerchio con un effetto sfumato. Il risultato è il seguente:
Gestire testo e immagini
Oltre a semplici figure geometriche, jsDraw2DX ci consente di creare testo con effetti grafici. Ad esempio, il seguente codice JavaScript ci consente di creare la scritta HTML.it:
var gr = new jxGraphics(document.getElementById("divText"));
var col = new jxColor("black");
var pen = new jxPen(col,'1px');
var brush = new jxBrush(new jxColor("yellow"));
var font = new jxFont('impact');
font.size = '40px';
var text = new jxText(new jxPoint(300,400), 'HTML.it', font, pen, brush);
text.draw(gr);Esso crea una penna di colore nero, un pennello giallo per il riempimento e un font di cui viene specificato il tipo, impact, e le dimensioni. Il tutto viene utilizzato per definire un oggetto jxText che viene disegnato sull'area di lavoro tramite il metodo draw().
Se vogliamo dare un'inclinazione al testo possiamo specificarla in gradi mediante un ulteriore argomento nel costruttore dell'oggetto jxText:
var text = new jxText(new jxPoint(300,400), 'HTML.it', font, pen, brush, 330);Otterremo il seguente risultato:
Il valore indicato per l'inclinazione rappresenta la rotazione in senso orario rispetto alla normale posizione orizzontale e può essere specificata anche con valori negativi. Ad esempio, se avessimo specificato il valore -30 avremmo ottenuto lo stesso risultato.
Possiamo anche gestire entro certi limiti immagini di tipo bitmap assegnando loro delle dimensioni ed un'inclinazione. Ad esempio, il seguente script visualizza la Gioconda di Leonardo capovolta:
var gr = new jxGraphics(document.getElementById("divImage"));
var image = new jxImage(new jxPoint(700,600),
'http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona _Lisa-restored.jpg/396px-Mona_Lisa-restored.jpg',
200, 300, 180);
image.draw(gr);Vediamo in questo caso l'uso dell'oggetto jxImage nel cui costruttore viene indicata, tramite un oggetto jxPoint, la posizione dell'immagine, l'URL del file, le dimensioni in pixel e l'angolo di rotazione. L'effetto ottenuto è mostrato nella seguente immagine:
A questo punto possiamo provare a realizzare grafici e semplici animazioni. Scopriamo subito come.
Grafici e animazioni
Le primitive grafiche messe a disposizione da jsDraw2DX non prevedono funzioni di elaborazione grafica molto sofisticate. Tuttavia è possibile ottenere effetti molto interessanti scrivendo del codice JavaScript un po' più articolato, come quello che andiamo a vedere tratto dagli esempi pubblicati sul sito ufficiale del progetto.
Si tratta della generazione di un grafico a barre tridimensionali con un effetto di animazione che mostra le barre in crescita fino a raggiungere l'altezza prevista.
Possiamo suddividere il progetto in tre passi:
- la definizione degli oggetti di base necessari al disegno
- la definizione delle barre del grafico
- l'effettivo disegno animato
Nel primo passo definiamo i colori, le penne, i pennelli di riempimento e i font che intendiamo utilizzare:
var penBlue = new jxPen(new jxColor('#77B7E1'), 1);
var brushBlue = new jxBrush(new jxColor('#FFFFFF'));
brushBlue.fillType = 'lin-grad';
brushBlue.angle = 65;
brushBlue.color2 = new jxColor('#2880B8');
var brushText = new jxBrush(new jxColor('#054B78'));
var brushRight = new jxBrush(new jxColor('#2880B8'));
brushRight.color2 = new jxColor('#0C5D91');
brushRight.fillType = 'lin-grad';
brushRight.angle = 90;
var shadowBrush = new jxBrush(new jxColor('#A0A0A0'));
shadowBrush.fillType = 'lin-grad';
var font = new jxFont();
font.size = 12;
font.weight = 'bold';Definiamo quindi una funzione che crea un oggetto che rappresenta una barra tridimensionale:
function Bar3D(x, y) {
var rectFront = new jxRect();
var polyRight = new jxPolygon();
var polyTop = new jxPolygon();
var polyShadow = new jxPolygon();
var xText = new jxText();
var yText = new jxText();
var step, ys, intId;
step = y / 30;
ys = step;
rectFront.pen = penBlue;
rectFront.brush = brushBlue;
polyRight.pen = penBlue;
polyRight.brush = brushRight;
polyTop.pen = penBlue;
polyTop.brush = brushBlue;
polyShadow.brush = shadowBrush;
yText.text = y;
yText.font = font;
yText.brush = brushText;
xText.text = (x - 50) / 70 + 2006;
xText.font = font;
xText.brush = brushText;
xText.point = new jxPoint(70 + x, 330);
xText.angle = 270;
}Associamo quindi all'oggetto definito da questa funzione il metodo drawStep() che effettua un disegno parziale del grafico a barre:
this.drawStep = function() {
rectFront.point = new jxPoint(50 + x, 350 - ys);
rectFront.width = 30;
rectFront.height = ys;
polyRight.points = [new jxPoint(80 + x, 350 - ys),
new jxPoint(100 + x, 330 - ys),
new jxPoint(100 + x, 330),
new jxPoint(80 + x, 350)];
polyTop.points = [new jxPoint(50 + x, 350 - ys),
new jxPoint(70 + x, 330 - ys),
new jxPoint(100 + x, 330 - ys),
new jxPoint(80 + x, 350 - ys)];
polyShadow.points = [new jxPoint(50 + x, 350),
new jxPoint(70 + x + ys / 3, 330 - ys / 5),
new jxPoint(100 + x + ys / 3, 330 - ys / 5),
new jxPoint(80 + x, 350)];
yText.point = new jxPoint(60 + x, 325 - ys);
polyShadow.draw(gr);
rectFront.draw(gr);
polyRight.draw(gr);
polyTop.draw(gr);
yText.draw(gr);
ys += step;
if (ys > y) {
clearInterval(intId);
xText.draw(gr);
}
}Infine definiamo il metodo animate() che sfrutta il metodo drawStep() per creare l'effetto di animazione del grafico:
this.animate = function() {
intId = setInterval(this.drawStep, 50);
}In pratica esso non fa altro che impostare un timer alla scadenza del quale viene invocato il metodo drawStep(). Il timer viene interrotto all'interno dello stesso metodo drawStep() quando il grafico è stato completamente disegnato:
...
ys += step;
if (ys > y) {
clearInterval(intId);
xText.draw(gr);
...L'esecuzione dell'animazione vera e propia verrà effettuata tramite la seguente serie di chiamate:
var b1 = new Bar3D(50, 300);
var b2 = new Bar3D(120, 170);
var b3 = new Bar3D(190, 200);
var b4 = new Bar3D(260, 150);
var b5 = new Bar3D(330, 70);
var b6 = new Bar3D(400, 250);
b1.animate();
b2.animate();
b3.animate();
b4.animate();
b5.animate();
b6.animate();Il primo gruppo di istruzioni crea le istanze di barra tridimensionale alle coordinate indicate, mentre il secondo gruppo di istruzioni avvia l'effetto di animazione. L'effetto finale è quello mostrato nel seguente esempio:
Il codice completo degli esempi illustrati si trovano nel file allegato all'articolo.
Conclusioni
Con jsDraw2DX, abbiamo a disposizione anche altri strumenti per creare ad esempio archi, ellissi, poligoni e curve di Bézier. Allo stato attuale la libreria non ha strumenti di alto livello per realizzare disegni ed effetti complessi, per cui è necessario scrivere un po' di codice, come abbiamo avuto modo di vedere nella realizzazione del grafico a barre animato.
Sul sito del progetto è riportato un altro esempio interessante che riporta la densità della popolazione mondiale riportandola su un planisfero, il tutto generando esclusivamente grafica SVG.
La documentazione è molto scarna, anche se gli esempi riportati risultano abbastanza chiari. Insomma, una libreria interessante di cui tenere d'occhio le evoluzioni.
