WebSVN – Applications.papyrus – /trunk/api/js/dojo1.0/dojox/gfx/tests/test_gfx.html

<html>
<head>
<title>Dojo Unified 2D Graphics</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
        @import "../../../dojo/resources/dojo.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="isDebug: true, gfxRenderer: 'svg,silverlight,vml'"></script>
<!--<script type="text/javascript" src="../_base.js"></script>-->
<!--<script type="text/javascript" src="../path.js"></script>-->
<!--<script type="text/javascript" src="../vml.js"></script>-->
<!--<script type="text/javascript" src="../svg.js"></script>-->
<!--<script type="text/javascript" src="../silverlight.js"></script>-->
<script type="text/javascript">

dojo.require("dojox.gfx");

var gTestContainer = null;
var gTests = {};

function isEqual(foo, bar, prefix)
{
    var flag = true;
    if( foo != bar ) {
        console.debug(prefix+":"+foo + "!=" + bar + " try dig into it" );
        if( foo instanceof Array ) {
            for( var i = 0; i< foo.length; i++ ) {
                flag = isEqual(foo[i], bar[i], prefix+"["+i+"]") && flag;
            }
            flag = false;
        } else {
            for(var x in foo) {
                if(bar[x] != undefined ) {
                    flag = isEqual(foo[x], bar[x], prefix+"."+x) && flag;
                } else {
                    console.debug(prefix+":"+ x + " is undefined in bar" );
                    flag = false;
                }
            }
        }
    }
    return flag;
}


function getTestSurface(testName, testDescription, width, height) 
{
   width = width ? width : 300;
   height = height ? height : 300;

   // Create a DOM node for the surface
   var testRow = document.createElement('tr');
   var testCell = document.createElement('td');
   var testHolder = document.createElement('div');
   testHolder.id = testName + '_holder';
   testHolder.style.width  = width;
   testHolder.style.height = height;

   testCell.appendChild(testHolder);
   testRow.appendChild(testCell);
   gTestContainer.appendChild(testRow);

   var descRow = document.createElement('tr');
   var desc = document.createElement('td');
   desc.innerHTML = testDescription;
   descRow.appendChild(desc);
   gTestContainer.appendChild(descRow);

   return dojox.gfx.createSurface(testHolder, width, height);
}

function addTest(testName, fn)
{
   gTests[testName] = fn;
}

function runTest_nodebug(testName)
{
   try {
      var t = gTests[testName];
      if (!t) {
         return 'no test named ' + t;
      }
      t(testName);
      return null; // the success condition
   } catch (e) {
      return e.message;
   }
}

function runTest_debug(testName)
{
      var t = gTests[testName];
      if (!t) {
         return 'no test named ' + t;
      }
      t(testName);
      return null; // the success condition
}

var runTest = djConfig.isDebug ? runTest_debug : runTest_nodebug;

