PHP grafica dinamica, grafici e gradienti

Di Antonio Taccetti

GD è una libreria di codice open source per la creazione dinamica di immagini.

Scritta in C, il suo uso è disponibile con vari linguaggi di programmazione fra i quali PHP di solito è attivo per default.

GD crea immagini nei formati grafici PNG, JPEG e GIF e molti altri.

Comunemente utilizzata in siti web per generare e modificare immagini runtime, il suo impiego è molto più ampio e variegato.

Le immagini create con GD sono identiche alle immagini “fisiche” raggiungibili con URL e link HTML.

L'utilità della libreria è enorme, si pensi alla creazione in tempo reale di grafici e report o l’applicazione di effetti speciali, l’implementazione di copyright anche senza modificare l’immagine originale fino alla possibilità di rendere caratteri che computer non possiedono.

Questa guida “PHP grafica dinamica, grafici e gradienti” è la seconda parte del volume “GD library con PHP”.

“PHP grafica dinamica, grafici e gradienti” illustra molteplici utilizzi dei comandi descritti nella prima parte.

Grafici lineari, a barre, a torta con legenda circolare, 2d e 3d e scelta automatica dei colori e grafici con immagini del prodotto analizzato.

Posizionamento di valori e legende in qualsiasi punto e per i diagrammi circolari anche intorno ad essi finanche evidenziandone settori mediante estrazione di porzioni.

Maschere per estrarre, da immagini, porzioni di qualsiasi forma.

Creazione di poligoni 3d e generazione dinamica di immagini a stella con quantità di punte, rotazione e colori a scelta.

Ellissi e spirali ruotate, logotipi ed emoticons dinamiche.

Frasi su circonferenze con calcolo dimensioni dei font TrueType

Gradienti lineari e 2 o più colori, sferici, poligonali e stellari.

Tutti gli script della guida operano esclusivamente con le funzioni GD library di PHP, senza uso di classi o software aggiuntivi.

Ogni script è descritto e commentato passo-passo in lingua italiana.

Gli esempi del libro sono implementati in pagine PHP sul sito dell'autore.

In queste pagine i valori creativi delle immagini sono in chiaro, l’utente può cambiarli di modo che le immagini vengano rigenerate con i nuovi valori.

Gli esempi e gli script, dei quali è disponibile il download, possono essere copiati, modificati e utilizzati senza chiedere autorizzazioni.

La prima parte della guida dal titolo “PHP grafica dinamica, funzione e figure” descrive il set di istruzioni PHP/GD, per ciascuno di essi è presentato almeno uno script descritto e commentato passo-passo in lingua italiana.

Le due parti sono anche disponibili in un unico volume dal titolo “GD library con PHP”.

• Lingua: Italiano
• Editore: Antonio Taccetti
• Data di uscita: 14 giu 2016
• ISBN: 9786050457476

Anteprima del libro

Tavola dei Contenuti (TOC)

Grafici

Grafici a linee

es_97_grafico_andamento_azionario

Grafici a barre

es_98_grafico_a_barre_orizzontali_sondaggio_vacanza

es_99_grafico_a_barre_verticali

es_100_barre_verticali_Abitanti_nazioni_Europa

es_101_barre_verticali_3D_spese_familiari

es_102_barre_verticali_3d_spese_annue

Usare immagini per confrontare grandezze

es_103_Consumo_Birra

es_104_torta superfici_nazioni

Grafici a torta

es_105_grafico_a_torta_basilare

Scelta dei colori per i grafici a torta

es_106_generatore_colori

Posizionamento valori intorno al grafico a torta

es_108_diagramma_circolare_con_legende_circolari_e_standard

es_109_estrarre_settori_di_diagramma_circolare

es_110_diagramma_circolare_3d

es_111_estrarre_settori_diagramma_circolare_3D

Circonferenze poligoni e stelle

es_112_frasi_su_circonferenza

es_113_frasi_su_emicirconferenza

Calcolo dimensione caratteri TTF per circonferenze

