Mercurial > hg > digilib-old

comparison client/src/main/webapp/jquery/svg/svgBasics.html @ 892:ba1eb2d821a2 mvnify

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>