In rete

In onore di π

Versione 20120722

Versione arricchita dalla trasformazione da coordinate relative ad assolute e viceversa

Annotazioni luglio 2012... https://www.google.com/chrome http://www.apple.com/it/safari/download/ http://www.mozilla.org/it/firefox/fx/

Purtroppo Internet Explorer 9, dando a questo file l'estensione .html in luogo di quella prevista, .xhtml, si comporta in modo diverso [ poco ma diverso da Chrome ( https://www.google.com/chrome ), Safari ( http://www.apple.com/it/safari/download/ ), Firefox ( http://www.mozilla.org/it/firefox/fx/ ) etc...]
Se una figura esce dai confini dell'immagine, IE9 lascia che straripi il che è scomodo perché certe esondazioni possono essere volute ma naturalmente senza che nascondano le altre parti del documento... Con IE8, o IE7 o IE6 etc... meglio non provarci ! Sarebbe tempo perso...

Esempi di pilotaggio del path della grafica SVG ( uso il $ come separatore )

In questi esempi scrivo le direttive del path ( l'attributo "d" ) esattamente come andrebbero scritte normalmente ma interpongo, tra un dato e l'altro, il carattere separatore $.

Il vantaggio di usare questa libreria sta nel fatto che, al posto di specificare un semplice dato numerico dove questo è richiesto, è ammesso usare una funzione matematica Javascript che serve a calcolare quel dato numerico. Per esempio, invece di scrivere la radice quadrata di ... 200 ossia 14.142 si può scrivere sqrt(200).

Dunque è ammesso scrivere addirittura una intera e complicata espressione matematica usando le funzioni trigonometriche, quali sin( ) o cos( ) o tg( ) etc. o fare elevamenti a potenza usando la funzione pow( ) per cui la radice cubica di 27 si può calcolare scrivendo pow(27,1/3) e così via...

Personalmente consiglio di usare non coordinate assolute, indicate da caratteri maiuscoli, ma coordinate relative, indicate con caratteri minuscoli.
Le coordinate assolute sono molto pratiche quando si disegna ossia si traduce in spostamenti il disegno fatto a mano su carta a quadretti o , meglio su carta millimetrata.
Le coordinate relative, ossia lo spostamento della matita che disegna dal punto dove si trovava prima, sono meno facili da specificare ma quando abbiamo un path relativo, basta traslare il solo punto di inizio del disegno e si ottiene la traslazione dell'intera curva non deformata...
Per facilitare il passaggio tra queste due modalità di definizione delle linee, ho realizzato qui ed applico due funzioni che convertono da una modalità all'altra.

Piccola raccolta di esempi

Per facilitare la comprensione di come va gestita la libreria ausiliaria javascript contenuta in questo documento, offro la possibilità di applicare vari esempi. Basta quindi solo scegliere l'esempio preferito ed applicarlo...
Nulla vieta però di scrivere di getto un proprio path e di sperimentarlo, oppure di apportare qualche modifica all'esempio proposto...

 

Per verificare che si ottiene lo stesso effetto:

Varie forme elementari Riquadro ed altre forme...
Ecco i dati:
...
In forma assoluta
M 100$ 200$A 400$ 400$ 0$ 0$ 0$ 800$ 500$L 800$ 450$L 600 $450 $Z
In forma relativa
m 100$ 200$l 300$ 50$s 100$ -300$ 300$ 0$ 100$ 550$ 0$ 200$

Nota: Nel disegno ho lasciato anche vari altri esempi che forse confondono un po' ma servono a farsi una idea delle possibilità della grafica SVG
Attenzione: il disegno è largo 960 unità ossia l'asse delle ascisse va da 0 alla estrema sinistra a 960 all'estrema destra, ed alto 700 ossia l'asse delle ordinate va da 0 in alto a 720 in basso. Per comodità ora spiego i tipi di movimenti effettuabili con le direttive del path.

Direttive di pilotaggio del comando path

Per approfondire le informazioni qui riportate guardare in: http://www.w3.org/TR/SVG/paths.html.

A titolo di promemoria ricordo qui come si fa, usando Javascript, a modificare il disegno prodotto dalla marca path.

Innanzi tutto la si rende identificabile dandole una identità unica nel documento ossia attribuendo all'attributo id un nome gradito ossia, per esempio, come ho fatto qui, scrivendo:

<path id="variodisegno" ...

a questo punto basta selezionare proprio quell'elemento assegnandolo ad una variabile javascript, per esempio di nome mioggetto. Dunque scrivo:

mioggetto=document.getElementById("variodisegno");

A questo punto devo assegnare all'attributo d la stringa che rappresenta il disegno. Supponiamo che abbia creato la stringa miodisegno in questo modo:

miodisegno="M 30 50 C 100 500 950 -200 930 150 z";

Per attribuire questa variabile all'oggetto dotato dell'attributo d mi basta eseguire questa istruzione:

mioggetto.setAttribute("d",miodisegno);

e se non ho commesso sviste... otterrò il disegno voluto...

Elenco delle direttive

A,aArco
ellittico

a rx ry rot bl ds xf yf

  • La curva arco ellittico [ A oppure a ] ha uno pseudo punto di controllo [ rx ry ] invariante rispetto al movimento assoluto o relativo, e tre parametri [ rot bl ds ] oltre al punto finale [ xf yf ]. Ricordo che il verso positivo delle ascisse è verso destra mentre il verso positivo delle ordinate è verso il basso.
  • L'arco viene tracciato dal punto iniziale che è il punto a cui è arrivata la curva, al punto finale che va specificato come ultimo dato [ xf yf ].
  • Se il punto finale [ xf yf ], in base agli altri parametri fosse irraggiungibile, l'intero arco viene cambiato di scala in modo che termini esattamente nel punto finale indicato.
  • Lo pseudo punto di controllo è la coppia di semiassi dell'ellisse e, se sono uguali, l'ellisse è un cerchio [ rx ry ].
  • Il primo dei tre parametri è l'angolo di rotazione degli assi dell'ellisse espresso in gradi ( sono ammessi anche valori negativi ) [ rot ].
  • Il secondo dei tre parametri [ bl ] specifica se l'arco deve essere breve o lungo dato che ci sono due modi di muoversi sull'ellisse ossia facendo un tragitto breve=0 oppure un tragitto lungo=1.
  • Il terzo dei parametri [ ds ] indica se chi va direttamente dal punto di partenza al punto di arrivo, vede l'arco alla sua destra=0 oppure alla sua sinistra=1.
  • Il punto finale [ xf yf ] è dato in modo assoluto se si è usata la maiuscola [A] oppure in modo relativo rispetto al punto di partenza se si è usata la minuscola [a]
C,cCubica

c xa ya xb yb xf yf

  • La curva cubica, originariamente proposta dall'ingegnere-matematico francese Pierre Bézier (1910-1999) http://it.wikipedia.org/wiki/Pierre_B%C3%A9zier richiede due punti di controllo.
  • Il primo punto di controllo [ xa ya ] unito al punto iniziale serve a specificare la direzione iniziale del pennino ( o della particella se immaginiamo che la curva rappresenti la traiettoria piana di una particella ).
  • Il secondo punto di controllo [ xb yb ] unito al punto finale serve a specificare la direzione finale del pennino ( o della particella se immaginiamo che la curva rappresenti la traiettoria piana di una particella ).
  • Il punto finale è ovviamente [ xf yf ] ed i tre punti vanno indicati in coordinate assolute quando si usa C o in coordinate relative al punto iniziale quando si usa c.
H,hHorizzon-
talmente

h xf

  • Lo spostamento in orizzontale rischiede solo l'indicazione della nuova ascissa [ xf ] specificata in modo assolute usando la H maiuscola o in modo relativo specificando la h minuscola.
L,lLinea

l xf yf

  • Lo spostamento rettilineo rischiede solo l'indicazione della seconda estremità del segmento [ xf yf ] specificato in modo assoluto usando la L maiuscola o in modo relativo specificando la l minuscola.
M,mMuovi
senza scrivere

m xf yf

  • Lo spostamento senza scrittura rischiede solo l'indicazione della nuova posizione del pennino [ xf yf ] specificato in modo assoluto usando la M maiuscola o in modo relativo specificando la m minuscola.
Q,qQuadrica

q xa ya xf yf

  • Disegna una curva di Bézier quadratica basata su un unico punto di controllo [ xa ya ]
S,sScorrevole
( cubica )

s xb yb xf yf

  • Disegna una curva di Bézier cubica deducendo il primo punto di controllo posizionato in modo che non ci sia nessuna discontinuità della tangente della curva. Dunque [ xb yb ] corrisponde al secondo punto di controllo specificato usando il carattere C o c. Se lo spostamento precedente non era una curva di Bézier, assume che il primo punto di controllo ( in realtà non noto ) coincida con il punto iniziale.
T,tTangente
( quadrica )

t xf yf

  • Disegna una curva di Bézier quadratica deducendo il primo punto di controllo posizionato in modo che non ci sia nessuna discontinuità della tangente della curva. Se lo spostamento precedente non era una curva di Bézier, assume che il primo punto di controllo ( in realtà non noto ) coincida con il punto iniziale.
V,vVertical-
mente

v yf

  • Lo spostamento in verticale rischiede solo l'indicazione della nuova ordinata [ yf ] specificata in modo assoluto usando la V maiuscola o in modo relativo specificando la v minuscola. Tenere presente che l'asse delle ordinate è diretto verso il basso.
Z,zZero
sposta-
mento

z

  • Chiude la curva congiungendo il punto raggiunto con il punto iniziale.

La libreria usata qui per gestire il path

Riporto qui, per comodità ed evitare di doverle cercare nel sorgente, le funzioni più significative: 

Per avere altre info su come funziona SVG guardare questi corsi introduttivi:













Esempio di uso di immagine di sfondo 
su cui disegno grafica vettoriale
(aprile 2012)






   
  Un foglio a quadretti di dimensioni circa 4*3

    Ecco il foglio a quadretti ( ma bisogna attivare Javascript)














Cliccando sulle figure, qui compare la didascalia



In questo file, per renderlo monolitico,
 è nascosta l'immagine del foglio di carta a quadretti,
ovviamente sostituibile con qualsiasi altra immagine... Si tratta di una immagine codificata
in base64 e dunque molto ingombrante... usa serie interminabili
di caratteri alfanumerici oltre che i caratteri + e /.     
Avrei potuto ovviamente mettere questa caterva di caratteri direttamente nella
regione del documento delimitata dalla marca <svg> ma questo
avrebbe compromesso la leggibilità del sorgente. Pertanto ho realizzato
una serie di brevi funzioni Javascript che attivo quando carico il documento
e che hanno il compito di trasferire l'immagine nascosta ( alla fine del documento,
dove la caterva di caratteri in base64 non danno noia) nel punto dove
voglio visualizzarla veramente.