es_114_dimensione_caratteri_ttf_e_GD

es_115_A_frasi_TTF_su_circonferenza

es_115_B_frasi_TTF_su_emicirconferenza

Poligoni ed effetti 3d

es_116_fra_circonferenze_e_poligoni

es_117_generatore_di_stelle

Ellissi ruotate e spirali

Ellisse ruotata di n gradi

es_118_ellisse_ruotata

es_119_spirale_ellittica_ruotata

Logotipi

Atomo con orbite

es_121_atomo_con_orbite

yin yang

es_122_Yin_Yang

emoticons

es_123_emoticons

Bandiere al vento

es_124_Bandiere al vento

Maschere

Maschera per ottenere e spostare

es_126_estrae_trasferisce_figura_ovale

Gradienti

Gradiente_lineare

es_128_gradiente_lineare

es_129_gradiente_lineare_3_colori

es_130_gradiente_sferico

es_132_gradiente_stella_imagerectangle

es_133_gradiente_stella_imagepolygon

Corona di stelle con gradiente

es_134_stelle_e_gradiente

Gradinetie per colorare oggetti esistenti

es_135_gradiente_lampada_accesa

Scelta dei gradenti

es_136_test_per_gradienti

Grafici

L'invenzione di questa tecnica è attribuita a William Playfair che alla fine del 1786 nel suo Commercial and Politica Atlas del 1786 ed in seguito, nel 1801, introdusse il grafico a torta o diagramma circolare.

Il diagramma circolare rappresenta rapporti fra valori ed è divenuto un metodo largamente usato tanto da essere spesso considerato indispensabile.

Con l'avvento dei computer, volendo dare agli utenti la possibilità di avere grafici creati dinamicamente, per esempio con dati letti da una tabella di database, è necessario crearli sul momento, la libreria GD dispone di tutti gli strumenti per questo compito.

Negli esempi che verranno presentati la trasparenza nelle immagini verrà esibita con riquadri bianchi/grigio-sfumati com'è usuale nei software di grafica evoluti.

Grafici a linee

Un tipo di rappresentazione grafica, intuitiva ed accurata, è il diagramma cartesiano.

Questo tipo di diagramma è utile per rappresentare due dati legati tra loro da una relazione.

Il diagramma cartesiano è formato da due semirette perpendicolari che si incontrano in un punto

Su ciascuna semiretta sono riportate le scale di due valori.

I grafici a linee sono ideali per mostrare l'andamento delle tendenze nel tempo.

Per esempio nell'asse orizzontale (X) sono riportati i 30 giorni di un mese e nell'asse verticale (y) dal basso verso l'alto la scala dei valori, per es. da 0 a 100 che rappresentano prezzi.

Nell'esempio classico, dato un piano cartesiano, sull'asse Y sono rappresenti i valori azionari di una determinata azienda, mentre sull'asse X il loro valore che cambia in un determinato periodo temporale.

Generalizzando questo esempio, è possibile rappresentare qualsiasi dato che si comporta come una funzione rispetto alla variabile sull'asse X.

es_97_grafico_andamento_azionario

Il grafico simula l'andamento di un ipotetico titolo azionario per 30 giorni.

I valori del titolo sono creati in modo casuale in un range fra 1 e 550 compresi.

Questi valori si rinnovano automaticamente ad ogni lancio dello script dando grafici sempre diversi.

Vengono disegnate sull'asse x i giorni, e sull'asse y la scala dei valori.

Parallele all'asse x, sono disegnate linee intermedie per meglio leggere il grafico.

Il font usato è arial.ttf

$Giorno = array(); // dichiara array dei giorni

$gg=1; // giorno del mese

for($x=1; $x<31; $x++)

{

$NumeroMinimo = 1; $NumeroMassimo = 550;

$n = rand($NumeroMinimo,$NumeroMassimo);

$Prezzo[$gg] = $n; // immette in ciascun giorno il prezzo come valore casuale fra 1 e 550

$gg++;

}

