1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
|
<html>
<head>
<title>dojox.gfx: Lion</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<!--
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
<script type="text/javascript" src="Silverlight.js"></script>
-->
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!--
<script type="text/javascript" src="../_base.js"></script>
<script type="text/javascript" src="../shape.js"></script>
<script type="text/javascript" src="../path.js"></script>
<script type="text/javascript" src="../arc.js"></script>
-->
<!--<script type="text/javascript" src="../vml.js"></script>-->
<!--<script type="text/javascript" src="../svg.js"></script>-->
<!--<script type="text/javascript" src="../canvas.js"></script>-->
<!--<script type="text/javascript" src="../silverlight.js"></script>-->
<script type="text/javascript">
dojo.require("dijit.form.Slider");
dojo.require("dojo.parser"); // scan page for widgets
dojo.require("dojox.gfx");
var rotation = 0, scaling = 1;
var surface, g, m = dojox.gfx.matrix;
var initial_matrix = m.normalize([m.rotateg(10), m.translate(300, 100)]);
var updateMatrix = function(){
if(g){ g.setTransform([m.rotategAt(rotation, 350, 350), m.scaleAt(scaling, 350, 350), initial_matrix]); }
};
var rotatingEvent = function(value){
rotation = value;
dojo.byId("rotationValue").innerHTML = rotation;
updateMatrix();
};
var scalingEvent = function(value){
scaling = Math.exp(Math.LN10 * (value - 1));
dojo.byId("scaleValue").innerHTML = scaling.toFixed(3);
updateMatrix();
};
makeShapes = function(){
surface = dojox.gfx.createSurface(dojo.byId("gfx_holder"), 700, 700);
surface.createRect({x: 0, y: 0, width: 700, height: 700}).setFill("#eee");
g = surface.createGroup().setTransform(initial_matrix);
g.createPolyline([69,18,82,8,99,3,118,5,135,12,149,21,156,13,165,9,177,13,183,28,180,50,164,91,155,107,154,114,151,121,141,127,139,136,155,206,157,251,126,342,133,357,128,376,83,376,75,368,67,350,61,350,53,369,4,369,2,361,5,354,12,342,16,321,4,257,4,244,7,218,9,179,26,127,43,93,32,77,30,70,24,67,16,49,17,35,18,23,30,12,40,7,53,7,62,12]).setFill("#f2cc99");
g.createPolyline([142,79,136,74,138,82,133,78,133,84,127,78,128,85,124,80,125,87,119,82,119,90,125,99,125,96,128,100,128,94,131,98,132,93,135,97,136,93,138,97,139,94,141,98,143,94,144,85]).setFill("#e5b27f");
g.createPolyline([127,101,132,100,137,99,144,101,143,105,135,110]).setFill("#eb8080");
g.createPolyline([178,229,157,248,139,296,126,349,137,356,158,357,183,342,212,332,235,288,235,261,228,252,212,250,188,251]).setFill("#f2cc99");
var c = new dojo.Color("#9c826b");
g.createPolyline([56,229,48,241,48,250,57,281,63,325,71,338,81,315,76,321,79,311,83,301,75,308,80,298,73,303,76,296,71,298,74,292,69,293,74,284,78,278,71,278,74,274,68,273,70,268,66,267,68,261,60,266,62,259,65,253,57,258,59,251,55,254,55,248,60,237,54,240,58,234,54,236]).setFill(c);
g.createPolyline([74,363,79,368,81,368,85,362,89,363,92,370,96,373,101,372,108,361,110,371,113,373,116,371,120,358,122,363,123,371,126,371,129,367,132,357,135,361,130,376,127,377,94,378,84,376,76,371]).setFill(c);
g.createPolyline([212,250,219,251,228,258,236,270,235,287,225,304,205,332,177,343,171,352,158,357,166,352,168,346,168,339,165,333,155,327,155,323,161,320,165,316,169,316,167,312,171,313,168,308,173,309,170,306,177,306,175,308,177,311,174,311,176,316,171,315,174,319,168,320,168,323,175,327,179,332,183,326,184,332,189,323,190,328,194,320,194,325,199,316,201,320,204,313,206,316,208,310,211,305,219,298,226,288,229,279,228,266,224,259,217,253]).setFill(c);
g.createPolyline([151,205,151,238,149,252,141,268,128,282,121,301,130,300,126,313,118,324,116,337,120,346,133,352,133,340,137,333,145,329,156,327,153,319,153,291,157,271,170,259,178,277,193,250,174,216]).setFill(c);
g.createPolyline([78,127,90,142,95,155,108,164,125,167,139,175,150,206,152,191,141,140,121,148,100,136]).setFill(c);
g.createPolyline([21,58,35,63,38,68,32,69,42,74,40,79,47,80,54,83,45,94,34,81,32,73,24,66]).setFill(c);
g.createPolyline([71,34,67,34,66,27,59,24,54,17,48,17,39,22,30,26,28,31,31,39,38,46,29,45,36,54,41,61,41,70,50,69,54,71,55,58,67,52,76,43,76,39,68,44]).setFill(c);
g.createPolyline([139,74,141,83,143,89,144,104,148,104,155,106,154,86,157,77,155,72,150,77,144,77]).setFill(c);
g.createPolyline([105,44,102,53,108,58,111,62,112,55]).setFill(c);
g.createPolyline([141,48,141,54,144,58,139,62,137,66,136,59,137,52]).setFill(c);
g.createPolyline([98,135,104,130,105,134,108,132,108,135,112,134,113,137,116,136,116,139,119,139,124,141,128,140,133,138,140,133,139,140,126,146,104,144]).setFill(c);
g.createPolyline([97,116,103,119,103,116,111,118,116,117,122,114,127,107,135,111,142,107,141,114,145,118,149,121,145,125,140,124,127,121,113,125,100,124]).setFill(c);
g.createPolyline([147,33,152,35,157,34,153,31,160,31,156,28,161,28,159,24,163,25,163,21,165,22,170,23,167,17,172,21,174,18,175,23,176,22,177,28,177,33,174,37,176,39,174,44,171,49,168,53,164,57,159,68,156,70,154,60,150,51,146,43,144,35]).setFill(c);
g.createPolyline([85,72,89,74,93,75,100,76,105,75,102,79,94,79,88,76]).setFill(c);
g.createPolyline([86,214,79,221,76,232,82,225,78,239,82,234,78,245,81,243,79,255,84,250,84,267,87,254,90,271,90,257,95,271,93,256,95,249,92,252,93,243,89,253,89,241,86,250,87,236,83,245,87,231,82,231,90,219,84,221]).setFill(c);
c = new dojo.Color("#ffcc7f");
g.createPolyline([93,68,96,72,100,73,106,72,108,66,105,63,100,62]).setFill(c);
g.createPolyline([144,64,142,68,142,73,146,74,150,73,154,64,149,62]).setFill(c);
c = new dojo.Color("#9c826b");
g.createPolyline([57,91,42,111,52,105,41,117,53,112,46,120,53,116,50,124,57,119,55,127,61,122,60,130,67,126,66,134,71,129,72,136,77,130,76,137,80,133,82,138,86,135,96,135,94,129,86,124,83,117,77,123,79,117,73,120,75,112,68,116,71,111,65,114,69,107,63,110,68,102,61,107,66,98,61,103,63,97,57,99]).setFill(c);
g.createPolyline([83,79,76,79,67,82,75,83,65,88,76,87,65,92,76,91,68,96,77,95,70,99,80,98,72,104,80,102,76,108,85,103,92,101,87,98,93,96,86,94,91,93,85,91,93,89,99,89,105,93,107,85,102,82,92,80]).setFill(c);
g.createPolyline([109,77,111,83,109,89,113,94,117,90,117,81,114,78]).setFill(c);
g.createPolyline([122,128,127,126,134,127,136,129,134,130,130,128,124,129]).setFill(c);
g.createPolyline([78,27,82,32,80,33,82,36,78,37,82,40,78,42,81,46,76,47,78,49,74,50,82,52,87,50,83,48,91,46,86,45,91,42,88,40,92,37,86,34,90,31,86,29,89,26]).setFill(c);
g.createPolyline([82,17,92,20,79,21,90,25,81,25,94,28,93,26,101,30,101,26,107,33,108,28,111,40,113,34,115,45,117,39,119,54,121,46,124,58,126,47,129,59,130,49,134,58,133,44,137,48,133,37,137,40,133,32,126,20,135,26,132,19,138,23,135,17,142,18,132,11,116,6,94,6,78,11,92,12,80,14,90,16]).setFill(c);
g.createPolyline([142,234,132,227,124,223,115,220,110,225,118,224,127,229,135,236,122,234,115,237,113,242,121,238,139,243,121,245,111,254,95,254,102,244,104,235,110,229,100,231,104,224,113,216,122,215,132,217,141,224,145,230,149,240]).setFill(c);
g.createPolyline([115,252,125,248,137,249,143,258,134,255,125,254]).setFill(c);
g.createPolyline([114,212,130,213,140,219,147,225,144,214,137,209,128,207]).setFill(c);
g.createPolyline([102,263,108,258,117,257,131,258,116,260,109,265]).setFill(c);
g.createPolyline([51,241,35,224,40,238,23,224,31,242,19,239,28,247,17,246,25,250,37,254,39,263,44,271,47,294,48,317,51,328,60,351,60,323,53,262,47,246]).setFill(c);
g.createPolyline([2,364,9,367,14,366,18,355,20,364,26,366,31,357,35,364,39,364,42,357,47,363,53,360,59,357,54,369,7,373]).setFill(c);
g.createPolyline([7,349,19,345,25,339,18,341,23,333,28,326,23,326,27,320,23,316,25,311,20,298,15,277,12,264,9,249,10,223,3,248,5,261,15,307,17,326,11,343]).setFill(c);
g.createPolyline([11,226,15,231,25,236,18,227]).setFill(c);
g.createPolyline([13,214,19,217,32,227,23,214,16,208,15,190,24,148,31,121,24,137,14,170,8,189]).setFill(c);
g.createPolyline([202,254,195,258,199,260,193,263,197,263,190,268,196,268,191,273,188,282,200,272,194,272,201,266,197,265,204,262,200,258,204,256]).setFill(c);
c = new dojo.Color("#845433");
g.createPolyline([151,213,165,212,179,225,189,246,187,262,179,275,176,263,177,247,171,233,163,230,165,251,157,264,146,298,145,321,133,326,143,285,154,260,153,240]).setFill(c);
g.createPolyline([91,132,95,145,97,154,104,148,107,155,109,150,111,158,115,152,118,159,120,153,125,161,126,155,133,164,132,154,137,163,137,152,142,163,147,186,152,192,148,167,141,143,124,145,105,143]).setFill(c);
c = new dojo.Color("#9c826b");
g.createPolyline([31,57,23,52,26,51,20,44,23,42,21,36,22,29,25,23,24,32,30,43,26,41,30,50,26,48]).setFill(c);
g.createPolyline([147,21,149,28,155,21,161,16,167,14,175,15,173,11,161,9]).setFill(c);
g.createPolyline([181,39,175,51,169,57,171,65,165,68,165,75,160,76,162,91,171,71,180,51]).setFill(c);
g.createPolyline([132,346,139,348,141,346,142,341,147,342,143,355,133,350]).setFill(c);
g.createPolyline([146,355,151,352,155,348,157,343,160,349,151,356,147,357]).setFill(c);
g.createPolyline([99,266,100,281,94,305,86,322,78,332,72,346,73,331,91,291]).setFill(c);
g.createPolyline([20,347,32,342,45,340,54,345,45,350,42,353,38,350,31,353,29,356,23,350,19,353,15,349]).setFill(c);
g.createPolyline([78,344,86,344,92,349,88,358,84,352]).setFill(c);
g.createPolyline([93,347,104,344,117,345,124,354,121,357,116,351,112,351,108,355,102,351]).setFill(c);
c = new dojo.Color("black");
g.createPolyline([105,12,111,18,113,24,113,29,119,34,116,23,112,16]).setFill(c);
g.createPolyline([122,27,125,34,127,43,128,34,125,29]).setFill(c);
g.createPolyline([115,13,122,19,122,15,113,10]).setFill(c);
c = new dojo.Color("#ffe5b2");
g.createPolyline([116,172,107,182,98,193,98,183,90,199,89,189,84,207,88,206,87,215,95,206,93,219,91,230,98,216,97,226,104,214,112,209,104,208,113,202,126,200,139,207,132,198,142,203,134,192,142,195,134,187,140,185,130,181,136,177,126,177,125,171,116,180]).setFill(c);
g.createPolyline([74,220,67,230,67,221,59,235,63,233,60,248,70,232,65,249,71,243,67,256,73,250,69,262,73,259,71,267,76,262,72,271,78,270,76,275,82,274,78,290,86,279,86,289,92,274,88,275,87,264,82,270,82,258,77,257,78,247,73,246,77,233,72,236]).setFill(c);
g.createPolyline([133,230,147,242,148,250,145,254,138,247,129,246,142,245,138,241,128,237,137,238]).setFill(c);
g.createPolyline([133,261,125,261,116,263,111,267,125,265]).setFill(c);
g.createPolyline([121,271,109,273,103,279,99,305,92,316,85,327,83,335,89,340,97,341,94,336,101,336,96,331,103,330,97,327,108,325,99,322,109,321,100,318,110,317,105,314,110,312,107,310,113,308,105,306,114,303,105,301,115,298,107,295,115,294,108,293,117,291,109,289,117,286,109,286,118,283,112,281,118,279,114,278,119,276,115,274]).setFill(c);
g.createPolyline([79,364,74,359,74,353,76,347,80,351,83,356,82,360]).setFill(c);
g.createPolyline([91,363,93,356,97,353,103,355,105,360,103,366,99,371,94,368]).setFill(c);
g.createPolyline([110,355,114,353,118,357,117,363,113,369,111,362]).setFill(c);
g.createPolyline([126,354,123,358,124,367,126,369,129,361,129,357]).setFill(c);
g.createPolyline([30,154,24,166,20,182,23,194,29,208,37,218,41,210,41,223,46,214,46,227,52,216,52,227,61,216,59,225,68,213,73,219,70,207,77,212,69,200,77,202,70,194,78,197,68,187,76,182,64,182,58,175,58,185,53,177,50,186,46,171,44,182,39,167,36,172,36,162,30,166]).setFill(c);
g.createPolyline([44,130,41,137,45,136,43,150,48,142,48,157,53,150,52,164,60,156,61,169,64,165,66,175,70,167,74,176,77,168,80,183,85,172,90,182,93,174,98,181,99,173,104,175,105,169,114,168,102,163,95,157,94,166,90,154,87,162,82,149,75,159,72,148,68,155,67,143,62,148,62,138,58,145,56,133,52,142,52,128,49,134,47,125]).setFill(c);
g.createPolyline([13,216,19,219,36,231,22,223,16,222,22,227,12,224,13,220,16,220]).setFill(c);
g.createPolyline([10,231,14,236,25,239,27,237,19,234]).setFill(c);
g.createPolyline([9,245,14,242,25,245,13,245]).setFill(c);
g.createPolyline([33,255,26,253,18,254,25,256,18,258,27,260,18,263,27,265,19,267,29,270,21,272,29,276,21,278,30,281,22,283,31,287,24,288,32,292,23,293,34,298,26,299,37,303,32,305,39,309,33,309,39,314,34,314,40,318,34,317,40,321,34,321,41,326,33,326,40,330,33,332,39,333,33,337,42,337,54,341,49,337,52,335,47,330,50,330,45,325,49,325,45,321,48,321,45,316,46,306,45,286,43,274,36,261]).setFill(c);
g.createPolyline([7,358,9,351,14,351,17,359,11,364]).setFill(c);
g.createPolyline([44,354,49,351,52,355,49,361]).setFill(c);
g.createPolyline([32,357,37,353,40,358,36,361]).setFill(c);
g.createPolyline([139,334,145,330,154,330,158,334,154,341,152,348,145,350,149,340,147,336,141,339,139,345,136,342,136,339]).setFill(c);
g.createPolyline([208,259,215,259,212,255,220,259,224,263,225,274,224,283,220,292,208,300,206,308,203,304,199,315,197,309,195,318,193,313,190,322,190,316,185,325,182,318,180,325,172,321,178,320,176,313,186,312,180,307,188,307,184,303,191,302,186,299,195,294,187,290,197,288,192,286,201,283,194,280,203,277,198,275,207,271,200,269,209,265,204,265,212,262]).setFill(c);
g.createPolyline([106,126,106,131,109,132,111,134,115,132,115,135,119,133,118,137,123,137,128,137,133,134,136,130,136,127,132,124,118,128,112,128,106,126,106,126,106,126]).setFill(c);
g.createPolyline([107,114,101,110,98,102,105,97,111,98,119,102,121,108,118,112,113,115]).setFill(c);
g.createPolyline([148,106,145,110,146,116,150,118,152,111,151,107]).setFill(c);
g.createPolyline([80,55,70,52,75,58,63,57,72,61,57,61,67,66,57,67,62,69,54,71,61,73,54,77,63,78,53,85,60,84,56,90,69,84,63,82,75,76,70,75,77,72,72,71,78,69,72,66,81,67,78,64,82,63,80,60,86,62]).setFill(c);
g.createPolyline([87,56,91,52,96,50,102,56,98,56,92,60]).setFill(c);
g.createPolyline([85,68,89,73,98,76,106,74,96,73,91,70]).setFill(c);
g.createPolyline([115,57,114,64,111,64,115,75,122,81,122,74,126,79,126,74,131,78,130,72,133,77,131,68,126,61,119,57]).setFill(c);
g.createPolyline([145,48,143,53,147,59,151,59,150,55]).setFill(c);
g.createPolyline([26,22,34,15,43,10,52,10,59,16,47,15,32,22]).setFill(c);
g.createPolyline([160,19,152,26,149,34,154,33,152,30,157,30,155,26,158,27,157,23,161,23]).setFill(c);
c = new dojo.Color("black");
g.createPolyline([98,117,105,122,109,122,105,117,113,120,121,120,130,112,128,108,123,103,123,99,128,101,132,106,135,109,142,105,142,101,145,101,145,91,148,101,145,105,136,112,135,116,143,124,148,120,150,122,142,128,133,122,121,125,112,126,103,125,100,129,96,124]).setFill(c);
g.createPolyline([146,118,152,118,152,115,149,115]).setFill(c);
g.createPolyline([148,112,154,111,154,109,149,109]).setFill(c);
g.createPolyline([106,112,108,115,114,116,118,114]).setFill(c);
g.createPolyline([108,108,111,110,116,110,119,108]).setFill(c);
g.createPolyline([106,104,109,105,117,106,115,104]).setFill(c);
g.createPolyline([50,25,41,26,34,33,39,43,49,58,36,51,47,68,55,69,54,59,61,57,74,46,60,52,67,42,57,48,61,40,54,45,60,36,59,29,48,38,52,30,47,32]).setFill(c);
g.createPolyline([147,34,152,41,155,49,161,53,157,47,164,47,158,43,168,44,159,40,164,37,169,37,164,33,169,34,165,28,170,30,170,25,173,29,175,27,176,32,173,36,175,39,172,42,172,46,168,49,170,55,162,57,158,63,155,58,153,50,149,46]).setFill(c);
g.createPolyline([155,71,159,80,157,93,157,102,155,108,150,101,149,93,154,101,152,91,151,83,155,79]).setFill(c);
g.createPolyline([112,78,115,81,114,91,112,87,113,82]).setFill(c);
g.createPolyline([78,28,64,17,58,11,47,9,36,10,28,16,21,26,18,41,20,51,23,61,33,65,28,68,37,74,36,81,43,87,48,90,43,100,40,98,39,90,31,80,30,72,22,71,17,61,14,46,16,28,23,17,33,9,45,6,54,6,65,12]).setFill(c);
g.createPolyline([67,18,76,9,87,5,101,2,118,3,135,8,149,20,149,26,144,19,132,12,121,9,105,7,89,8,76,14,70,20]).setFill(c);
g.createPolyline([56,98,48,106,56,103,47,112,56,110,52,115,57,113,52,121,62,115,58,123,65,119,63,125,69,121,68,127,74,125,74,129,79,128,83,132,94,135,93,129,85,127,81,122,76,126,75,121,71,124,71,117,66,121,66,117,62,117,64,112,60,113,60,110,57,111,61,105,57,107,60,101,55,102]).setFill(c);
g.createPolyline([101,132,103,138,106,134,106,139,112,136,111,142,115,139,114,143,119,142,125,145,131,142,135,138,140,134,140,129,143,135,145,149,150,171,149,184,145,165,141,150,136,147,132,151,131,149,126,152,125,150,121,152,117,148,111,152,110,148,105,149,104,145,98,150,96,138,94,132,94,130,98,132]).setFill(c);
g.createPolyline([41,94,32,110,23,132,12,163,6,190,7,217,5,236,3,247,9,230,12,211,12,185,18,160,26,134,35,110,43,99]).setFill(c);
g.createPolyline([32,246,41,250,50,257,52,267,53,295,53,323,59,350,54,363,51,365,44,366,42,360,40,372,54,372,59,366,62,353,71,352,75,335,73,330,66,318,68,302,64,294,67,288,63,286,63,279,59,275,58,267,56,262,50,247,42,235,44,246,32,236,35,244]).setFill(c);
g.createPolyline([134,324,146,320,159,322,173,327,179,337,179,349,172,355,158,357,170,350,174,343,170,333,163,328,152,326,134,329]).setFill(c);
g.createPolyline([173,339,183,334,184,338,191,329,194,332,199,323,202,325,206,318,209,320,213,309,221,303,228,296,232,289,234,279,233,269,230,262,225,256,219,253,208,252,198,252,210,249,223,250,232,257,237,265,238,277,238,291,232,305,221,323,218,335,212,342,200,349,178,348]).setFill(c);
g.createPolyline([165,296,158,301,156,310,156,323,162,324,159,318,162,308,162,304]).setFill(c);
g.createPolyline([99,252,105,244,107,234,115,228,121,228,131,235,122,233,113,235,109,246,121,239,133,243,121,243,110,251]).setFill(c);
g.createPolyline([117,252,124,247,134,249,136,253,126,252]).setFill(c);
g.createPolyline([117,218,132,224,144,233,140,225,132,219,117,218,117,218,117,218]).setFill(c);
g.createPolyline([122,212,134,214,143,221,141,213,132,210]).setFill(c);
g.createPolyline([69,352,70,363,76,373,86,378,97,379,108,379,120,377,128,378,132,373,135,361,133,358,132,366,127,375,121,374,121,362,119,367,117,374,110,376,110,362,107,357,106,371,104,375,97,376,90,375,90,368,86,362,83,364,86,369,85,373,78,370,73,362,71,351]).setFill(c);
g.createPolyline([100,360,96,363,99,369,102,364]).setFill(c);
g.createPolyline([115,360,112,363,114,369,117,364]).setFill(c);
g.createPolyline([127,362,125,364,126,369,128,365]).setFill(c);
g.createPolyline([5,255,7,276,11,304,15,320,13,334,6,348,2,353,0,363,5,372,12,374,25,372,38,372,44,369,42,367,36,368,31,369,30,360,27,368,20,370,16,361,15,368,10,369,3,366,3,359,6,352,11,348,17,331,19,316,12,291,9,274]).setFill(c);
g.createPolyline([10,358,7,362,10,366,11,362]).setFill(c);
g.createPolyline([25,357,22,360,24,366,27,360]).setFill(c);
g.createPolyline([37,357,34,361,36,365,38,361]).setFill(c);
g.createPolyline([49,356,46,359,47,364,50,360]).setFill(c);
g.createPolyline([130,101,132,102,135,101,139,102,143,103,142,101,137,100,133,100]).setFill(c);
g.createPolyline([106,48,105,52,108,56,109,52]).setFill(c);
g.createPolyline([139,52,139,56,140,60,142,58,141,56]).setFill(c);
g.createPolyline([25,349,29,351,30,355,33,350,37,348,42,351,45,347,49,345,44,343,36,345]).setFill(c);
g.createPolyline([98,347,105,351,107,354,109,349,115,349,120,353,118,349,113,346,104,346]).setFill(c);
g.createPolyline([83,348,87,352,87,357,89,351,87,348]).setFill(c);
g.createPolyline([155,107,163,107,170,107,186,108,175,109,155,109]).setFill(c);
g.createPolyline([153,114,162,113,175,112,192,114,173,114,154,115]).setFill(c);
g.createPolyline([152,118,164,120,180,123,197,129,169,123,151,120]).setFill(c);
g.createPolyline([68,109,87,106,107,106,106,108,88,108]).setFill(c);
g.createPolyline([105,111,95,112,79,114,71,116,85,115,102,113]).setFill(c);
g.createPolyline([108,101,98,99,87,99,78,99,93,100,105,102]).setFill(c);
g.createPolyline([85,63,91,63,97,60,104,60,108,62,111,69,112,75,110,74,108,71,103,73,106,69,105,65,103,64,103,67,102,70,99,70,97,66,94,67,97,72,88,67,84,66]).setFill(c);
g.createPolyline([140,74,141,66,144,61,150,61,156,62,153,70,150,73,152,65,150,65,151,68,149,71,146,71,144,66,143,70,143,74]).setFill(c);
g.createPolyline([146,20,156,11,163,9,172,9,178,14,182,18,184,32,182,42,182,52,177,58,176,67,171,76,165,90,157,105,160,92,164,85,168,78,167,73,173,66,172,62,175,59,174,55,177,53,180,46,181,29,179,21,173,13,166,11,159,13,153,18,148,23]).setFill(c);
g.createPolyline([150,187,148,211,150,233,153,247,148,267,135,283,125,299,136,292,131,313,122,328,122,345,129,352,133,359,133,367,137,359,148,356,140,350,131,347,129,340,132,332,140,328,137,322,140,304,154,265,157,244,155,223,161,220,175,229,186,247,185,260,176,275,178,287,185,277,188,261,196,253,189,236,174,213]).setFill(c);
g.createPolyline([147,338,142,341,143,345,141,354,147,343]).setFill(c);
g.createPolyline([157,342,156,349,150,356,157,353,163,346,162,342]).setFill(c);
g.createPolyline([99,265,96,284,92,299,73,339,73,333,87,300]).setFill(c);
//surface.createLine({x1: 0, y1: 350, x2: 700, y2: 350}).setStroke("green");
//surface.createLine({y1: 0, x1: 350, y2: 700, x2: 350}).setStroke("green");
dojo.connect(dijit.byId("rotatingSlider"), "onChange", rotatingEvent);
dojo.connect(dijit.byId("scalingSlider"), "onChange", scalingEvent);
};
dojo.addOnLoad(makeShapes);
</script>
<style type="text/css">
td.pad { padding: 0px 5px 0px 5px; }
</style>
</head>
<body class="tundra">
<h1>dojox.gfx: Lion</h1>
<p>This example was directly converted from SVG file.</p>
<table>
<tr><td align="center" class="pad">Rotation (<span id="rotationValue">0</span>)</td></tr>
<tr><td>
<div id="rotatingSlider" dojoType="dijit.form.HorizontalSlider"
value="0" minimum="-180" maximum="180" discreteValues="72" showButtons="false" intermediateChanges="true"
style="width: 600px;">
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count="73" style="height:5px;"></div>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="9" style="height:5px;"></div>
<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" labels="-180,-135,-90,-45,0,45,90,135,180" style="height:1.2em;font-size:75%;color:gray;"></div>
</div>
</td></tr>
<tr><td align="center" class="pad">Scaling (<span id="scaleValue">1.000</span>)</td></tr>
<tr><td>
<div id="scalingSlider" dojoType="dijit.form.HorizontalSlider"
value="1" minimum="0" maximum="1" showButtons="false" intermediateChanges="true"
style="width: 600px;">
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="5" style="height:5px;"></div>
<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" labels="10%,18%,32%,56%,100%" style="height:1.2em;font-size:75%;color:gray;"></div>
</div>
</td></tr>
</table>
<div id="gfx_holder" style="width: 700px; height: 700px;"></div>
</body>
</html>
|
