|
762
|
1
|
|
756
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
|
3 "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
4 <html>
|
|
762
|
5 <head>
|
|
|
6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
|
7 <title>jQuery SVG Basics</title>
|
|
775
|
8
|
|
|
9 <style type="text/css">
|
|
|
10
|
|
756
|
11 @import "jquery.svg.css";
|
|
|
12
|
|
762
|
13 #svgbasics { position: absolute; border: 1px solid blue; }
|
|
775
|
14
|
|
762
|
15 #img img {width: 400px; }
|
|
|
16
|
|
775
|
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
|
|
756
|
26 $(function() {
|
|
762
|
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});
|
|
756
|
33 $('button').click(drawShape);
|
|
775
|
34 $resDiv = $('div#res');
|
|
|
35 console.log($resDiv);
|
|
756
|
36 });
|
|
|
37
|
|
|
38 function drawInitial(svg) {
|
|
775
|
39 // svg.configure({viewBox: '0 0 400 300' }, true);
|
|
|
40 svg.configure({transform: 'scale(0.5)' }, true);
|
|
756
|
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);
|
|
775
|
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
|
|
756
|
52 }
|
|
|
53
|
|
|
54 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
|
|
|
55
|
|
775
|
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
|
|
756
|
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 }
|
|
775
|
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);
|
|
762
|
121 }
|
|
|
122
|
|
756
|
123 }
|
|
|
124
|
|
|
125 function random(range) {
|
|
|
126 return Math.floor(Math.random() * range);
|
|
|
127 }
|
|
|
128 </script>
|
|
762
|
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>
|
|
775
|
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>
|
|
762
|
149 <button id="clear">Clear</button>
|
|
|
150 </p>
|
|
775
|
151 <div id="res"/>
|
|
762
|
152 </body>
|
|
756
|
153 </html>
|
