source: Dev/trunk/src/client/dojox/gfx/tests/svgweb/test_gfx.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 18.3 KB
Line 
1<html>
2<head>
3        <title>Dojo Unified 2D Graphics</title>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
6        <!-- test styles -->
7        <style type="text/css">
8                @import "../../../../dojo/resources/dojo.css";
9                @import "../../../../dijit/tests/css/dijitTests.css";
10                td { border: 1px solid black; text-align: left; vertical-align: top; }
11                v:group { text-align: left; }
12        </style>
13
14        <!-- required: dojo.js -->
15        <!-- SVGWEB { -->
16        <meta name="svg.render.forceflash" content="true"/>
17        <script src="svgweb/src/svg.js" data-path="svgweb/src"></script>
18        <script src="../../../../dojo/dojo.js" data-dojo-config="isDebug:true,forceGfxRenderer:'svg'" type="text/javascript"></script>
19        <!-- } -->
20
21        <script type="text/javascript">
22
23                dojo.require("dojox.gfx");
24
25                var gTestContainer = null;
26                var gTests = {};
27
28                function isEqual(foo, bar, prefix){
29                    var flag = true;
30                    if(foo != bar ){
31                        console.debug(prefix+":"+foo + "!=" + bar + " try dig into it" );
32                        if( foo instanceof Array ) {
33                            for( var i = 0; i< foo.length; i++ ) {
34                                flag = isEqual(foo[i], bar[i], prefix+"["+i+"]") && flag;
35                            }
36                            flag = false;
37                        } else {
38                            for(var x in foo) {
39                                if(bar[x] != undefined ) {
40                                    flag = isEqual(foo[x], bar[x], prefix+"."+x) && flag;
41                                } else {
42                                    console.debug(prefix+":"+ x + " is undefined in bar" );
43                                    flag = false;
44                                }
45                            }
46                        }
47                    }
48                    return flag;
49                }
50
51
52                function getTestSurface(testName, testDescription, width, height){
53                   width = width ? width : 300;
54                   height = height ? height : 300;
55
56                   // Create a DOM node for the surface
57                   var testRow = document.createElement('tr');
58                   var testCell = document.createElement('td');
59                   var testHolder = document.createElement('div');
60                   testHolder.id = testName + '_holder';
61                   testHolder.style.width  = width;
62                   testHolder.style.height = height;
63
64                   testCell.appendChild(testHolder);
65                   testRow.appendChild(testCell);
66                   gTestContainer.appendChild(testRow);
67
68                   var descRow = document.createElement('tr');
69                   var desc = document.createElement('td');
70                   desc.innerHTML = testDescription;
71                   descRow.appendChild(desc);
72                   gTestContainer.appendChild(descRow);
73
74                   return dojox.gfx.createSurface(testHolder, width, height);
75                }
76
77                function addTest(testName, fn){
78                   gTests[testName] = fn;
79                }
80
81                function runTest_nodebug(testName){
82                   try {
83                      var t = gTests[testName];
84                      if (!t) {
85                         return 'no test named ' + t;
86                      }
87                      t(testName);
88                      return null; // the success condition
89                   } catch (e) {
90                      return e.message;
91                   }
92                }
93
94                function runTest_debug(testName){
95                      var t = gTests[testName];
96                      if (!t) {
97                         return 'no test named ' + t;
98                      }
99                      t(testName);
100                      return null; // the success condition
101                }
102
103                var runTest = dojo.config.isDebug ? runTest_debug : runTest_nodebug;
104
105                dojo.addOnLoad(function(){
106                        gTestContainer = dojo.byId('testcontainer');
107                        var rect = { x: 0, y: 0, width: 100, height: 100 };
108
109                        addTest('rect', function(testName){
110                                var surface = getTestSurface(testName, 'translucent rect with rounded stroke');
111                                /* SVGWEB { */
112                                surface.whenLoaded(function() {
113                                var red_rect = surface.createRect(rect);
114                                red_rect.setFill([255, 0, 0, 0.5]);
115                                red_rect.setStroke({color: "blue", width: 10, join: "round" });
116                                red_rect.setTransform({dx: 100, dy: 100});
117                                //dojo.connect(red_rect.getNode(), "onclick", function(){ alert("red"); });
118                                red_rect.connect("onclick", function(){ alert("red"); });
119                                });
120                                /* } */
121                        });
122
123                        addTest('straight_rect', function(testName){
124                                var surface = getTestSurface(testName, 'translucent rect with no stroke');
125                                /* SVGWEB { */
126                                surface.whenLoaded(function() {
127                                var blue_rect = surface.createRect(rect).setFill([0, 255, 0, 0.5]).setTransform({ dx: 100, dy: 100 });
128                                //dojo.connect( blue_rect.getNode(), "onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
129                                blue_rect.connect("onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
130                                });
131                                /* } */
132                        });
133
134                        addTest('rotated_rect', function(testName){
135                                var surface = getTestSurface(testName, '30g CCW blue translucent rounded rect');
136                                /* SVGWEB { */
137                                surface.whenLoaded(function() {
138                                console.debug('rotated_rect');
139                                // anonymous 30 degree CCW rotated green rectangle
140                                surface.createRect({r: 20})
141                                        .setFill([0, 0, 255, 0.5])
142                                        // rotate it around its center and move to (100, 100)
143                                        .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 0)])
144                                        ;
145                                });
146                                /* } */
147                        });
148
149                        addTest('skew_rect', function(testName){
150                                var surface = getTestSurface(testName, 'skewed rects' );
151                                /* SVGWEB { */
152                                surface.whenLoaded(function() {
153                                // anonymous red rectangle
154                                surface.createRect(rect).setFill(new dojo.Color([255, 0, 0, 0.5]))
155                                        // skew it around LB point -30d, rotate it around LB point 30d, and move it to (100, 100)
156                                        .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
157                                // anonymous blue rectangle
158                                surface.createRect(rect).setFill(new dojo.Color([0, 0, 255, 0.5]))
159                                        // skew it around LB point -30d, and move it to (100, 100)
160                                        .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
161                                // anonymous yellow rectangle
162                                surface.createRect(rect).setFill(new dojo.Color([255, 255, 0, 0.25]))
163                                        // move it to (100, 100)
164                                        .setTransform(dojox.gfx.matrix.translate(100, 100));
165                                });
166                                /* } */
167                        });
168
169                        addTest('matrix_rect', function(testName){
170                                var surface = getTestSurface(testName, 'all matrix operations, check debug output for more details');
171                                /* SVGWEB { */
172                                surface.whenLoaded(function() {
173
174                                var group = surface.createGroup();
175               
176                                var blue_rect = group.createRect(rect).setFill([0, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.identity);
177                                console.debug( "blue_rect: rect with identity" );
178
179                                group.createRect(rect).setFill([0, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.translate(30, 40));
180                                console.debug( "lime_rect: translate(30,40) " );
181               
182                                group.createRect(rect).setFill([255, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.rotateg(-30));
183                                console.debug( "red_rect: rotate 30 degree counterclockwise " );
184
185                                group.createRect(rect).setFill([0, 255, 255, 0.5])
186                                        .applyTransform(dojox.gfx.matrix.scale({x:1.5, y:0.5}))
187                                        .applyTransform(dojox.gfx.matrix.translate(-40, 220))
188                                        ;
189                                console.debug( "lightblue_rect: scale(1.5, 0.5)" );
190
191                                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.flipX);
192                                console.debug( "pink_rect: flipX" );
193
194                                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.flipY);
195                                console.debug( "yellow_rect: flipY" );
196
197                                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([128, 0, 128, 0.5]).applyTransform(dojox.gfx.matrix.flipXY);
198                                console.debug( "purple_rect: flipXY" );
199
200                                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 128, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewXg(-15));
201                                console.debug( "purple_rect: skewXg 15 degree" );
202
203                                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([0, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewYg(-50));
204                                console.debug( "black_rect: skewXg 50 degree" );
205
206                                // move
207                                group
208                                        .setTransform({ xx: 1.5, yy: 0.5, dx: 100, dy: 100 })
209                                        .applyTransform(dojox.gfx.matrix.rotateg(-30))
210                                        ;
211                                });
212                                /* } */
213                        });
214
215                        addTest('attach', function(testName){
216                                var surface = getTestSurface(testName, 'Attach to existed shape');
217                                /* SVGWEB { */
218                                surface.whenLoaded(function() {
219                                var red_rect = surface.createRect(rect)
220                                        .setShape({ width: 75 })
221                                        .setFill([255, 0, 0, 0.5])
222                                        .setStroke({ color: "blue", width: 1 })
223                                        .setTransform({ dx: 50, dy: 50, xx: 1, xy: 0.5, yx: 0.7, yy: 1.1 })
224                                        ;
225
226                                console.debug("attaching !");
227                                // now attach it!
228                                var ar = dojox.gfx.attachNode(red_rect.rawNode);
229                                console.assert( ar.rawNode == red_rect.rawNode );
230
231                                // FIXME: more generic method to compare two dictionary?
232                                console.debug("attach shape: ");
233                                isEqual(ar.shape, red_rect.shape, "rect.shape");
234                                console.debug("attach matrix: ");
235                                isEqual(ar.matrix, red_rect.matrix, "rect.matrix");
236                                console.debug("attach strokeStyle: ");
237                                isEqual(ar.strokeStyle, red_rect.strokeStyle, "rect.strokeStyle");
238                                console.debug("attach fillStyle: ");
239                                isEqual(ar.fillStyle, red_rect.fillStyle, "rect.fillStyle");
240                                });
241                                /* } */
242                        });
243       
244                        // test circle
245                        addTest('circle', function(testName){
246                                var surface = getTestSurface(testName, 'translucent green circle');
247                                /* SVGWEB { */
248                                surface.whenLoaded(function() {
249                                var circle = { cx: 130, cy: 130, r: 50 };
250                                surface.createCircle(circle).setFill([0, 255, 0, 0.5]).setTransform({ dx: 20, dy: 20 });
251                                });
252                                /* } */
253                        });
254
255                        // test line
256                        addTest('line', function(testName){
257                                var surface = getTestSurface(testName, 'straight red line');
258                                /* SVGWEB { */
259                                surface.whenLoaded(function() {
260                                var line = { x1: 20, y1: 20, x2: 100, y2: 120 };
261                                surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1}).setTransform({ dx:70, dy: 100 });
262                                });
263                                /* } */
264                        });
265
266                        // test ellipse
267                        addTest('ellipse', function(testName){
268                                var surface = getTestSurface(testName, 'translucent cyan ellipse');
269                                /* SVGWEB { */
270                                surface.whenLoaded(function() {
271                                var ellipse = { cx: 50, cy: 80, rx: 50, ry: 80 };
272                                surface.createEllipse(ellipse).setFill([0, 255, 255, 0.5]).setTransform({ dx: 30, dy: 70 });
273                                });
274                                /* } */
275                        });
276
277                        // test polyline
278                        addTest('polyline', function(testName){
279                                var surface = getTestSurface(testName, 'unfilled open polyline');
280                                /* SVGWEB { */
281                                surface.whenLoaded(function() {
282                                var points = [ {x: 10, y: 20}, {x: 40, y: 70}, {x: 120, y: 50}, {x: 90, y: 90} ];
283                                surface.createPolyline(points).setFill(null).setStroke({ color: "blue", width: 1 }).setTransform({ dx: 15, dy: 0 });
284                                });
285                                /* } */
286                        });
287
288                        // test polygon
289                        addTest('polygon', function(testName){
290                                var surface = getTestSurface(testName, 'filled polygon');
291                                /* SVGWEB { */
292                                surface.whenLoaded(function() {
293                                var points2 = [{x: 100, y: 0}, {x: 200, y: 40}, {x: 180, y: 150}, {x: 60, y: 170}, {x: 20, y: 100}];
294                                surface.createPolyline(points2).setFill([0, 128, 255, 0.6]).setTransform({dx:30, dy: 20});
295                                });
296                                /* } */
297                        });
298
299                        // test path: lineTo, moveTo, closePath
300                        addTest('lineTo', function(testName){
301                                var surface = getTestSurface(testName, 'lineTo, moveTo, closePath');
302                                /* SVGWEB { */
303                                surface.whenLoaded(function() {
304                                surface.createPath()
305                                        .moveTo(10, 20).lineTo(80, 150)
306                                        .setAbsoluteMode(false).lineTo(40, 0)
307                                        .setAbsoluteMode(true).lineTo(180, 100)
308                                        .setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
309                                        .closePath()
310                                        .setStroke({ color: "red", width: 1 })
311                                        .setFill(null)
312                                        .setTransform({ dx: 10, dy: 18 })
313                                        ;
314                                });
315                                /* } */
316                        });
317
318                        addTest('setPath', function(testName){
319                                var surface = getTestSurface(testName, 'setPath example with lineTo moveTo');
320                                /* SVGWEB { */
321                                surface.whenLoaded(function() {
322                                surface.createPath()
323                                        .moveTo(10, 20).lineTo(80, 150)
324                                        .setAbsoluteMode(false).lineTo(40,0)
325                                        .setAbsoluteMode(true).lineTo(180, 100)
326                                        .setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
327                                        .curveTo(10, -80, -150, -10, -90, -10)
328                                        .closePath()
329                                        .setStroke({ color: "red", width: 1 })
330                                        .setFill(null)
331                                        .setTransform({ dx: 10, dy: 58 })
332                                        ;
333
334                                surface.createPath({ path: "M10,20 L80,150 l40,0 L180,100 l0,-30 l-30,-50 c10,-80 -150,-10 -90,-10 z" })
335                                        .setFill(null)
336                                        .setStroke({ color: "blue", width: 1 })
337                                        .setTransform({ dx: 50, dy: 78 })
338                                        ;
339                                });
340                                /* } */
341                        });
342
343                        // test arcTo
344                        addTest('arcTo', function(testName){
345                                var surface = getTestSurface(testName, 'arcTo: from 0 to 360 degree, w/ 30 degree of x axis rotation, rendered with different color');
346                                /* SVGWEB { */
347                                surface.whenLoaded(function() {
348
349                                var m = dojox.gfx.matrix;
350                                var g1 = surface.createGroup();
351                                var g2 = g1.createGroup();
352
353                                var rx = 100, ry = 60, xRotg = 30;
354                                var startPoint = m.multiplyPoint(m.rotateg(xRotg), {x: -rx, y: 0  });
355                                var endPoint   = m.multiplyPoint(m.rotateg(xRotg), {x: 0,   y: -ry});
356           
357                                var re1 = g1.createPath()
358                                        .moveTo(startPoint)
359                                        .arcTo(rx, ry, xRotg, true, false, endPoint)
360                                        .setStroke({color: "red"})
361                                        ;
362                                var ge1 = g1.createPath()
363                                        .moveTo(re1.getLastPosition())
364                                        .arcTo(rx, ry, xRotg, false, false, startPoint)
365                                        .setStroke({color: "blue"})
366                                        ;
367                                var re2 = g2.createPath()
368                                        .moveTo(startPoint)
369                                        .arcTo(rx, ry, xRotg, false, true, endPoint)
370                                        .setStroke({color: "red"})
371                                        ;
372                                var ge2 = g2.createPath()
373                                        .moveTo(re2.getLastPosition())
374                                        .arcTo(rx, ry, xRotg, true, true, startPoint)
375                                        .setStroke({color: "blue"})
376                                        ;
377                       
378                                g1.setTransform({dx: 150, dy: 150});
379                                g2.setTransform({dx: 10,  dy: 10});
380                                });
381                                /* } */
382                        });
383
384                        // test path: curveTo, smoothCurveTo
385                        addTest('curveTo', function(testName) {
386                                var surface = getTestSurface(testName, 'curveTo, smoothCurveTo');
387                                /* SVGWEB { */
388                                surface.whenLoaded(function() {
389                                surface.createPath()
390                                        .moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100).smoothCurveTo(300, 300, 200, 200)
391                                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
392                                        ;
393                                });
394                                /* } */
395                        });
396
397                        // test path: curveTo, smoothCurveTo with relative.
398                        addTest('curveTo2', function(testName) {
399                                var surface = getTestSurface(testName, 'curveTo, smoothCurveTo with relative coordination');
400                                /* SVGWEB { */
401                                surface.whenLoaded(function() {
402                                surface.createPath()
403                                        .moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100)
404                                        .setAbsoluteMode(false).smoothCurveTo(150, 200, 50, 100)
405                                        .setAbsoluteMode(true).smoothCurveTo(50, 100, 10, 230)
406                                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
407                                        ;
408                                });
409                                /* } */
410                        });
411
412                        // test path: curveTo, smoothCurveTo with relative.
413                        addTest('qCurveTo', function(testName) {
414                                var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo' );
415                                /* SVGWEB { */
416                                surface.whenLoaded(function() {
417                                surface.createPath()
418                                        .moveTo(10, 15).qCurveTo(50, 50, 100, 100).qSmoothCurveTo(150, 20)
419                                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
420                                        ;
421                                });
422                                /* } */
423                        });
424
425                        addTest('qCurveTo2', function(testName) {
426                                var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo with relative' );
427                                /* SVGWEB { */
428                                surface.whenLoaded(function() {
429                                surface.createPath()
430                                        .moveTo(10, 20).qCurveTo(50, 50, 100, 100)
431                                        .setAbsoluteMode(false).qSmoothCurveTo(50, -80)
432                                        .setAbsoluteMode(true).qSmoothCurveTo(200, 80)
433                                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
434                                        ;
435                                });
436                                /* } */
437                        });
438
439                        // test defines, linearGradient
440                        addTest('linearGradient', function(testName) {
441                                var surface = getTestSurface(testName, 'linear gradient fill');
442                                /* SVGWEB { */
443                                surface.whenLoaded(function() {
444                                // this is an example to split the linearGradient from setFill:
445                                var lg = {
446                                        type: "linear",
447                                        x1: 0, y1: 0, x2: 75, y2: 50,
448                                        colors: [
449                                                { offset: 0, color: "#F60" },
450                                                { offset: 1, color: "#FF6" }
451                                        ]
452                                };
453                                surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });
454                                });
455                                /* } */
456                        });
457
458                        // TODO: test radialGradient
459                        addTest('radialGradient', function(testName) {
460                                var surface = getTestSurface(testName, 'radial gradient fill');
461                                /* SVGWEB { */
462                                surface.whenLoaded(function() {
463                                // this is a total inline implementation compared with previous one.
464                                var rg = {
465                                        type: "radial",
466                                        cx: 100, cy: 100, r: 100,
467                                        colors: [
468                                                { offset:   0, color: "red" },
469                                                { offset: 0.5, color: "green" },
470                                                { offset:   1, color: "blue" }
471                                        ]
472                                };
473               
474                                surface.createCircle({cx: 100, cy: 100, r: 100})
475                                        .setStroke({})
476                                        .setFill(rg)
477                                        .setTransform({dx: 40, dy: 30})
478                                        ;
479                //              surface.createRect(rect)
480                //              .setShape({width: 200})
481                //              .setStroke({})
482                //              .setFill(rg)
483                //              .setTransform({dx: 40, dy: 30})
484                //              ;
485                                });
486                                /* } */
487                        });
488
489                        addTest('attach_gradient', function(testName) {
490                                var surface = getTestSurface(testName, 'attach gradient fill');
491                                /* SVGWEB { */
492                                surface.whenLoaded(function() {
493                                // this is an example to split the linearGradient from setFill:
494                                var lg = {
495                                        type: "linear",
496                                        x1: 0, y1: 0, x2: 75, y2: 50,
497                                        colors: [
498                                                { offset:   0, color: "#F60" },
499                                                { offset: 0.5, color: "#FAF" },
500                                                { offset:   1, color: "#FF6" }
501                                        ]
502                                };
503
504                                var lgr = surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });
505
506                                var ar = dojox.gfx.attachNode(lgr.rawNode);
507                                // FIXME: more generic method to compare two dictionary?
508                                console.debug("attach_gradient!");
509
510                                console.debug("attach shape: ");
511                                isEqual(lgr.shape, ar.shape, "rect.shape");
512                                console.debug("attach matrix: ");
513                                isEqual(lgr.matrix, ar.matrix, "rect.matrix");
514                                console.debug("attach strokeStyle: ");
515                                isEqual(lgr.strokeStyle, ar.strokeStyle, "rect.strokeStyle");
516                                console.debug("attach fillStyle: ");
517                                isEqual(lgr.fillStyle.gradient, ar.fillStyle.gradient, "rect.fillStyle.gradient");
518                                //isEqual(lgr.fillStyle.id, ar.fillStyle.id, "rect.fillStyle.id");
519                                });
520                                /* } */
521                        });
522
523                        var gTestsToRun = [
524                                'rect',
525                                'straight_rect',
526                                'rotated_rect',
527                                'skew_rect',
528                                'matrix_rect',
529                                //'attach',
530                                //'attach_gradient',
531                                'circle',
532                                'arcTo',
533                                'line',
534                                'ellipse',
535                                'polyline',
536                                'polygon',
537                                'lineTo',
538                                'setPath',
539                                'curveTo',
540                                'curveTo2',
541                                'qCurveTo',
542                                'qCurveTo2',
543                                'linearGradient',
544                                'radialGradient'
545                        ];
546
547                        for (var i = 0; i < gTestsToRun.length; ++i) {
548                                var testName = gTestsToRun[i];
549                                var err = runTest(testName);
550                                if (err) {
551                                        getTestSurface(testName, testName + ' FAILED (' + err + ')');
552                                }
553                        }
554
555                }); // end onload
556                </script>
557</head>
558<body>
559        <h1 class="testTitle">dojox.gfx tests</h1>
560                <table>
561                        <tbody id="testcontainer">
562                        </tbody>
563                </table>
564</body>
565</html>
Note: See TracBrowser for help on using the repository browser.