// Crea immagine truecolor di 350x280 pixel

$Immagine = imagecreatetruecolor(1240,600 );

// colore di fondo nel grafico

$Grigio = imagecolorallocate($Immagine, 200, 200, 200);

// Riempire lo sfondo con il colore selezionato in precedenza

imagefill($Immagine, 0, 0, $Grigio);

$Rosso = imagecolorallocate($Immagine,255,0,0); // valori ed etichette sulle coordinate

$Verde = imagecolorallocate($Immagine,0,102,0); // Linea del grafico

$Nero = imagecolorallocate($Immagine,0,0,0); // colore per ascisse ed ordinate

imagesetthickness($Immagine, 3); // larghezza tratto di 3 pixel

// disegna ascisse ed ordinate

imageline($Immagine, 40, 5, 40, 560, $Nero ); // X

imageline($Immagine, 40, 560, 1240, 560, $Nero ); // Y

imagesetthickness($Immagine, 1); // larghezza tratte di 1 pixel

$Giallo = imagecolorallocate($Immagine, 255, 255, 0);

// linee orizzontali tratteggiate gialle

$style = array(

$Giallo, $Giallo, $Giallo, $Giallo, $Giallo,

IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT);

imagesetstyle($Immagine, $style);

$S = 500;

for($y=60;$y<470;$y+=100)

{

imagestring($Immagine, 3, 18, $y, $S , $Giallo); // valori linee gialle tratteggiate

imageline($Immagine, 30, $y, 1240, $y, IMG_COLOR_STYLED); // linee gialle tratteggiate

$S-=100;

}

// scrittura di testi font, angolo rotazione, posizione x di partenza

$DimensioneFont = 10; $Font = font/arial.ttf; $Angolo = 0; $xStart = 40;

// scala x, separatori dei giorni del mese giorni del mese e numero giorno

for($x=1;$x<31;$x++)

{

imageline($Immagine, $x*40, 560, $x*40, 580, $Nero ); // separatore

// disegna numero giorni del mese

imagettftext($Immagine, $DimensioneFont, $Angolo, $x*40+15, 580, $Nero, $Font, $x);

}

// Scrive valore delle coordinate

imagestring($Immagine, 5, 600, 583, G I O R N I , $Rosso);// x in orizzontale

imagestringup($Immagine, 5, 2, 350, V A L O R I , $Rosso);// y in verticale dal basso verso l'alto

// inizio della scrittura della linea del grafico e dei valori

$xP = 0; $yP = 0; // conterrà valore del giorno Precedente

$xC = 0; $yC = 560;// conterrà valore del giorno Corrente

$DimensioneFont = 8;

for($gg=1;$gg<31;$gg++) // scorre l'array dei prezzi/giorno

{

$xP = $xC; $xC = $gg*40+15;

$yP = $yC; $yC = 560 - $Prezzo[$gg];

imagesetpixel($Immagine, $gg*40+15,$Prezzo[$gg], $Nero);

imageline($Immagine, $xP,$yP,$xC,$yC, $Verde); // Linea del grafico

// prezzo giornaliero

imagettftext($Immagine, $DimensioneFont, $Angolo, $gg*40+18, 560-$Prezzo[$gg], $Rosso, $Font, $Prezzo[$gg]);

}

// imagepng($Immagine); // al browser

imagepng($Immagine, es_97_grafico_andamento_azionario.png); // salva

imagedestroy($Immagine);// libera memoria

?>

utf-8>

es_102_grafico_andamento_azionario.png>

Risultato:

Grafici a barre

Il grafico a barre è un metodo per riassumere una serie di dati riguardanti una categoria.

I valori sono visualizzati utilizzando più barre della stessa larghezza, e ciascuna barra rappresenta una determinata categoria. L'altezza di ciascuna barra è proporzionale al valore o somma di valori della categoria che rappresenta.

Nel grafico a barre possono anche essere inserite e sovrapposte informazioni aggiuntive con linee di riferimento fra valori