Informatica Grafica 2003 Lezione 4:

Transcript

1 Informatica Grafica 2003 Lezione 4: Elementi grafici avanzati I testi In moltissime situazioni è necessario includere testi all'interno delle animazioni. Quasi tutti i programmi dispongono di funzionalità per gestire l'inclusione di testi. Marco Gribaudo marcog@di.unito.it I testi I testi: linea singola I testi possono essere divisi in: Singola linea Multilinea Un testo a linea singola viene utilizzato per inserire parole o brevi frasi. Se viene modificato si allarga orizzontalmente. I testi: linea singola I testi: multilinea Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... In programmi sofisticati, il testo a linea singola può essere scritto su un tracciato. Un testo multilinea è adatto a contenere frasi o documenti più lunghi. È caratterizzato dalla larghezza delle righe.

2 I testi: multilinea Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... I testi: multilinea Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume... Quando viene modificato, si allarga verticalmente. Il alcuni programmi è possibile indicare anche un limite verticale ai testi multilinea ed un riversamento. I testi: multilinea Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... Quando viene esaurito anche lo spazio verticale, il testo continua nella casella collegata mediante il riversamento. I testi in SVG I testi in SVG sono solo a singola linea e si indicano con il tag <text>...</text>: <text x="20" y="30"> Quando sei qui con me, </text> Gli attributi x e y specificano la posizione a cui la scritta deve essere visualizzata. Il testo viene indicato tra i tag di apertura e chiusura. I testi in SVG Possono essere disposti lungo un tracciato utilizzando il tag <textpath>...</textpath> <defs> <path id="tracciato" d="m20 45C "/> </defs> <text> <textpath xlink:href="#tracciato"> Questa stanza non ha piu' pareti, </textpath> </text> Ogni testo è scritto utilizzando caratteri presi da una fonte specifica. Per ottenere effetti grafici interessanti occorre definire in modo preciso la fonte di caratteri utilizzata. L'attributo xlink:href indica il nome del comando path che specifica il tracciato.

3 Il font determina la forma dei caratteri utilizzati. Alcuni font contengono simboli invece che lettere, numeri e segni d'interpunzione. La dimensione determina la grandezza delle lettere. Lo stile permette di mettere alcune lettere in grasseto od in italico. Normalmente è possibile specificare una spaziatura tra le lettere ed un allineamento verticale. possono essere scritti utilizzando colori differenti.

4 Alcuni programmi permettono di specificare un controno ed un riempimento per le lettere. Molti programmi permettono specificare formati diversi per le varie parole di una frase. in SVG si specificano all'interno della proprieta' style: <text x="20" y="60" style="font-family:courier; font-weight:bold;"> Ma alberi, </text> Gli attributi che si possono specificare sono gli stessi che si possono specificare in un foglio di stile CSS di una pagina HTML: font-family, font-size, font-weight, font-style, textdecoration, word-spacing, letter-spacing. in SVG E' possibile utilizzare caratteri diversi in un testo attraverso il tag <tspan>...</tspan>: <text x="20" y="90"> Alberi <tspan style="font-weight:bold;"> infiniti</tspan> </text> I tag tspan racchiudono la parte di testo a cui si vuole assegnare il carattere alternativo. I testi multilinea possono contenere più paragrafi. Un paragrafo è un'entità delimitata da un punto a capo. Ad un paragrafo possono essere associate numerose proprietà. Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, L'allineamento determina dove il testo si posiziona nel riquadro assegnato.

5 Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi... I margini determinano lo spazio saltato all'inizio ed alla fine dell'area assegnata al testo. L'interlinea specifica lo spazio interposto tra una linea e la successiva. Anche se in SVG non vi sono i paragrafi, si puo' comunque allineare il testo attraverso la proprieta' text-anchor: L'indentazione determina lo spazio presente tra il bordo e la prima parola della prima riga di un paragrafo. I valori start, middle ed end corrispondono all'allineamento sinistro, centrale e destro. Le parti interne dei poligoni e delle altre figure chiuse possono essere riempite con effetti più complessi rispetto al colore uniforme. Tra i riempimenti avanzati i gradienti sono quelli più semplici. Un gradiente consiste in una sfumatura continua tra due colori.

6 Esistono diversi tipi di gradienti: Lineari Radiali Conici Quadrati In un gradiente lineare i colori si susseguono lungo una linea retta. Generalmente si può stabilire la direzione della retta. In un gradiente radiale i colori si susseguono in modo circolare a partire da un centro. Generalmente è possibile stabilire il centro. Un gradiente conico crea un effetto simile a quello di un cono visto dall'alto. È caratterizzato da un centro e da un angolo. Un gradiente quadrato crea un effetto piramidale. Anche esso è caratterizzato da un centro e da un angolo. Solitamente è possibile specificare più colori intermedi e la proporzione in cui essi si alternano, creando effetti "arcobaleno".

