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>