Mercurial > hg > digilib-old
comparison client/src/main/webapp/jquery/svg/svgBasics.html @ 892:ba1eb2d821a2 mvnify
rearrange sources to maven directory standard
author | robcast |
---|---|
date | Tue, 19 Apr 2011 18:44:25 +0200 |
parents | client/digitallibrary/jquery/svg/svgBasics.html@65cdf970934d |
children |
comparison
equal
deleted
inserted
replaced
891:6584af320296 | 892:ba1eb2d821a2 |
---|---|
1 | |
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" | |
3 "http://www.w3.org/TR/html4/strict.dtd"> | |
4 <html> | |
5 <head> | |
6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
7 <title>jQuery SVG Basics</title> | |
8 | |
9 <style type="text/css"> | |
10 | |
11 @import "jquery.svg.css"; | |
12 | |
13 #svgbasics { position: absolute; border: 1px solid blue; } | |
14 | |
15 #img img {width: 400px; } | |
16 | |
17 </style> | |
18 | |
19 <script type="text/javascript" src="../dlGeometry.js"></script> | |
20 <script type="text/javascript" src="../jquery-1.4.4.js"></script> | |
21 <script type="text/javascript" src="jquery.svg.js"></script> | |
22 <script type="text/javascript"> | |
23 | |
24 var $resDiv; | |
25 | |
26 $(function() { | |
27 var geom = dlGeometry(); | |
28 var svg = $('#svgbasics'); | |
29 var $div = $('#img img'); | |
30 var divrect = geom.rectangle($div); | |
31 divrect.addPosition({x: -1, y: -1}).adjustDiv(svg); | |
32 svg.svg({onLoad: drawInitial}); | |
33 $('button').click(drawShape); | |
34 $resDiv = $('div#res'); | |
35 console.log($resDiv); | |
36 }); | |
37 | |
38 function drawInitial(svg) { | |
39 // svg.configure({viewBox: '0 0 400 300' }, true); | |
40 svg.configure({transform: 'scale(0.5)' }, true); | |
41 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3}); | |
42 var g = svg.group({stroke: 'black', 'stroke-width': 2}); | |
43 svg.line(g, 15, 75, 135, 75); | |
44 svg.line(g, 75, 15, 75, 135); | |
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 | |
52 } | |
53 | |
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 | |
64 | |
65 function drawShape() { | |
66 var shape = this.id; | |
67 var svg = $('#svgbasics').svg('get'); | |
68 if (shape == 'rect') { | |
69 svg.rect(random(300), random(200), random(100) + 100, random(100) + 100, | |
70 {fill: colours[random(9)], stroke: colours[random(9)], | |
71 'stroke-width': random(5) + 1}); | |
72 } | |
73 else if (shape == 'line') { | |
74 svg.line(random(400), random(300), random(400), random(300), | |
75 {stroke: colours[random(9)], 'stroke-width': random(5) + 1}); | |
76 } | |
77 else if (shape == 'circle') { | |
78 svg.circle(random(300) + 50, random(200) + 50, random(80) + 20, | |
79 {fill: colours[random(9)], stroke: colours[random(9)], | |
80 'stroke-width': random(5) + 1}); | |
81 } | |
82 else if (shape == 'ellipse') { | |
83 svg.ellipse(random(300) + 50, random(200) + 50, random(80) + 20, random(80) + 20, | |
84 {fill: colours[random(9)], stroke: colours[random(9)], | |
85 'stroke-width': random(5) + 1}); | |
86 } | |
87 else if (shape == 'clear') { | |
88 svg.clear(); | |
89 } | |
90 else if (shape == 'x+') { | |
91 x+=10; | |
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); | |
121 } | |
122 | |
123 } | |
124 | |
125 function random(range) { | |
126 return Math.floor(Math.random() * range); | |
127 } | |
128 </script> | |
129 </head> | |
130 <body> | |
131 <h1>jQuery SVG</h1> | |
132 <div id="img"> | |
133 <img src="peterskuppel.jpg" /> | |
134 </div> | |
135 <div id="svgbasics"></div> | |
136 <p> | |
137 <button id="rect">Add rectangle</button> | |
138 <button id="line">Add line</button> | |
139 <button id="circle">Add circle</button> | |
140 <button id="ellipse">Add ellipse</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> | |
149 <button id="clear">Clear</button> | |
150 </p> | |
151 <div id="res"/> | |
152 </body> | |
153 </html> |