Mercurial > hg > digilib-old

comparison client/digitallibrary/jquery/svg/svgBasics.html @ 775:65cdf970934d jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
minor precisations
author hertzhaft
date Fri, 11 Feb 2011 23:11:04 +0100
parents 6d7c51e4724b
children
comparison
equal deleted inserted replaced
770:6d7c51e4724b 775:65cdf970934d
3 "http://www.w3.org/TR/html4/strict.dtd"> 3 "http://www.w3.org/TR/html4/strict.dtd">
4 <html> 4 <html>
5 <head> 5 <head>
6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
7 <title>jQuery SVG Basics</title> 7 <title>jQuery SVG Basics</title>
8 <style type="text/css"> 8
9 <style type="text/css">
10
9 @import "jquery.svg.css"; 11 @import "jquery.svg.css";
10 12
11 #svgbasics { position: absolute; border: 1px solid blue; } 13 #svgbasics { position: absolute; border: 1px solid blue; }
14
12 #img img {width: 400px; } 15 #img img {width: 400px; }
13 16
14 </style> 17 </style>
15 <script type="text/javascript" src="../dlGeometry.js"></script> 18
16 <script type="text/javascript" src="../jquery-1.4.4.js"></script> 19 <script type="text/javascript" src="../dlGeometry.js"></script>
17 <script type="text/javascript" src="jquery.svg.js"></script> 20 <script type="text/javascript" src="../jquery-1.4.4.js"></script>
18 <script type="text/javascript"> 21 <script type="text/javascript" src="jquery.svg.js"></script>
22 <script type="text/javascript">
23
24 var $resDiv;
25
19 $(function() { 26 $(function() {
20 var geom = dlGeometry(); 27 var geom = dlGeometry();
21 var svg = $('#svgbasics'); 28 var svg = $('#svgbasics');
22 var $div = $('#img img'); 29 var $div = $('#img img');
23 var divrect = geom.rectangle($div); 30 var divrect = geom.rectangle($div);
24 divrect.addPosition({x: -1, y: -1}).adjustDiv(svg); 31 divrect.addPosition({x: -1, y: -1}).adjustDiv(svg);
25 svg.svg({onLoad: drawInitial}); 32 svg.svg({onLoad: drawInitial});
26 $('button').click(drawShape); 33 $('button').click(drawShape);
34 $resDiv = $('div#res');
35 console.log($resDiv);
27 }); 36 });
28 37
29 function drawInitial(svg) { 38 function drawInitial(svg) {
39 // svg.configure({viewBox: '0 0 400 300' }, true);
40 svg.configure({transform: 'scale(0.5)' }, true);
30 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3}); 41 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});
31 var g = svg.group({stroke: 'black', 'stroke-width': 2}); 42 var g = svg.group({stroke: 'black', 'stroke-width': 2});
32 svg.line(g, 15, 75, 135, 75); 43 svg.line(g, 15, 75, 135, 75);
33 svg.line(g, 75, 15, 75, 135); 44 svg.line(g, 75, 15, 75, 135);
34 svg.configure({viewPort: '0 0 100 100', overflow: 'visible' }, false); 45 var g = svg.group({stroke: 'yellow', 'stroke-width': 4});
46 svg.line(g, 0, 0, 400, 0);
47 svg.line(g, 0, 0, 0, 300);
48 svg.line(g, 400, 0, 400, 300);
49 svg.line(g, 400, 300, 0, 300);
50 // svg.configure({viewPort: '0 0 100 100', overflow: 'visible' }, false);
51
35 } 52 }
36 53
37 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black']; 54 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
55
56 var x=0,y=0,w=400,h=300;
57
58 function setViewBox(svg) {
59 var s = [x,y,w,h].join(' ');
60 svg.configure({viewBox: s }, true);
61 $resDiv.text(s);
62 }
63
38 64
39 function drawShape() { 65 function drawShape() {
40 var shape = this.id; 66 var shape = this.id;
41 var svg = $('#svgbasics').svg('get'); 67 var svg = $('#svgbasics').svg('get');
42 if (shape == 'rect') { 68 if (shape == 'rect') {
59 'stroke-width': random(5) + 1}); 85 'stroke-width': random(5) + 1});
60 } 86 }
61 else if (shape == 'clear') { 87 else if (shape == 'clear') {
62 svg.clear(); 88 svg.clear();
63 } 89 }
64 else if (shape == 'zoom') { 90 else if (shape == 'x+') {
65 svg.configure({viewBox: '0 0 800 1000'}, true); 91 x+=10;
66 //svg.animate({svgViewBox: '0, 0, 100, 100'}, 2000); 92 setViewBox(svg);
93 }
94 else if (shape == 'x-') {
95 x-=10;
96 setViewBox(svg);
97 }
98 else if (shape == 'y+') {
99 y+=10;
100 setViewBox(svg);
101 }
102 else if (shape == 'y-') {
103 y-=10;
104 setViewBox(svg);
105 }
106 else if (shape == 'w+') {
107 w+=10;
108 setViewBox(svg);
109 }
110 else if (shape == 'w-') {
111 w-=10;
112 setViewBox(svg);
113 }
114 else if (shape == 'h+') {
115 h+=10;
116 setViewBox(svg);
117 }
118 else if (shape == 'h-') {
119 h-=10;
120 setViewBox(svg);
67 } 121 }
68 122
69 } 123 }
70 124
71 function random(range) { 125 function random(range) {
82 <p> 136 <p>
83 <button id="rect">Add rectangle</button> 137 <button id="rect">Add rectangle</button>
84 <button id="line">Add line</button> 138 <button id="line">Add line</button>
85 <button id="circle">Add circle</button> 139 <button id="circle">Add circle</button>
86 <button id="ellipse">Add ellipse</button> 140 <button id="ellipse">Add ellipse</button>
87 <button id="zoom">Zoom</button> 141 <button id="x+">x+</button>
142 <button id="x-">x-</button>
143 <button id="y+">y+</button>
144 <button id="y-">y-</button>
145 <button id="w+">w+</button>
146 <button id="w-">w-</button>
147 <button id="h+">h+</button>
148 <button id="h-">h-</button>
88 <button id="clear">Clear</button> 149 <button id="clear">Clear</button>
89 </p> 150 </p>
151 <div id="res"/>
90 </body> 152 </body>
91 </html> 153 </html>