Per capire meglio guardare come è fatto il
sorgente di questo documento premendo il tasto destro del mouse e selezionando 
l'opzione Visualizza Sorgente Pagina.

Ricordo che per vedere i dettagli ossia ingrandire o rimpicciolire l'immagine,
basta premere assieme sulla tastiera i tasti [Ctrl][+] per ingrandire e [Ctrl][-] 
per rimpicciolire.




Un altro esempio applicativo di SVG

Anche questo, guardando il sorgente di questo documento, è un esempio utile
per imparare ad usare la grafica SVG.




   Varie forme elementari
   Riquadro ed altro...

   
   
   
   

   
 
   
   
   
   
   
   
  
  
  
  



Notare che, oltre all'esagono rosso, ce ne è uno quasi invisibile
che però è anche lui cliccabile. L'uso di immagini trasparenti
ossia con opacity quasi o totalmente nulla è utile per
aggiungere zone di cliccabilità a immagini sottostanti. Per
esempio in questo modo è possibile creare zone di
cliccabilità attorno ai volti di un gruppo di individui
di una foto di gruppo in modo che passando il puntatore e cliccando su un volto
compaia il nome dell'individuo selezionato.









Giampaolo Bottoni 
gpbottoni@gmail.com




http://www.alumni.polimi.it/it/Wall
( ing. nucleare 1972 )