7 Gradienti in SVG I gradienti lineari in SVG sono realizzati attraverso il tag <lineargradient>...: <lineargradient id="gtob"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </lineargradient> I tag <stop> specificano il colore che il gradiente assume in punti specifici della sfumatura. L'attributo offset inidca il punto in cui la sfumatura assume la tinta specificata. Gradienti in SVG Utilizzando gli attributi x1, y1, x2 e y2 si puo' variare l'inclinazione: <lineargradient id="gtob" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </lineargradient> I valori indicano in percentuale i punti di inizio e di fine di un segmento la cui direzione denota la direzione della sfumatura. Gradienti in SVG Il tag <radialgradient> serve a realizzare gradienti radiali: <radialgradient id="rgtob" cx="20%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </radialgradient> Gli attributi cx, cy e r specificano le coordinate del centro del gradiente, ed il raggio della circonferenza che lo include. Gradienti in SVG I gradienti si applicano alle figure utilizzando il valore url(#) alla proprieta' fill del tag style dell'oggetto da riempire. <rect x="10" y="10" width="400" height="200" style="fill:url(#rgtob)"/> In questo caso rgtob e' il valore che e' stato dato all'attributo id del gradiente che si intende assegnare al rettangolo. Gradienti in SVG Con l'attributo spreadmethod si possono specificare i modi in cui il gradiente viene ripetuto: <lineargradient id="gtob" x1="0%" y1="0%" x2="50%" y2="50%" spreadmethod="reflect"> <stop offset="0%" style="stop-color:green"/> <stop offset="100%" style="stop-color:blue"/> </lineargradient> Il valore pad indica che il gradiente non viene ripetuto. repeat indica una ripteizione normale e reflect una ripetizione speculare. Un altro tipo di riempimento avanzato è denominato texture. Una texture è un'immagine raster che viene ripetuta più volte in modo da riempire un'area delimitata da una primitiva.

8 vengono importate esattamente come le altre immagini e possono essere utilizzate per riempire aree quali rettangoli, cerchi e poligoni. Normalmente le texture rappresentano materiali reali quali legno, pietra, tessuto od altro. In questo modo si può dare l'impressione che gli oggetti disegnati siano costituiti dal materiale impiegato. possono essere regolate in modo da migliorare la qualità dell'effetto. Si può generalmente specificare un'origine da cui far partire la ripetizione delle immagini...

9 ... ed applicare le trasformazioni base quali ridimensionamenti, rotazioni e skew. I pattern SVG mette a disposizione uno strumento piu' complesso delle texture con cui ottenere effetti simili: i pattern. Un pattern e' una figura che viene ripetuta piu' volte ed utilizzata come riempimento di un oggetto. Se un pattern e' costituito da una immagine, esso e' equivalente ad una texture. I pattern I pattern si definiscono utilizzando il tag <pattern>...</pattern>: <pattern id="leaves" x="0" y="0" width="120" height="90" patternunits="userspaceonuse"> <image xlink:href="inv7304.jpg" x="0" y="0" width="120" height="90"/> </pattern> Gli attributi x, y, width e height definiscono le dimensioni del pattern. Essi vengono utilizzati con il valore url(#) assegnato alla proprieta' fill degli oggetti. I pattern Con l'attributo patterunits si puo' specificare come il pattern viene ripetuto: <pattern id="leaves" x="0" y="0" width="120" height="90" patternunits="userspaceonuse"> <image xlink:href="inv7304.jpg" x="0" y="0" width="120" height="90"/> </pattern> Il suo utilizzo e' pero' molto complesso, ed in questo caso ci limiteremo al valore userspaceonuse che fa si che le dimensioni del pattern corrispondano a quelle del riempimento. I frattali Alcuni programmi mettono a disposizione riempimenti procedurali o frattali. In entrambi i casi l'interno di una figura viene determinato tramite un algortimo matematico. Queste tecniche sono in grado di ricreare i materiali, evitando alcuni problemi caratteristici delle texture. I frattali Un riempimento procedurale è un algoritmo configurabile, capace di riprodurre uno specifico materialie.

10 I frattali I frattali I riempimenti procedurali o frattali godono dei seguenti vantaggi rispetto alle texture: Un frattale produce invece una figura astratta utilizzabile per creare effetti speciali. Non perdono di qualità ingrandendo le figure. Non presentano pattern ripetitivi. Sono configurabili in base alle esigenze. La vettorializzazione Quando si usano programmi vettoriali, può essere necessario converitre un'immagine raster nell'equivalente vettoriale. Molti strumenti mettono quindi a disposizione funzionalità di vettorializzazione con cui trasformare un'immagine raster nell'equivalente vettoriale. La vettorializzazione La vettorializzazione cerca di trasformare aree contigue di colore simile in poligoni. La vettorializzazione L'OCR Quando occorre vettorializzare bitmap contenenti testo, è possibile convertire l'immagine direttamente in testo e non in poligoni. Generalmente è possibile specificare una tolleranza che determina la fedeltà della immagine generata, a scapito della sua complessità. Gli OCR (Optical character recognition) si occupano di "leggere" immagini contenenti testo, estrapolando i caratteri in esse presenti.

11 L'OCR L'OCR ADVANCED Activation Approach Parallel Architectures Problem Solvi applications to logical reasoning -ADVANCED Acttvation Aooioach ParralieI Architcctures Probiem Solvi applications to loglcal rcasoning Un OCR legge una bitmap contente dei caratteri e produce un file di testo contente le parole identificate. Sebbene questa tecnologia abbia fatto passi da gigante negli ultimi anni, i risultati sono di qualità piuttosto modesta!