summaryrefslogtreecommitdiff
path: root/includes/js/dojox/gfx/tests/test_gfx.html
diff options
context:
space:
mode:
Diffstat (limited to 'includes/js/dojox/gfx/tests/test_gfx.html')
-rw-r--r--includes/js/dojox/gfx/tests/test_gfx.html489
1 files changed, 489 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/tests/test_gfx.html b/includes/js/dojox/gfx/tests/test_gfx.html
new file mode 100644
index 0000000..6d2bef3
--- /dev/null
+++ b/includes/js/dojox/gfx/tests/test_gfx.html
@@ -0,0 +1,489 @@
+<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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-01 18:21:51 +0000