dojo.addOnLoad(function() 
{
        gTestContainer = dojo.byId('testcontainer');
        var rect = { x: 0, y: 0, width: 100, height: 100 };

        addTest('rect', function(testName){
                var surface = getTestSurface(testName, 'translucent rect with rounded stroke');
                var red_rect = surface.createRect(rect);
                red_rect.setFill([255, 0, 0, 0.5]);
                red_rect.setStroke({color: "blue", width: 10, join: "round" });
                red_rect.setTransform({dx: 100, dy: 100});
                //dojo.connect(red_rect.getNode(), "onclick", function(){ alert("red"); });
                red_rect.connect("onclick", function(){ alert("red"); });
        });

        addTest('straight_rect', function(testName){
                var surface = getTestSurface(testName, 'translucent rect with no stroke');
                var blue_rect = surface.createRect(rect).setFill([0, 255, 0, 0.5]).setTransform({ dx: 100, dy: 100 });
                //dojo.connect( blue_rect.getNode(), "onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
                blue_rect.connect("onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
        });

        addTest('rotated_rect', function(testName){
                var surface = getTestSurface(testName, '30g CCW blue translucent rounded rect');
                console.debug('rotated_rect');
                // anonymous 30 degree CCW rotated green rectangle
                surface.createRect({r: 20})
                        .setFill([0, 0, 255, 0.5])
                        // rotate it around its center and move to (100, 100)
                        .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 0)])
                        ;
        });

        addTest('skew_rect', function(testName){
                var surface = getTestSurface(testName, 'skewed rects' );
                // anonymous red rectangle
                surface.createRect(rect).setFill(new dojo.Color([255, 0, 0, 0.5]))
                        // skew it around LB point -30d, rotate it around LB point 30d, and move it to (100, 100)
                        .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
                // anonymous blue rectangle
                surface.createRect(rect).setFill(new dojo.Color([0, 0, 255, 0.5]))
                        // skew it around LB point -30d, and move it to (100, 100)
                        .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
                // anonymous yellow rectangle
                surface.createRect(rect).setFill(new dojo.Color([255, 255, 0, 0.25]))
                        // move it to (100, 100)
                        .setTransform(dojox.gfx.matrix.translate(100, 100));
        });

        addTest('matrix_rect', function(testName){
                var surface = getTestSurface(testName, 'all matrix operations, check debug output for more details');

                var group = surface.createGroup();
                
                var blue_rect = group.createRect(rect).setFill([0, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.identity);
                console.debug( "blue_rect: rect with identity" );

                group.createRect(rect).setFill([0, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.translate(30, 40));
                console.debug( "lime_rect: translate(30,40) " );
                
                group.createRect(rect).setFill([255, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.rotateg(-30));
                console.debug( "red_rect: rotate 30 degree counterclockwise " );

                group.createRect(rect).setFill([0, 255, 255, 0.5])
                        .applyTransform(dojox.gfx.matrix.scale({x:1.5, y:0.5}))
                        .applyTransform(dojox.gfx.matrix.translate(-40, 220))
                        ;
                console.debug( "lightblue_rect: scale(1.5, 0.5)" );

                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.flipX);
                console.debug( "pink_rect: flipX" );

                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.flipY);
                console.debug( "yellow_rect: flipY" );

                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([128, 0, 128, 0.5]).applyTransform(dojox.gfx.matrix.flipXY);
                console.debug( "purple_rect: flipXY" );

                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 128, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewXg(-15));
                console.debug( "purple_rect: skewXg 15 degree" );

                group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([0, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewYg(-50));
                console.debug( "black_rect: skewXg 50 degree" );

                // move
                group
                        .setTransform({ xx: 1.5, yy: 0.5, dx: 100, dy: 100 })
                        .applyTransform(dojox.gfx.matrix.rotateg(-30))
                        ;
        });

        addTest('attach', function(testName){
                var surface = getTestSurface(testName, 'Attach to existed shape');
                var red_rect = surface.createRect(rect)
                        .setShape({ width: 75 })
                        .setFill([255, 0, 0, 0.5])
                        .setStroke({ color: "blue", width: 1 })
                        .setTransform({ dx: 50, dy: 50, xx: 1, xy: 0.5, yx: 0.7, yy: 1.1 })
                        ;

                console.debug("attaching !");
                // now attach it!
                var ar = dojox.gfx.attachNode(red_rect.rawNode);
                console.assert( ar.rawNode == red_rect.rawNode );

                // FIXME: more generic method to compare two dictionary?
                console.debug("attach shape: ");
                isEqual(ar.shape, red_rect.shape, "rect.shape");
                console.debug("attach matrix: ");
                isEqual(ar.matrix, red_rect.matrix, "rect.matrix");
                console.debug("attach strokeStyle: ");
                isEqual(ar.strokeStyle, red_rect.strokeStyle, "rect.strokeStyle");
                console.debug("attach fillStyle: ");
                isEqual(ar.fillStyle, red_rect.fillStyle, "rect.fillStyle");
        });
        
        // test circle
        addTest('circle', function(testName){
                var surface = getTestSurface(testName, 'translucent green circle');
                var circle = { cx: 130, cy: 130, r: 50 };
                surface.createCircle(circle).setFill([0, 255, 0, 0.5]).setTransform({ dx: 20, dy: 20 });
        });

        // test line
        addTest('line', function(testName){
                var surface = getTestSurface(testName, 'straight red line');
                var line = { x1: 20, y1: 20, x2: 100, y2: 120 };
                surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1}).setTransform({ dx:70, dy: 100 });
        });

        // test ellipse 
        addTest('ellipse', function(testName){
                var surface = getTestSurface(testName, 'translucent cyan ellipse');
                var ellipse = { cx: 50, cy: 80, rx: 50, ry: 80 };
                surface.createEllipse(ellipse).setFill([0, 255, 255, 0.5]).setTransform({ dx: 30, dy: 70 });
        });

        // test polyline
        addTest('polyline', function(testName){
                var surface = getTestSurface(testName, 'unfilled open polyline');
                var points = [ {x: 10, y: 20}, {x: 40, y: 70}, {x: 120, y: 50}, {x: 90, y: 90} ];
                surface.createPolyline(points).setFill(null).setStroke({ color: "blue", width: 1 }).setTransform({ dx: 15, dy: 0 });
        });

        // test polygon
        addTest('polygon', function(testName){
                var surface = getTestSurface(testName, 'filled polygon');
                var points2 = [{x: 100, y: 0}, {x: 200, y: 40}, {x: 180, y: 150}, {x: 60, y: 170}, {x: 20, y: 100}];
                surface.createPolyline(points2).setFill([0, 128, 255, 0.6]).setTransform({dx:30, dy: 20});
        });

        // test path: lineTo, moveTo, closePath
        addTest('lineTo', function(testName){
                var surface = getTestSurface(testName, 'lineTo, moveTo, closePath');
                surface.createPath()
                        .moveTo(10, 20).lineTo(80, 150)
                        .setAbsoluteMode(false).lineTo(40, 0)
                        .setAbsoluteMode(true).lineTo(180, 100)
                        .setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
                        .closePath()
                        .setStroke({ color: "red", width: 1 })
                        .setFill(null)
                        .setTransform({ dx: 10, dy: 18 })
                        ;
        });

        addTest('setPath', function(testName){
                var surface = getTestSurface(testName, 'setPath example with lineTo moveTo');
                surface.createPath()
                        .moveTo(10, 20).lineTo(80, 150)
                        .setAbsoluteMode(false).lineTo(40,0)
                        .setAbsoluteMode(true).lineTo(180, 100)
                        .setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
                        .curveTo(10, -80, -150, -10, -90, -10)
                        .closePath()
                        .setStroke({ color: "red", width: 1 })
                        .setFill(null)
                        .setTransform({ dx: 10, dy: 58 })
                        ;

                surface.createPath({ path: "M10,20 L80,150 l40,0 L180,100 l0,-30 l-30,-50 c10,-80 -150,-10 -90,-10 z" })
                        .setFill(null)
                        .setStroke({ color: "blue", width: 1 })
                        .setTransform({ dx: 50, dy: 78 })
                        ;
        });

        // test arcTo 
        addTest('arcTo', function(testName){
                var surface = getTestSurface(testName, 'arcTo: from 0 to 360 degree, w/ 30 degree of x axis rotation, rendered with different color');

                var m = dojox.gfx.matrix;
                var g1 = surface.createGroup();
                var g2 = g1.createGroup();

                var rx = 100, ry = 60, xRotg = 30;
                var startPoint = m.multiplyPoint(m.rotateg(xRotg), {x: -rx, y: 0  });
                var endPoint   = m.multiplyPoint(m.rotateg(xRotg), {x: 0,   y: -ry});
            
                var re1 = g1.createPath()
                        .moveTo(startPoint)
                        .arcTo(rx, ry, xRotg, true, false, endPoint)
                        .setStroke({color: "red"})
                        ;
                var ge1 = g1.createPath()
                        .moveTo(re1.getLastPosition())
                        .arcTo(rx, ry, xRotg, false, false, startPoint)
                        .setStroke({color: "blue"})
                        ;
                var re2 = g2.createPath()
                        .moveTo(startPoint)
                        .arcTo(rx, ry, xRotg, false, true, endPoint)
                        .setStroke({color: "red"})
                        ;
                var ge2 = g2.createPath()
                        .moveTo(re2.getLastPosition())
                        .arcTo(rx, ry, xRotg, true, true, startPoint)
                        .setStroke({color: "blue"})
                        ;
                        
                g1.setTransform({dx: 150, dy: 150});
                g2.setTransform({dx: 10,  dy: 10});
        });

        // test path: curveTo, smoothCurveTo
        addTest('curveTo', function(testName) {
                var surface = getTestSurface(testName, 'curveTo, smoothCurveTo');
                surface.createPath()
                        .moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100).smoothCurveTo(300, 300, 200, 200)
                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
                        ;
        });

        // test path: curveTo, smoothCurveTo with relative.
        addTest('curveTo2', function(testName) {
                var surface = getTestSurface(testName, 'curveTo, smoothCurveTo with relative coordination');
                surface.createPath()
                        .moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100)
                        .setAbsoluteMode(false).smoothCurveTo(150, 200, 50, 100)
                        .setAbsoluteMode(true).smoothCurveTo(50, 100, 10, 230)
                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
                        ;
        });

        // test path: curveTo, smoothCurveTo with relative.
        addTest('qCurveTo', function(testName) {
                var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo' );
                surface.createPath()
                        .moveTo(10, 15).qCurveTo(50, 50, 100, 100).qSmoothCurveTo(150, 20)
                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
                        ;
        });

        addTest('qCurveTo2', function(testName) {
                var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo with relative' );
                surface.createPath()
                        .moveTo(10, 20).qCurveTo(50, 50, 100, 100)
                        .setAbsoluteMode(false).qSmoothCurveTo(50, -80)
                        .setAbsoluteMode(true).qSmoothCurveTo(200, 80)
                        .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
                        ;
        });

        // test defines, linearGradient
        addTest('linearGradient', function(testName) {
                var surface = getTestSurface(testName, 'linear gradient fill');
                // this is an example to split the linearGradient from setFill:
                var lg = {
                        type: "linear",
                        x1: 0, y1: 0, x2: 75, y2: 50,
                        colors: [
                                { offset: 0, color: "#F60" },
                                { offset: 1, color: "#FF6" }
                        ]
                };
                surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });
        });

        // TODO: test radialGradient
        addTest('radialGradient', function(testName) {
                var surface = getTestSurface(testName, 'radial gradient fill');
                // this is a total inline implementation compared with previous one.
                var rg = {
                        type: "radial",
                        cx: 100, cy: 100, r: 100,
                        colors: [
                                { offset:   0, color: "red" },
                                { offset: 0.5, color: "green" },
                                { offset:   1, color: "blue" }
                        ]
                };
                
                surface.createCircle({cx: 100, cy: 100, r: 100})
                        .setStroke({})
                        .setFill(rg)
                        .setTransform({dx: 40, dy: 30})
                        ;
//              surface.createRect(rect)
//                      .setShape({width: 200})
//                      .setStroke({})
//                      .setFill(rg)
//                      .setTransform({dx: 40, dy: 30})
//                      ;
        });

        addTest('attach_gradient', function(testName) {
                var surface = getTestSurface(testName, 'attach gradient fill');
                // this is an example to split the linearGradient from setFill:
                var lg = {
                        type: "linear",
                        x1: 0, y1: 0, x2: 75, y2: 50,
                        colors: [
                                { offset:   0, color: "#F60" },
                                { offset: 0.5, color: "#FAF" },
                                { offset:   1, color: "#FF6" }
                        ]
                };

                var lgr = surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });

                var ar = dojox.gfx.attachNode(lgr.rawNode);
                // FIXME: more generic method to compare two dictionary?
                console.debug("attach_gradient!");

                console.debug("attach shape: ");
                isEqual(lgr.shape, ar.shape, "rect.shape");
                console.debug("attach matrix: ");
                isEqual(lgr.matrix, ar.matrix, "rect.matrix");
                console.debug("attach strokeStyle: ");
                isEqual(lgr.strokeStyle, ar.strokeStyle, "rect.strokeStyle");
                console.debug("attach fillStyle: ");
                isEqual(lgr.fillStyle.gradient, ar.fillStyle.gradient, "rect.fillStyle.gradient");
                //isEqual(lgr.fillStyle.id, ar.fillStyle.id, "rect.fillStyle.id");
        });

        var gTestsToRun = [
                'rect',
                'straight_rect',
                'rotated_rect',
                'skew_rect',
                'matrix_rect', 
                //'attach',
                //'attach_gradient',
                'circle',
                'arcTo',
                'line',
                'ellipse',
                'polyline',
                'polygon',
                'lineTo',
                'setPath',
                'curveTo',
                'curveTo2',
                'qCurveTo',
                'qCurveTo2',
                'linearGradient',
                'radialGradient'
        ];

        for (var i = 0; i < gTestsToRun.length; ++i) {
                var testName = gTestsToRun[i];
                var err = runTest(testName);
                if (err) {
                        getTestSurface(testName, testName + ' FAILED (' + err + ')');
                }
        }

}); // end onload
</script>
<style>
   td { border: 1px solid black; text-align: left; vertical-align: top; }
   v:group { text-align: left; }
</style>
   </head>
   <body>
           <h1>dojox.gfx tests</h1>
   <table>
   <tbody id="testcontainer">
   </tbody>
   </table>
   </body>
   </html>
Subversion Repositories Applications.papyrus

(root)/trunk/api/js/dojo1.0/dojox/gfx/tests/test_gfx.html – Rev 2150
