Informatica Grafica 2003 Lezione 2: Primitive avanzate, suddividere e modificare Marco Gribaudo marcog@di.unito.it I cerchi I cerchi possono essere specificati in modi differenti: Centro e raggio Due punti diametralmente opposti Quadrato circoscritto Tre punti distinti I cerchi I cerchi Si seleziona il punto centrale, e si imposta il raggio. Si seleziona un punto e quindi quello diametralmente opposto. I cerchi I cerchi Si selezionano i due angoli opposti del quadrato che circoscrive la circonferenza. Si selezionano i tre punti per cui la circonferenza deve passare.
I cerchi Nella maggior parte dei programmi grafici, i cerchi vengono inseriti come casi speciali degli ellissi. Così come i rettangoli, cerchi ed ellissi possono essere costituiti da un perimetro, da un'area o da entrambi. I cerchi I cerchi si indicano in SVG utilizzando il comando <circle>: <circle cx="0" cy="0" r="20" style="fill:#cccc99; stroke:none;"/> Gli attributi cx e cy rappresentano le coordinate del centro, mentre r specifica il suo raggio. Gli ellissi Gli ellissi Anche gli ellissi possono essere specificati in modi distinti: Centro e semiassi Rettangolo circoscritto Si seleziona il punto centrale, e si impostano i due semiassi. Gli ellissi Gli ellissi Gli ellissi si indicano in SVG utilizzando il comando <ellipse>: <ellipse cx="0" cy="0" rx="20" ry="40" style="fill:#cccc99; stroke:none;"/> Si selezionano i due angoli opposti del rettangolo che circoscrive l'ellisse. Gli attributi cx e cy rappresentano le coordinate del centro, mentre rx ed ry le dimensioni dei semiassi orizzontali e verticali.
Gli archi Gli archi A partire da un cerchio od un ellisse si possono definire degli archi. Un arco corrisponde ad una "fetta" di un cerchio o di un ellisse. Un arco si definisce generalmente specificando un angolo iniziale ed uno finale. Un insieme di segmenti contigui prende il nome di poligono. possono essere aperti o chiusi. aperti hanno un estremo iniziale ed uno finale. aperti si indicano in SVG utilizzando il comando <polyline>: <polyline points="10 10, 20 20, 40 0, 50 10" style="fill:none; stroke:black;"/> Sono caratterizzati da un tratto, da un colore e da una forma per gli estremi iniziale e finale. L'attributo points contiene un elenco di coppie separate da virgola che specificano le coordinate x ed y dei punti che costituiscono il poligono.
chiusi si indicano in SVG utilizzando il comando <polygon>: <polygon points="10 10, 20 20, 50 20, 40 10" style="fill:#cccc99; stroke:none;"/> chiusi rappresentano figure chiuse e sono caratterizzati da un contorno e da un riempimento. Anche in questo caso l'attributo points contiene un elenco di coppie separate da virgola che specificano le coordinate x ed y dei punti che costituiscono il poligono. Non occorre che l'ultimo punto sia uguale al primo. Quando vi sono intersezioni, esistono due modalita' differenti con cui riempire il poligono: la modalita' pari-dispari...... e la modalita' non-zero. La modalita pari-dispari o quella non-zero possono essere impostate in SVG dentro l'attributo style attraverso l'opzione fillrule: <polygon points="10 10, 20 20, 40 0, 50 10" style="fill:#cccc99; stroke:none; fill-rule: evenodd;"/> <polygon points="10 10, 20 20, 40 0, 50 10" style="fill:#cccc99; stroke:none; fill-rule: nonzero;"/> Oltre ai segmenti retti, i programmi di grafica consentono la specifica di linee curve. Una linea curva viene definita generalmente come un poligono speciale i cui vertici sono uinti da tratti curvilineii.
Esistono modi diversi in cui poter specificare le linee curve. I principali sono: Curve di Herimte Cuve di Bezier Spline In una curva di Herimite, si specificano i punti per cui essa passa, ed anche le tangenti (direzioni della curva) in essi. Le tangenti possono avere una direzione differente a destra ed a sinistra del punto a cui sono associate. In questo caso si parla di cuspidi. Se le tangenti hanno la stessa direzione e la stessa dimensione, allora la curva possiede una "continuità maggiore". Può essere utile per definire traiettorie di movimento di oggetti. In una curva di Bezier, vengono definiti oltre ai punti attraverso cui la curva passa, due punti di controllo che ne determinano la curvatura. Il segmento curvilineo risulta sempre incluso nel guscio convesso (immaginiamo di unirli con un elastico) determinato dai quattro punti.
di Hermit e Bezier hanno esattamente le stesse potenzialita'. Cambia solo il modo in cui si specificano le cose! Nelle spline, il programma cerca di aggiungere automaticamente le tangenti. Per il resto le curve si comportano esattamente allo stesso modo dei poligoni: Possono essere aperte, chiuse, dotate di un tratto, di un riempimento, di un contorno ed eventualmente di una "punta". Non tutte le spline si comportano allo stesso modo. In alcuni programmi la curve non passano neppure per i punti stabiliti. In SVG si possono realizzare curve di Bezier attraverso il comando <path>: <path d="m 30 100 C 50 50, 70 20, 100 100, 110 130, 45 150, 65 100" style="fill:none; stroke:black;"/> L'attributo d contiene le coordinate dei punti della curva. All'inizio si specifica la lettera M seguita dalle coordinate del primo punto, quindi la lettera C seguita dalle coordinate dei restanti punti (di controllo e non) separate da virgole. Una volta inserite le varie primitive componenti un disegno, dev'essere possibile modificare gli oggetti. Prima di modificare un oggetto, occorre selezionarlo. A questo servono gli strumenti di selezione.
Esistono numerosi strumenti di selezione, ciascuno con una sua funzionalità specifica: Selezione di oggetti Modifica di un oggetto "Ritaglio" di un oggetto Lo strumento di selezione più semplice consente di selezionare l'oggetto sotto il puntatore del mouse. Una volta selezionato, l'oggetto può essere spostato...... le proprietà dell'oggetto possono essere modificate attraverso opportuni "pannelli addizionali". Per oggetti più complessi (come le curve) esistono generalmente strumenti differenti per la selezione e per la modifica. Attraverso questi strumenti si possono selezionare e spostare i punti intermedi, oppure modificare le tangenti alle curve.
Altri strumenti permettono di "sezionare" un oggetto, selezionandone una parte. In questo modo si possono creare nuovi oggetti a partire da altri oggetti esistenti. Raggruppare gli oggetti Raggruppare gli oggetti Le immagini sintetizzate al calcolatore sono generalmente composte da numerose primitive. Per modificare agevolmente le immagini e' possibile raggruppare le primitive. Ogni gruppo può quindi essere elaborato come se fosse un unico oggetto. Se si deve spostare un oggetto formato da più primitive occorre spostarne ad una ad una le componenti. Raggruppare gli oggetti Gerarchie di oggetti I gruppi di oggetti possono essere a loro volta utilizzati come elementi per costruire nuovi oggetti. In questo modo si possono creare vere e proprie gerarchie di oggetti. Un gruppo può invece essere spostato come se fosse un'unica entità.
Gerarchie di oggetti Gerarchie di oggetti Le gerarchie possono essere "decomposte". In questo modo si possono modificare nuovamente le singole componenti. In tanti programmi è anche possibile decomporre l'intero albero della gerarchia mediante un unico comando. Ordine di visualizzazione Ordine di visualizzazione Nella maggior parte dei disegni e' importante l'ordine in cui vengono visualizzati gli oggetti. I nuovi oggetti devono potersi sovrapporre ai precedenti quando necessario, senza venire occultati dagli elementi successivi. Quasi tutti i programmi dispongono delle funzioni "porta sopra" e "porta sotto" per cambiare l'ordine degli oggetti. Ordine di visualizzazione I gruppi in SVG Anche in SVG si possono definire dei gruppi attraverso il comando <g>...</g>: <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> In tanti casi sono anche disponibili le funzionalita' "porta in primo piano" e "porta sullo sfondo".
I gruppi in SVG L'attributo id e' un nome che identifica il gruppo in modo univoco (una chiave). Utilizzando un'attributo style nel tag <g>, si specifica lo stile di default con cui disegnare gli elementi in esso contenuti. I livelli Un'alternativa ai gruppi talvolta disponibile e' costituita dai livelli. Un livello consiste in una serie di oggetti visualizzabili appartenenti concettualmente ad una stessa entità logica. I livelli I livelli I livelli impongono automaticamente un ordine di visualizzazione: l'ultimo viene coperto da tutti gli altri. Un livello puo' essere visibile o nascosto. I livelli I livelli A differenza di un gruppo, un livello non può essere "spezzato" o "riunito". Generalmente un programma consente la modifica di un solo livello per volta. Tutte le altre primitive vengono ignorate.
I livelli Livelli guida Per effettuare disegni complessi, può essere utile avere delle figure "guida". Un livello guida contiene immagini che vengono visualizzate solamente durante il disegno e NON nell'immagine finale. Un livello può contenere più gruppi di oggetti, ma un gruppo non può estendersi su più livelli. Livelli guida Livelli guida Un livello guida è a tutti gli effetti un livello...... l'utente puo' utilizzarlo come guida per effettuare dei disegni... Livelli guida... ma non compare nell'immagine finale! Livelli maschera Quando si realizzano animazioni od immagini complesse, può essere necessario mostrare solo parzialmente le figure sottostanti. Un livello maschera non specifica nuovi elementi da visualizzare, ma solamente quale porzione delle immagini sottostanti far apparire.
Livelli maschera Livelli maschera I disegni effettuati su un livello maschera non vengono visualizzati nell'immagine finale...... ma determinano quali elementi dei livelli sottostanti vengono resi effettivamente visibili. Duplicati Duplicati per copia In tante circostanze è necessario riutilizzare alcuni oggetti grafici. In questi casi si possono duplicare gli oggetti in una delle seguenti modalità: Copia Riferimento Quando si duplica un oggetto per copia, esso viene clonato: vengono inseriti un duplicato per ogni oggetto originale. Duplicati per copia Duplicati per riferimento Le copie vivono quindi di vita propria: ogni modifica sul duplicato non influisce sull'oggetto originale e su altre copie. Quando si duplica un oggetto per riferimento, solo un "puntatore" all'oggetto base viene memorizzato.
Duplicati per riferimento Duplicati per riferimento I duplicati non possono essere modificati, ed ogni modifica effettuata all'oggeto base, si riflette su tutte le sue copie. Molti programmi consentono però di applicare alcune trasformazioni agli oggetti duplicati per riferimento.