Esempi di SVG e jquery

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Esempi di SVG e jquery"

Angelina Lamberti
6 anni fa
Visualizzazioni

jquery by Emiliano Castellina is licensed under a Creative Commons

1 Esempi di SVG e jquery Emiliano Castellina Dipartimento di Automatica e Informatica Politecnico di Torino Introduzione a jquery by Emiliano Castellina is licensed under a Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Unported License.

Plugin per jquery jquery SVG http://keith-wood.name/svg.

libreria jquery Include diversi file javascript: jquery.svg.js jquery.

2 Plugin per jquery jquery SVG Permette di creare, caricare e modificare oggetti svg tramite la libreria jquery Include diversi file javascript: jquery.svg.js jquery.svggraph.js jquery.svgdom.js jquery.svganim.js. Non tutti i costrutti SVG sono supportati 2

3 Esempio 1: disegno di un Gatto <script type="text/javascript" src="lib/jquery min.js"></ script>! <script type="text/javascript" src="lib/jquery.svg.js"></script>! <script type="text/javascript">! $(document).ready(! )!function(){!!/*importante il div che dovrà contenere!! * l'immagine svg deve avere dimensioni specificate!! * tramite css! */!!$("#divgatto").height(800).width(600);!!!$("#divgatto").svg({//il div diventa contenitore svg!!!onload: disegnagatto! //al caricamento del documento richiama la funzione disegnagatto!!!});!!}! 3

4 Esempio 1: disegno di un Gatto function disegnagatto(svg){! //testa //<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>;! svg.circle(70, 95, 50, {fill: 'none', stroke: 'black'});! //occhi//<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>! svg.circle(55, 80, 5, {fill: '#339933', stroke: 'black'});! //<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>! svg.circle(85, 80, 5, {fill: '#339933', stroke: 'black'});! var g = svg.group(null,'baffi');! //<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>! //<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>! svg.line(g, 75, 95, 135, 85,{stroke:'black'});! svg.line(g, 75, 95, 135, 105,{stroke:'black'});! svg.use('#baffi', {transform:'scale(-1 1) translate(-140 0)'});! //orecchie //<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" />! svg.polyline([[108,62],[90,10],[70,45],[50], [10], [32], [62]],{stroke: 'black', fill: 'none'})! // <polyline points="35 110, , , 105, 110" style="stroke: black; fill: none;" />! svg.polyline([[35,110],[45,120],[95,120],[105],[110]],{stroke: 'black', fill: 'none'})! //naso//<path d="m L A " style="stroke: black; fill: #ffcccc"/>! var path = svg.createpath();! svg.path(path.move(75,90).line(65,90).arc(5,10,0,false,false,75,90).close(),{stroke: 'black', fill: '#ffcccc'});! } 4

5 Esempio2: caricamento file SVG $(document).ready(function(){! $("#divgatto").height(800)!!!.width(600);! $("#divgatto").svg({! loadurl: 'gatto.svg'! //url file svg!!!!!!});!!!!!}!!!!) 5

6 Esempio3: eventi del mouse //cambia il colore della testa al passaggio del mouse! function eventigatto(){! $("#testa")!.mouseover(! function(){!!$(this).css("fill","red");!!! })!.mouseout(! function(){!!$(this).css("fill", "yellow");!!!!!})!!!!} 6

7 Esempio4: semplice animazione <script type="text/javascript" src="lib/jquery.svganim.js"></ script>! <script type="text/javascript">! $(document).ready(function(){! $("#divgatto").height(800).width(600);! $("#divgatto").svg({loadurl: 'gatto.svg', onload:eventigatto});! }! )!!!!! function eventigatto(){! $("#testa").click(function(){! $(this).animate({svgr:200}, 2000,!!!function(){!!!!$(this).animate({svgR:50},1000)!!!!});! })! }! </script> 7

8 Esempio 5: grafici! Creare un grafico a barre, che permetta di confrontare:! Il numero totale di abitanti! Il numero di donne! Il numero di uomini! Delle seguenti regioni! Piemonte! Sicilia! Lazio! 8

9 Esempio 5: grafici $(document).ready(function(){! $("#divgrafico").height(800).width(1000);! $("#divgrafico").svg({onload: disegnagrafico}); })! var chartarea = [0.2, 0.1, 0.95, 0.9];! var legendarea = [0.005, 0.1, 0.125, 0.5];! var fills = ['lightblue', 'pink', 'lightgreen'];! var charttype = 'column';! function disegnagrafico(svg){! svg.graph.nodraw().title('statistiche Demografiche')!.addSeries('Piemonte', [ , , ], 'lightblue', 'blue', 3)!.addSeries('Sicilia', [ , , ], 'pink', 'red', 3)!.addSeries('Lazio', [ , , ], 'lightgreen', 'green', 3)!.format('ivory', 'gray').gridlines({stroke: 'gray', strokedasharray: '2,2'}, 'gray');!! svg.graph.nodraw().xaxis.title('numero Abitanti').scale(0, 3).ticks(1, 0)!.labels(['Totale', 'Donne', 'Uomini']).end().yAxis.scale(0, )!.ticks(500000, ).end().legend.settings({fill: 'lightgoldenrodyellow',stroke: 'gray').show(1)!.area(legendarea).end()!.series(0).format(fills[0]).end()!.series(1).format(fills[1]).end()!.series(2).format(fills[2]).end()!.area(chartarea).type(charttype, {explode: 2,explodeDist: 10}).redraw();}! 9

Esempio6: viewbox e image Data una mappa dell'italia in SVG Ogni regione ha class="regione" Id="nome della regione" Al click su una regione: L'immagine deve essere centrata e

10 Esempio6: viewbox e image Data una mappa dell'italia in SVG Ogni regione ha class="regione" Id="nome della regione" Al click su una regione: L'immagine deve essere centrata e zoomata sulla regione Al centro della regione deve essere inclusa la bandiera della religione Al doppio click su una regione, deve essere visualizzata nuovamente tutta la la cartina 10

11 Esempio6: viewbox e image $(document).ready(function(){! var svg = $("#mappa2").svg({loadurl: 'italia.svg',onload: zoomregione });!!!!!! function zoomregione(svg){! $('.regione').click(function(e){! var bbox=this.getbbox();! if($(this.id+'_img').length==0){! var img=svg.image(bbox.x+bbox.width/2-25, bbox.y+bbox.height/2-25, 50, 50, 'img/'+this.id+'.jpg');!!$(img).attr('id',this.id+'_img');}! //cambia viewbox! $(svg.root()).attr("viewbox", (bbox.x)+","+(bbox.y)+","+bbox.width +","+bbox.height);! }).dblclick(function(e){! //ripristina viewbox! $(svg.root()).attr("viewbox", "0,0,1080,1500");! })! }! }) 11

12 Esempio 7: orologio Dato un file svg contente un orologio e avente la lancetta dei secondi con id="secondi" Ruotare di 6 gradi la lancetta dei secondi ogni secondo 12

13 Esempio 7: orologio $(document).ready(function(){! $("#mappa2").svg({loadurl: 'Qtz_watch.svg', onload: creaorologio });!!!!!! function creaorologio(svg){! aggiornaora();!!}! })! secondi=0;! function aggiornaora(){! var centro=$("#centro");! var x=centro.attr('cx');! var y=centro.attr('cy');! secondi++;! $("#spansecondi").html(secondi);! if(secondi>59){secondi=0;}! $("#secondi").attr('transform','rotate('+(secondi*6)+','+x+','+y +')' );! t=settimeout(aggiornaora,1000);! } 13

Documenti analoghi

La codifica delle immagini

La codifica delle immagini Analogamente possiamo codificare le immagini a colori. In questo caso si tratta di individuare un certo numero di sfumature, gradazioni di colore differenti e di codificare ognuna mediante un'opportuna