Lezione 3: Le librerie. Trasformazioni ed elaborazioni. Le librerie. Le librerie. Le librerie. Copie e librerie in SVG

Transcript

1 Informatica Grafica 2003 Lezione 3: Trasformazioni ed elaborazioni Molti programmi permettono di memorizzare copie degli oggetti utilizzati più di frequente in opportune librerie. In questo modo è possibile accedere e riutilizzare facilmente oggetti grafici definiti in precedenza. Marco Gribaudo marcog@di.unito.it Agli oggetti in libreria viene associato un nome. Generalmente le librerie possono contenere oggetti di tipo differente e possono raggruppare in gerarchie i vari elementi. Copie e librerie in SVG I gruppi possono essere copiati per riferimento attraverso il comando <use>: <use xlink:href="#gruppo1" x="10" y="20"/> Sono disponibili numerose funzioni per organizzare le librerie di oggetti. Il valore dell'attributo xlink:href corrisponde al valore dell'attributo id del gruppo da copiare, preceduto da #. x ed y rappresentano le coordinate in cui viene posizionata la copia.

2 Copie e librerie in SVG Si puo' creare l'equivalente della libreria di Flash attraverso il comando <defs>..</defs>: <defs> <g id="gruppo1" style="stroke:black;"> <line x1="700" y1="20" x2="700" y2="25" style="stroke:white"/> <rect x="0" y="0" width="800" height="100" style="fill:#cccc99; stroke:none;"/> </g> </defs> I gruppi definiti allinterno dei tag <defs> non vengono visualizzati, ma possono essere richiamati con <use>. Trasformazioni Agli oggetti possono esserre applicate alcune semplici trasformazioni. Queste trasformazioni non cambiano la forma dell'oggetto, ma lo ruotano e lo schiacciano mantenendo invariato il numero di componenti. Ridimensionamento Ridimensionamento La trasformazione più semplice è il ridimensionamento. Essa permette di ingrandire o rimpicciolire l'oggetto. Il ridimensionamento può essere differente lungo gli assi orizzontale e verticale, distorcendo la figura. Riflessione Trasformazioni di scala in SVG Tutte le trasformazioni in SVG si effettuano utilizzando l'attributo transform. I valori di tale attributo elencano le trasformazioni che vengono applicate agli oggetti. Con la riflessione si puo' ribaltare un oggetto lungo l'asse orizzontale o verticale. Tutti i tag che rappresentano primitive (<rect>, <ellipse>,..), gruppi (<g>) o riferimenti (<use>) possono specificare l'attributo transform.

3 Trasformazioni di scala in SVG Ridimensionamenti e riflessioni in SVG si effettuano utilizzando l'opzione scale(): Rotazione <use xlink:href="#gruppo1" x="10" y="20" transform="scale(2.0, 3.0)"/> I due valori tra parentesi specificano rispettivamente il fattore di ingrandimento (riduzione) orizzontale e quello verticale. Le riflesioni si ottengono utilizzando fattori negativi. La rotazione ruota la figura attorno ad un centro. Rotazione Rotazione La rotazione in SVG si ottiene utilizzando l'opzione rotate(): <use xlink:href="#gruppo1" x="10" y="20" transform="rotate(45.0, 20, 50)"/> È generalmente possibile specificare il punto attorno al quale avviene la rotazione. Il primo parametro specifica l'angolo di rotazione (espresso in gradi). Il secondo ed terzo parametro (entrambe opzionali) definiscono le coordinate del centro di rotazione. Skew Skew In SVG per ottenere l'effetto di skew si adoperano le opzioni skewx e skewy: <use xlink:href="#gruppo1" x="10" y="20" transform="skewx(15.0)"/> <use xlink:href="#gruppo1" x="50" y="20" transform="skewy(15.0)"/> Lo skew piega leggermente la figura lungo gli assi orizzontali o verticali. Il parametro di questa opzione specifica l'angolo in gradi di cui viene piegato l'oggetto.

4 Importare immagini Per produrre immagini più realistiche od effetti più sofisticati è possibile importare immagini (vettoriali o raster) all'interno dei propri disegni. Il formato delle immagini ne determina le caratteristiche: colori, trasparenze, primitive utilizzate, etc... Le immagini vettoriali vengono salvate da opportuni programmi ed hanno molteplici estensioni (Es..eps,.ai,.dxf,.fh9,...) Generalmente le immagini vettoriali vengono importate trasformando le primitive del file letto in quelle dello strumento utilizzato. Le immagini importate vengono raggruppate in un unico oggetto. Una volta importate, le immagini vettoriali possono essere modificate "rompendo" il gruppo in cui vengono racchiuse. Il programma in uso potrebbe non avere a disposizione tutte le primitive necessarie all'importazione. In questo caso esse vengono approssimate da quelle disponibili. Il comando <use> in SVG puo' essere anche adoperato per importare immagini vettoriali (sempre pero' in formato SVG). <use xlink:href="file.svg#gruppo1" x="10" y="20"/> Se il nome del gruppo e' preceduto da un nome di file prima del cancelletto, SVG importera' l'oggetto (quindi un'immagine vettoriale) dal file specificato. Anche le immagini raster possono essere salvate in differenti formati. A seconda del formato utilizzato, vengono determinate le proprietà di visualizzazione delle immagini importate. Le immagini raster generalmente non possono essere modificate direttamente dai programmi di grafica vettoriale.

5 Le immagini GIF possono contenere trasparenze ed animazioni. Le immagini JPEG offrono un'ottima compressione per le fotografie, ma possono dare origine ad immagini di scarsa qualità. Non ammettono trasparenze od animazioni. Le immagini BMP o TIFF occupano molto spazio ma consentono di mantenere la qualità massima per le fotografie. Anch'esse non hanno trasparenze od animazioni. Le immagini PNG rappresentano il nuovo standard per la grafica destinata al web, e sono capaci di codificare trasparenze (alpha channel) ed infiniti colori. In SVG le immagini raster possono essere importate attraverso il comando <image>: <image xlink:href="sea.jpg" x="10" y="20" height="240" width="320"/> Normalmente alle immagini importate, tanto raster che vettoriali, si possono applicare le stesse trasformazioni che si applicano agli oggetti: cambiamenti di scala, rotazioni e skew. xlink:href specifica il nome del file che contiene l'immagine. x, y, width e height definiscono il rettangolo in cui l'immagine (opportunamente scalata) verra' posizionata. I formati supportati sono JPEG e PNG.

6 Oltre alle trasformazioni semplici i programmi grafici consentono trasformazioni più complesse tra le quali: Trasparenza Luminosità Tinta Cambiando la trasparenza (alpha) di un oggetto, si lascia intravvedere cio' che gli sta sotto. Quando si utilizzano le trasparenze, l'ordine in cui vengono disposti gli oggetti assume notevole importanza. La luminosità di un'immagine puo' essere variata per ottenere effetti di dissolvenza. Cambiando la tinta di un oggetto, si può variare la tonalità del colore predominante.