diff options
Diffstat (limited to 'includes/js/dojox/gfx/tests')
24 files changed, 2228 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/tests/decompose.js b/includes/js/dojox/gfx/tests/decompose.js new file mode 100644 index 0000000..b488bdd --- /dev/null +++ b/includes/js/dojox/gfx/tests/decompose.js @@ -0,0 +1,114 @@ +if(!dojo._hasResource["dojox.gfx.tests.decompose"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.gfx.tests.decompose"] = true; +dojo.provide("dojox.gfx.tests.decompose"); +dojo.require("dojox.gfx.decompose"); + +(function(){ + var m = dojox.gfx.matrix; + var eq = function(t, a, b){ t.t(2 * Math.abs(a - b) / ((a < 1 && b < 1) ? 1 : a + b) < 1e-6); }; + var eqM = function(t, a, b){ + eq(t, a.xx, b.xx); + eq(t, a.yy, b.yy); + eq(t, a.xy, b.xy); + eq(t, a.yx, b.yx); + eq(t, a.dx, b.dx); + eq(t, a.dy, b.dy); + }; + var compose = function(r){ + return m.normalize([ + m.translate(r.dx, r.dy), + m.rotate(r.angle2), + m.scale(r.sx, r.sy), + m.rotate(r.angle1) + ]); + }; + var reconstruct = function(a){ + return compose(dojox.gfx.decompose(a)); + }; + var compare = function(t, a){ + var A = m.normalize(a); + eqM(t, A, reconstruct(A)); + }; + tests.register("dojox.gfx.tests.decompose", [ + function IdentityTest(t){ + compare(t, m.identity); + }, + function FlipXTest(t){ + compare(t, m.flipX); + }, + function FlipYTest(t){ + compare(t, m.flipY); + }, + function FlipXYTest(t){ + compare(t, m.flipXY); + }, + function TranslationTest(t){ + compare(t, m.translate(45, -15)); + }, + function RotationTest(t){ + compare(t, m.rotateg(35)); + }, + function SkewXTest(t){ + compare(t, m.skewXg(35)); + }, + function SkewYTest(t){ + compare(t, m.skewYg(35)); + }, + function ReflectTest(t){ + compare(t, m.reflect(13, 27)); + }, + function ProjectTest(t){ + compare(t, m.project(13, 27)); + }, + function ScaleTest1(t){ + compare(t, m.scale(3)); + }, + function ScaleTest2(t){ + compare(t, m.scale(3, -1)); + }, + function ScaleTest3(t){ + compare(t, m.scale(-3, 1)); + }, + function ScaleTest4(t){ + compare(t, m.scale(-3, -1)); + }, + function ScaleRotateTest1(t){ + compare(t, [m.scale(3), m.rotateAt(35, 13, 27)]); + }, + function ScaleRotateTest2(t){ + compare(t, [m.scale(3, -1), m.rotateAt(35, 13, 27)]); + }, + function ScaleRotateTest3(t){ + compare(t, [m.scale(-3, 1), m.rotateAt(35, 13, 27)]); + }, + function ScaleRotateTest4(t){ + compare(t, [m.scale(-3, -1), m.rotateAt(35, 13, 27)]); + }, + function RotateScaleTest1(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(3)]); + }, + function RotateScaleTest2(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(3, -1)]); + }, + function RotateScaleTest3(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, 1)]); + }, + function RotateScaleTest4(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, -1)]); + }, + function RotateScaleRotateTest1(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(3), m.rotateAt(-15, 163, -287)]); + }, + function RotateScaleRotateTest2(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(3, -1), m.rotateAt(-15, 163, -287)]); + }, + function RotateScaleRotateTest3(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, 1), m.rotateAt(-15, 163, -287)]); + }, + function RotateScaleRotateTest4(t){ + compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, -1), m.rotateAt(-15, 163, -287)]); + } + ]); +})(); + +} diff --git a/includes/js/dojox/gfx/tests/matrix.js b/includes/js/dojox/gfx/tests/matrix.js new file mode 100644 index 0000000..282ec36 --- /dev/null +++ b/includes/js/dojox/gfx/tests/matrix.js @@ -0,0 +1,228 @@ +if(!dojo._hasResource["dojox.gfx.tests.matrix"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.gfx.tests.matrix"] = true; +dojo.provide("dojox.gfx.tests.matrix"); +dojo.require("dojox.gfx.matrix"); + +(function(){ + var m = dojox.gfx.matrix; + var eq = function(t, a, b){ t.t(2 * Math.abs(a - b) / ((a < 1 && b < 1) ? 1 : a + b) < 1e-6); }; + tests.register("dojox.gfx.tests.matrix", [ + function IdentityTest(t){ + var a = new m.Matrix2D(); + eq(t, a.xx, 1); + eq(t, a.yy, 1); + eq(t, a.xy, 0); + eq(t, a.yx, 0); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + }, + function Rot30gTest(t){ + var a = m.rotateg(30); + eq(t, a.xx, a.yy); + eq(t, a.xy, -a.yx); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + eq(t, a.yx, 0.5); + t.t(a.xy < 0); + t.t(a.yx > 0); + }, + function Rot45gTest(t){ + var a = m.rotateg(45); + eq(t, a.xx, a.yy); + eq(t, a.xy, -a.yx); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + eq(t, a.xx, a.yx); + eq(t, a.yy, -a.xy); + }, + function Rot90gTest(t){ + var a = m.rotateg(90); + eq(t, a.xx, a.yy); + eq(t, a.xy, -a.yx); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + eq(t, a.xx, 0); + eq(t, a.yx, 1); + }, + function CombineIdentitiesTest(t){ + var a = m.normalize([new m.Matrix2D(), new m.Matrix2D(), new m.Matrix2D()]); + eq(t, a.xx, 1); + eq(t, a.yy, 1); + eq(t, a.xy, 0); + eq(t, a.yx, 0); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + }, + function CombineExclusiveTest(t){ + var a = m.normalize([m.rotateg(30), m.rotateg(-30)]); + eq(t, a.xx, 1); + eq(t, a.yy, 1); + eq(t, a.xy, 0); + eq(t, a.yx, 0); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + }, + function CombineInvertedTest(t){ + var a = m.normalize([m.rotateg(30), m.invert(m.rotateg(30))]); + eq(t, a.xx, 1); + eq(t, a.yy, 1); + eq(t, a.xy, 0); + eq(t, a.yx, 0); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + }, + function Rot90gAtTest(t){ + var a = m.rotategAt(90, 10, 10); + eq(t, a.xx, a.yy); + eq(t, a.xy, -a.yx); + eq(t, a.dx, 20); + eq(t, a.dy, 0); + eq(t, a.xx, 0); + eq(t, a.yx, 1); + }, + function MultPointTest1(t){ + var b = m.multiplyPoint(m.rotategAt(90, 10, 10), 10, 10); + eq(t, b.x, 10); + eq(t, b.y, 10); + }, + function MultPointTest2(t){ + var b = m.multiplyPoint(m.rotategAt(90, 10, 10), {x: 10, y: 5}); + eq(t, b.x, 15); + eq(t, b.y, 10); + }, + function MultPointTest3(t){ + var b = m.multiplyPoint(m.rotategAt(90, 10, 10), 10, 15); + eq(t, b.x, 5); + eq(t, b.y, 10); + }, + function ScaleTest1(t){ + var a = m.normalize([m.scale(2, 1), m.invert(m.rotateg(45))]); + eq(t, a.xx, 2 * a.yy); + eq(t, a.xy, -2 * a.yx); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + eq(t, a.xx, a.xy); + eq(t, a.yy, -a.yx); + }, + function ScaleTest2(t){ + var a = m.normalize([m.scale(1, 2), m.invert(m.rotateg(45))]); + eq(t, 2 * a.xx, a.yy); + eq(t, 2 * a.xy, -a.yx); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + eq(t, a.xx, a.xy); + eq(t, a.yy, -a.yx); + }, + function ScaleTest3(t){ + var a = m.normalize([m.rotateg(45), m.scale(2, 1)]); + eq(t, a.xx, 2 * a.yy); + eq(t, a.yx, -2 * a.xy); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + eq(t, a.xx, a.yx); + eq(t, a.yy, -a.xy); + }, + function ScaleTest4(t){ + var a = m.normalize([m.rotateg(45), m.scale(1, 2)]); + eq(t, 2 * a.xx, a.yy); + eq(t, 2 * a.yx, -a.xy); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + eq(t, a.xx, a.yx); + eq(t, a.yy, -a.xy); + }, + function ScaleTest5(t){ + var a = m.normalize([m.rotategAt(45, 100, 100), m.scale(2)]); + eq(t, a.xx, a.yy); + eq(t, a.xy, -a.yx); + eq(t, a.xx, a.yx); + eq(t, a.yy, -a.xy); + eq(t, a.dx, 100); + t.t(a.dy < 0); + var b = m.normalize([m.scale(2), m.rotategAt(45, 100, 100)]); + eq(t, b.xx, b.yy); + eq(t, b.xy, -b.yx); + eq(t, b.xx, b.yx); + eq(t, b.yy, -b.xy); + eq(t, b.dx, 200); + t.t(b.dy < 0); + eq(t, a.xx, b.xx); + eq(t, a.xy, b.xy); + eq(t, a.yx, b.yx); + eq(t, a.yy, b.yy); + eq(t, 2 * a.dx, b.dx); + eq(t, 2 * a.dy, b.dy); + var c = m.normalize([m.rotateg(45), m.scale(2)]); + eq(t, c.xx, c.yy); + eq(t, c.xy, -c.yx); + eq(t, c.xx, c.yx); + eq(t, c.yy, -c.xy); + eq(t, c.dx, 0); + eq(t, c.dy, 0); + var d = m.normalize([m.scale(2), m.rotateg(45)]); + eq(t, d.xx, d.yy); + eq(t, d.xy, -d.yx); + eq(t, d.xx, d.yx); + eq(t, d.yy, -d.xy); + eq(t, d.dx, 0); + eq(t, d.dy, 0); + eq(t, a.xx, c.xx); + eq(t, a.xy, c.xy); + eq(t, a.yx, c.yx); + eq(t, a.yy, c.yy); + eq(t, a.xx, d.xx); + eq(t, a.xy, d.xy); + eq(t, a.yx, d.yx); + eq(t, a.yy, d.yy); + }, + function ScaleTest6(t){ + var a = m.normalize(6); + eq(t, a.xx, 6); + eq(t, a.yy, 6); + eq(t, a.xy, 0); + eq(t, a.yx, 0); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + }, + function ScaleTest7(t){ + var a = m.normalize([2, m.scale(2, 1)]); + eq(t, a.xx, 4); + eq(t, a.yy, 2); + eq(t, a.xy, 0); + eq(t, a.yx, 0); + eq(t, a.dx, 0); + eq(t, a.dy, 0); + }, + function TranslateTest(t){ + var a = m.normalize({dx: 100, dy: 200}); + eq(t, a.xx, 1); + eq(t, a.yy, 1); + eq(t, a.xy, 0); + eq(t, a.yx, 0); + eq(t, a.dx, 100); + eq(t, a.dy, 200); + }, + function ReflectTest1(t){ + var b = m.multiplyPoint(m.reflect(1, 1), 1, 0); + eq(t, b.x, 0); + eq(t, b.y, 1); + }, + function ReflectTest2(t){ + var b = m.multiplyPoint(m.reflect(1, 1), 0, 1); + eq(t, b.x, 1); + eq(t, b.y, 0); + }, + function ProjectTest1(t){ + var b = m.multiplyPoint(m.project(1, 1), 1, 0); + eq(t, b.x, 0.5); + eq(t, b.y, 0.5); + }, + function ProjectTest2(t){ + var b = m.multiplyPoint(m.project(1, 1), 0, 1); + eq(t, b.x, 0.5); + eq(t, b.y, 0.5); + } + ]); +})(); + +} diff --git a/includes/js/dojox/gfx/tests/module.js b/includes/js/dojox/gfx/tests/module.js new file mode 100644 index 0000000..0790b6b --- /dev/null +++ b/includes/js/dojox/gfx/tests/module.js @@ -0,0 +1,13 @@ +if(!dojo._hasResource["dojox.gfx.tests.module"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.gfx.tests.module"] = true; +dojo.provide("dojox.gfx.tests.module"); + +try{ + dojo.require("dojox.gfx.tests.matrix"); + dojo.require("dojox.gfx.tests.decompose"); +}catch(e){ + doh.debug(e); +} + + +} diff --git a/includes/js/dojox/gfx/tests/runTests.html b/includes/js/dojox/gfx/tests/runTests.html new file mode 100644 index 0000000..4e13179 --- /dev/null +++ b/includes/js/dojox/gfx/tests/runTests.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> +<html> + <head> + <title>Dojox Unit Test Runner</title> + <meta http-equiv="REFRESH" content="0;url=../../../util/doh/runner.html?testModule=dojox.gfx.tests.module"></HEAD> + <BODY> + Redirecting to D.O.H runner. + </BODY> +</HTML> diff --git a/includes/js/dojox/gfx/tests/test_arc.html b/includes/js/dojox/gfx/tests/test_arc.html new file mode 100644 index 0000000..f7fc589 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_arc.html @@ -0,0 +1,71 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing arc</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"></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("dojox.gfx"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 500, 500); + + 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", width: 3}) + ; + var ge1 = g1.createPath() + .moveTo(re1.getLastPosition()) + .arcTo(rx, ry, xRotg, false, false, startPoint) + .setStroke({color: "black"}) + ; + var re2 = g2.createPath() + .moveTo(startPoint) + .arcTo(rx, ry, xRotg, false, true, endPoint) + .setStroke({color: "green", width: 3}) + ; + var ge2 = g2.createPath() + .moveTo(re2.getLastPosition()) + .arcTo(rx, ry, xRotg, true, true, startPoint) + .setStroke({color: "black"}) + ; + + g1.setTransform({dx: 200, dy: 200}); + g2.setTransform({dx: 10, dy: 10}); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<h1>Testing arc</h1> +<!--<p><button onclick="makeShapes();">Go</button></p>--> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_bezier.html b/includes/js/dojox/gfx/tests/test_bezier.html new file mode 100644 index 0000000..bcee2d0 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_bezier.html @@ -0,0 +1,85 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Approximation of an arc with bezier</title> +<style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; +</style> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<!-- +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"></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("dojox.gfx"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 500, 300); + var g = surface.createGroup(); + + // create a reference ellipse + var rx = 200; + var ry = 100; + var startAngle = -30; + var arcAngle = -90; + var axisAngle = -30; + var e = g.createEllipse({rx: rx, ry: ry}).setStroke({}); + + // calculate a bezier + var alpha = dojox.gfx.matrix._degToRad(arcAngle) / 2; // half of our angle + var cosa = Math.cos(alpha); + var sina = Math.sin(alpha); + // start point + var p1 = {x: cosa, y: sina}; + // 1st control point + var p2 = {x: cosa + (4 / 3) * (1 - cosa), y: sina - (4 / 3) * cosa * (1 - cosa) / sina}; + // 2nd control point (symmetric to the 1st one) + var p3 = {x: p2.x, y: -p2.y}; + // end point (symmetric to the start point) + var p4 = {x: p1.x, y: -p1.y}; + + // rotate and scale poins as appropriate + var s = dojox.gfx.matrix.normalize([dojox.gfx.matrix.scale(e.shape.rx, e.shape.ry), dojox.gfx.matrix.rotateg(startAngle + arcAngle / 2)]); + p1 = dojox.gfx.matrix.multiplyPoint(s, p1); + p2 = dojox.gfx.matrix.multiplyPoint(s, p2); + p3 = dojox.gfx.matrix.multiplyPoint(s, p3); + p4 = dojox.gfx.matrix.multiplyPoint(s, p4); + // draw control trapezoid + var t = g.createPath().setStroke({color: "blue"}); + t.moveTo(p1.x, p1.y); + t.lineTo(p2.x, p2.y); + t.lineTo(p3.x, p3.y); + t.lineTo(p4.x, p4.y); + t.lineTo(p1.x, p1.y); + t.moveTo((p1.x + p4.x) / 2, (p1.y + p4.y) / 2); + t.lineTo((p2.x + p3.x) / 2, (p2.y + p3.y) / 2); + t.moveTo((p1.x + p2.x) / 2, (p1.y + p2.y) / 2); + t.lineTo((p3.x + p4.x) / 2, (p3.y + p4.y) / 2); + // draw a bezier + var b = g.createPath().setStroke({color: "red"}); + b.moveTo(p1.x, p1.y); + b.curveTo(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y); + // move everything in a middle + g.setTransform([dojox.gfx.matrix.translate(250, 150), dojox.gfx.matrix.rotateg(axisAngle)]); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<h1>Approximation of an arc with bezier</h1> +<!--<p><button onclick="makeShapes();">Make</button></p>--> +<div id="test" style="width: 500px; height: 300px;"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_decompose.html b/includes/js/dojox/gfx/tests/test_decompose.html new file mode 100644 index 0000000..6291cc2 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_decompose.html @@ -0,0 +1,54 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing decompose</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> +<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> +<script type="text/javascript" src="../matrix.js"></script> +<script type="text/javascript" src="../decompose.js"></script> +<script type="text/javascript"> +dojo.require("dojox.gfx.decompose"); + +var m = dojox.gfx.matrix; + +var eq = function(a, b){ + return Math.abs((a - b) / (a + b)) < 1e-6; +}; + +var calc = function(){ + var matrix1 = eval("(m.normalize([" + dojo.byId("input").value + "]))"); + dojo.byId("matrix1").value = dojo.toJson(matrix1, true); + var result = dojox.gfx.decompose(matrix1); + dojo.byId("result").innerHTML = "Result: " + dojo.toJson(result); + var matrix2 = m.normalize([ + m.translate(result.dx, result.dy), + m.rotate(result.angle2), + m.scale(result.sx, result.sy), + m.rotate(result.angle1) + ]); + dojo.byId("matrix2").value = dojo.toJson(matrix2, true); +}; + +</script> +</head> +<body> + <h1>Testing decompose</h1> + <p> + <span style="font-size: 8pt;">Example: m.rotategAt(30, 100, 100), m.scaleAt(2, 3, 5, 5), m.rotate(45)</span><br /> + <input id="input" type="text" size="50" maxlength="200" /><button onclick="calc();">Calc</button> + </p> + <p id="result">Result:</p> + <p> + <span style="font-size: 8pt;">Original matrix</span><br /> + <textarea id="matrix1" cols="50" rows="8" readonly="readonly"></textarea> + </p> + <p> + <span style="font-size: 8pt;">Decomposed matrix</span><br /> + <textarea id="matrix2" cols="50" rows="8" readonly="readonly"></textarea> + </p> + <p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_fill.html b/includes/js/dojox/gfx/tests/test_fill.html new file mode 100644 index 0000000..84827ea --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_fill.html @@ -0,0 +1,47 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing fill rule</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"></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="../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"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 500, 500); + var path = surface.createPath(""); + // form concentric circles + var center = {x: 250, y: 250}; + for(var r = 200; r > 0; r -= 30){ + // make two 180 degree arcs to form a circle + var start = {x: center.x, y: center.y - r}; + var end = {x: center.x, y: center.y + r}; + path.moveTo(start).arcTo(r, r, 0, true, true, end).arcTo(r, r, 0, true, true, start).closePath(); + } + // set visual attributes + path.setFill("red").setStroke("black"); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> + <h1>Testing fill rule</h1> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_fx.html b/includes/js/dojox/gfx/tests/test_fx.html new file mode 100644 index 0000000..c7b5b81 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_fx.html @@ -0,0 +1,113 @@ +<!doctype html> +<html> +<head> +<title>Testing animation</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"></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="../fx.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("dojox.gfx"); +dojo.require("dojox.gfx.fx"); +dojo.require("dojo.colors"); + +var rect, text; + +var makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 500, 500); + rect = surface.createRect({x: 100, y: 100, width: 300, height: 300}) + .setFill("yellow").setStroke({ + color: "green", + width: 5, + join: "round" + }); + text = surface.createText({x: 250, y: 250, text: "Hello!", align: "middle"}) + .setFill("black").setFont({family: "serif", size: "10pt"}); +}; + +dojo.addOnLoad(makeShapes); + +var animateStroke = function(){ + var anim = dojox.gfx.fx.animateStroke({ + duration: 5000, + shape: rect, + color: {start: "green", end: "red"}, + width: {start: 5, end: 15}, + join: {values: ["miter", "bevel", "round"]} + }); + dojo.byId("stroke").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("stroke").disabled = ""; }); + anim.play(); +}; + +var animateFill = function(){ + var anim = dojox.gfx.fx.animateFill({ + duration: 5000, + shape: rect, + color: {start: "yellow", end: "blue"} + }); + dojo.byId("fill").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("fill").disabled = ""; }); + anim.play(); +}; + +var animateFont = function(){ + var anim = dojox.gfx.fx.animateFont({ + duration: 5000, + shape: text, + variant: {values: ["normal", "small-caps"]}, + size: {start: 10, end: 50, unit: "pt"} + }); + dojo.byId("font").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("font").disabled = ""; }); + anim.play(); +}; + +var animateTransform = function(){ + var anim = dojox.gfx.fx.animateTransform({ + duration: 5000, + shape: text, + transform: [ + {name: "rotategAt", start: [0, 250, 250], end: [360, 350, 350]}, + {name: "translate", start: [0, 0], end: [100, 100]} + ] + }); + dojo.byId("transform").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("transform").disabled = ""; }); + anim.play(); +}; +</script> +</head> +<body> +<h1>Testing animation</h1> +<p> + <button id="stroke" onclick="animateStroke();">Stroke</button> + + <button id="fill" onclick="animateFill();">Fill</button> + + <button id="font" onclick="animateFont();">Font</button> + + <button id="transform" onclick="animateTransform();">Transform</button> +</p> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> 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> diff --git a/includes/js/dojox/gfx/tests/test_gradient.html b/includes/js/dojox/gfx/tests/test_gradient.html new file mode 100644 index 0000000..cd4e772 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_gradient.html @@ -0,0 +1,70 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Dojo Unified 2D Graphics</title> +<style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; +</style> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<!-- +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"></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"); +dojo.require("dojo.colors"); // pull in CSS3 color names + +makeShapes = function(){ + var SIDE = 10; + var fillObj = { + colors: [ + { offset: 0, color: [255, 255, 0, 0] }, + { offset: 0.5, color: "orange" }, + { offset: 1, color: [255, 255, 0, 0] } + ] + }; + var surface = dojox.gfx.createSurface(dojo.byId("grad"), 300, 300); + // create a background + for(var i = 0; i < 300; i += SIDE){ + for(var j = 0; j < 300; j += SIDE){ + surface. + createRect({x: j, y: i, width: 10, height: 10}). + setFill((Math.floor(i / SIDE) + Math.floor(j / SIDE)) % 2 ? "lightgrey" : "white"); + } + } + // create a rect + surface.createRect({ + width: 300, + height: 100 + }).setFill(dojo.mixin({ + type: "linear", + x1: 0, y1: 0, + x2: 300, y2: 0 + }, fillObj)); + // create a circle + surface.createEllipse({ + cx: 150, + cy: 200, + rx: 100, + ry: 100 + }).setFill(dojo.mixin({ + type: "radial", + cx: 150, + cy: 200 + }, fillObj)); +}; +dojo.addOnLoad(makeShapes); +</script> +<style type="text/css"> +#grad { width: 300px; height: 300px; } +</style> +</head> +<body> +<h1>dojox.gfx Alpha gradient test</h1> +<div id="grad"></div> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_group.html b/includes/js/dojox/gfx/tests/test_group.html new file mode 100644 index 0000000..fe11b37 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_group.html @@ -0,0 +1,73 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Dojo Unified 2D Graphics</title> +<style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; +</style> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<!-- +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"></script> +<!--<script type="text/javascript" src="../matrix.js"></script>--> +<!--<script type="text/javascript" src="../util.js"></script>--> +<!--<script type="text/javascript" src="../shape.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 surface = null; +var g1 = null; +var g2 = null; +var r1 = null; + +makeShapes = function(){ + surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); + // make a checkerboard + for(var i = 0; i < 500; i += 100){ + for(var j = 0; j < 500; j += 100){ + if(i % 200 == j % 200) { + surface.createRect({ x: i, y: j }).setFill([255, 0, 0, 0.1]); + } + } + } + // create groups and shapes + g1 = surface.createGroup(); + g2 = surface.createGroup(); + r1 = surface.createRect({x: 200, y: 200}).setFill("green").setStroke({}); + g1.setTransform({dy: -100}); + //g2.setTransform(dojox.gfx.matrix.rotateAt(-45, 250, 250)); + g2.setTransform({dx: 100, dy: -100}); +}; + +switchRect = function(){ + var radio = document.getElementsByName("switch"); + if(radio[0].checked){ + surface.add(r1); + }else if(radio[1].checked){ + g1.add(r1); + }else if(radio[2].checked){ + g2.add(r1); + } +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<h1>dojox.gfx Group tests</h1> +<p> +<input type="radio" name="switch" id="r1_s" checked="checked" onclick="switchRect()" /><label for="r1_s">Rectangle belongs to the surface</label><br /> +<input type="radio" name="switch" id="r1_g1" onclick="switchRect()" /><label for="r1_g1">Rectangle belongs to the group #1</label><br /> +<input type="radio" name="switch" id="r1_g2" onclick="switchRect()" /><label for="r1_g2">Rectangle belongs to the group #2</label> +</p> +<div id="test"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_image1.html b/includes/js/dojox/gfx/tests/test_image1.html new file mode 100644 index 0000000..41b168e --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_image1.html @@ -0,0 +1,74 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing image</title> +<style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; +</style> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<!-- +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"></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 image = null; +var grid_size = 500; +var grid_step = 50; + +makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 800, 600); + for(var i = 0; i <= grid_size; i += grid_step){ + surface.createLine({x1: 0, x2: grid_size, y1: i, y2: i}).setStroke("black"); + surface.createLine({y1: 0, y2: grid_size, x1: i, x2: i}).setStroke("black"); + } + image = surface.createImage({width: 157, height: 53, src: "http://archive.dojotoolkit.org/nightly/checkout/util/resources/dojotoolkit.org/mini-dtk/images/logo.png"}); + //dojo.connect(image.getEventSource(), "onclick", function(){ alert("You didn't expect a download, did you?"); }); + image.connect("onclick", function(){ alert("You didn't expect a download, did you?"); }); +}; + +transformImage = function(){ + var radio = document.getElementsByName("switch"); + if(radio[0].checked){ + image.setTransform({}); + }else if(radio[1].checked){ + image.setTransform(dojox.gfx.matrix.translate(100,100)); + }else if(radio[2].checked){ + image.setTransform([dojox.gfx.matrix.translate(100,0), dojox.gfx.matrix.rotateg(45)]); + }else if(radio[3].checked){ + image.setTransform([dojox.gfx.matrix.translate(70,90), dojox.gfx.matrix.scale({x:1.5, y:0.5})]); + }else if(radio[4].checked){ + image.setTransform([dojox.gfx.matrix.rotateg(15), dojox.gfx.matrix.skewXg(-30)]); + } + var cb = document.getElementById("r2"); + if(cb.checked && !image.getShape().x){ + image.setShape({x: 100, y: 50}); + }else if(!cb.checked && image.getShape().x){ + image.setShape({x: 0, y: 0}); + } +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<h1>dojox.gfx Image tests</h1> +<p>Note: Silverlight doesn't allow downloading images when run from a file system. This demo should be run from a server.</p> +<p> +<input type="radio" name="switch" id="r1_reset" checked onclick="transformImage()" /><label for="r1_reset">Reset Image</label><br /> +<input type="radio" name="switch" id="r1_move" onclick="transformImage()" /><label for="r1_move">Move Image</label><br /> +<input type="radio" name="switch" id="r1_rotate" onclick="transformImage()" /><label for="r1_rotate">Rotate Image</label><br /> +<input type="radio" name="switch" id="r1_scale" onclick="transformImage()" /><label for="r1_scale">Scale Image</label><br /> +<input type="radio" name="switch" id="r1_skew" onclick="transformImage()" /><label for="r1_skew">Skew Image</label><br /> +</p> +<p><input type="checkbox" id="r2" onclick="transformImage()" /><label for="r2">Offset image by (100, 50)</label></p> +<div id="test"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_image2.html b/includes/js/dojox/gfx/tests/test_image2.html new file mode 100644 index 0000000..25f71c0 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_image2.html @@ -0,0 +1,50 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing image</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<!-- +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"></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 grid_size = 500, grid_step = 50; +var main = null, g = null, image = null, rect = null; + +makeShapes = function(){ + var s = dojox.gfx.createSurface("test", 800, 600); + for(var i = 0; i <= grid_size; i += grid_step){ + s.createLine({x1: 0, x2: grid_size, y1: i, y2: i}).setStroke("black"); + s.createLine({y1: 0, y2: grid_size, x1: i, x2: i}).setStroke("black"); + } + + main = s.createGroup(); + //rect = main.createRect({x: 0, y: 0, width: 100, height: 100}).setStroke("black").setFill(new dojo.Color([255, 0, 255, 0.5])); + image = main.createImage({width: 157, height: 53, src: "http://archive.dojotoolkit.org/nightly/checkout/util/resources/dojotoolkit.org/mini-dtk/images/logo.png"}); + // comment out the next string to see the problem + rect = main.createRect({x: 0, y: 0, width: 100, height: 100}).setStroke("black").setFill(new dojo.Color([255, 0, 255, 0.5])); + //g = main.createGroup(); + //g.createRect({x: 0, y: 0, width: 100, height: 100}).setStroke("black").setFill(new dojo.Color([255, 255, 0, 0.5])); +}; + +trans = function(){ + var x = 1; + main.setTransform([dojox.gfx.matrix.rotategAt(45, 200, 200), {dx: 200, dy: 200}]); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<p>Testing image:<br /><button onclick="trans();">Trans</button></p> +<p>Note: Silverlight doesn't allow downloading images when run from a file system. This demo should be run from a server.</p> +<div id="test"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_linearGradient.html b/includes/js/dojox/gfx/tests/test_linearGradient.html new file mode 100644 index 0000000..f18021a --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_linearGradient.html @@ -0,0 +1,80 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Dojo Unified 2D Graphics</title> +<style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; +</style> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<!-- +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"></script> +<script type="text/javascript" src="../../../dojo/_base/Color.js"></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("dojox.gfx"); +dojo.require("dojo.colors"); + +makeShapes = function(){ + var lg1 = { + type: "linear", + x1: 0, y1: 0, + x2: 300, y2: 0, + colors: [ + { offset: 0, color: [0, 0, 0, 0] }, + { offset: 0.1, color: "#000000" }, + { offset: 0.2, color: "red" }, + { offset: 0.3, color: "rgb(0,255,0)" }, + { offset: 0.4, color: "blue" }, + { offset: 0.5, color: "#ff0" }, + { offset: 0.6, color: [128] }, + { offset: 0.7, color: [128, 128, 64] }, + { offset: 1, color: [0, 255, 0, 0] } + ] + }; + var lg2 = { + type: "linear", + x1: 0, y1: 0, + x2: 300, y2: 0, + colors: [ + { offset: 0.2, color: "red" }, + { offset: 0.3, color: "yellow" } + ] + }; + var surface = dojox.gfx.createSurface(dojo.byId("grad"), 300, 300); + var group = surface.createGroup(); + var rect1 = surface.createRect({ + width: 300, + height: 100 + }); + rect1.setFill(lg1); + var rect2 = surface.createRect({ + y: 150, + width: 300, + height: 100 + }); + rect2.setFill(lg2); + group.add(rect1); + group.add(rect2); +}; +dojo.addOnLoad(makeShapes); +</script> +<style> +v:group { text-align: left; } +#grad { width: 300px; height: 300px; } +</style> +</head> +<body> +<h1>dojox.gfx Linear Gradient test</h1> +<div id="grad"></div> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_linestyle.html b/includes/js/dojox/gfx/tests/test_linestyle.html new file mode 100644 index 0000000..c4a422b --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_linestyle.html @@ -0,0 +1,45 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<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"></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="../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"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); + var styles = ["none", "Solid", "ShortDash", "ShortDot", "ShortDashDot", "ShortDashDotDot", + "Dot", "Dash", "LongDash", "DashDot", "LongDashDot", "LongDashDotDot"]; + var font = "normal normal normal 10pt Arial"; // CSS font style + var y_offset = dojox.gfx.normalizedLength("4pt"); + for(var i = 0; i < styles.length; ++i){ + var y = 20 + i * 20; + surface.createText({x: 140, y: y + y_offset, text: styles[i], align: "end"}).setFont(font).setFill("black"); + surface.createLine({x1: 150, y1: y, x2: 490, y2: y}).setStroke({style: styles[i], width: 3, cap: "round"}); + } +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> + <h1>dojox.gfx: Line style test</h1> +<div id="test"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_pattern.html b/includes/js/dojox/gfx/tests/test_pattern.html new file mode 100644 index 0000000..04d5c3d --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_pattern.html @@ -0,0 +1,44 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing pattern</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"></script> +<!--<script type="text/javascript" src="../matrix.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" src="../canvas.js"></script>--> +<script type="text/javascript"> +dojo.require("dojox.gfx"); + +makeShapes = function(){ + var pattern = { + type: "pattern", + x: 0, y: 0, width: 333, height: 80, + src: "http://dojotoolkit.org/files/downloadButton.gif" + }; + var ellipse = {cx: 400, cy: 200, rx: 350, ry: 150}; + var surface = dojox.gfx.createSurface("test", 800, 600); + surface.createEllipse(ellipse) + .setStroke({color: "blue", width: 1 }) + .setFill(pattern); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> + <h1>dojox.gfx Pattern test</h1> +<div id="test"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_poly.html b/includes/js/dojox/gfx/tests/test_poly.html new file mode 100644 index 0000000..7db70f1 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_poly.html @@ -0,0 +1,53 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing polyline and line transforms</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"></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("dojox.gfx"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 500, 500); + var line = surface.createLine({x1: 250, y1: 50, x2: 250, y2: 250}) + .setStroke({color: "blue"}) + ; + var poly = surface.createPolyline([{x: 250, y: 250}, {x: 300, y: 300}, {x: 250, y: 350}, {x: 200, y: 300}, {x: 250, y: 250}]) + .setStroke({color: "blue"}) + ; + var rotate = dojox.gfx.matrix.rotategAt(5, 250, 250); + //var rotate = dojox.gfx.matrix.rotategAt(0.4, 250, 250); + + window.setInterval(function() { + line.applyTransform(rotate); + poly.applyTransform(rotate); + }, + 100 + ); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<h1>dojox.gfx Polyline test</h1> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_resize.html b/includes/js/dojox/gfx/tests/test_resize.html new file mode 100644 index 0000000..3870ab0 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_resize.html @@ -0,0 +1,61 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing surface resizing</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"></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("dojox.gfx"); + +var surface; + +makeShapes = function(){ + surface = dojox.gfx.createSurface("test", 500, 500); + surface.createRect({width: 300, height: 300}).setFill([255, 0, 0, 0.3]).setStroke("red"); + surface.createRect({x: 200, y: 200, width: 300, height: 300}).setFill([0, 0, 255, 0.3]).setStroke("green"); +}; + +getDim = function(){ + var t = surface.getDimensions(); + alert("dimensions: " + t.width + " by " + t.height); +}; + +make500x500 = function(){ surface.setDimensions(500, 500); }; +make400x400 = function(){ surface.setDimensions(400, 400); }; +make300x300 = function(){ surface.setDimensions(300, 300); }; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<h1>Testing surface resizing</h1> +<!--<p><button onclick="makeShapes();">Go</button></p>--> +<p> + <button onclick="getDim();">getDimensions</button> + + <button onclick="make300x300();">Make 300x300</button> + + <button onclick="make400x400();">Make 400x400</button> + + <button onclick="make500x500();">Make 500x500</button> +</p> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_setPath.html b/includes/js/dojox/gfx/tests/test_setPath.html new file mode 100644 index 0000000..c8d7749 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_setPath.html @@ -0,0 +1,76 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> +<title>Testing setPath and curves</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"></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"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 500, 500); + // relative path with cubic beziers + surface + .createPath("m100 100 100 0 0 100c0 50-50 50-100 0s-50-100 0-100z") + .setStroke({color: "blue"}) + .setFill("#ddd") + .setTransform({dx: -50, dy: -50}) + ; + // absolute path with cubic bezier + surface + .createPath("M100 100 200 100 200 200C200 250 150 250 100 200S50 100 100 100z") + .setStroke({color: "blue"}) + .setFill("#ddd") + .setTransform({dx: 100, dy: -50}) + ; + // relative path with horizontal and vertical lines, and cubic beziers + surface + .createPath("m100 100h100v100c0 50-50 50-100 0s-50-100 0-100z") + .setStroke({color: "blue"}) + .setFill("#ddd") + .setTransform({dx: 250, dy: -50}) + ; + // relative path with quadratic beziers + surface + .createPath("m100 100 100 0 0 100q0 50-75-25t-25-75z") + .setStroke({color: "blue"}) + .setFill("#ddd") + .setTransform({dx: -50, dy: 150}) + ; + // absolute path with quadratic bezier + surface + .createPath("M100 100 200 100 200 200Q200 250 125 175T100 100z") + .setStroke({color: "blue"}) + .setFill("#ddd") + .setTransform({dx: 100, dy: 150}) + ; + // relative path with horizontal and vertical lines, and quadratic beziers + surface + .createPath("m100 100h100v100q0 50-75-25t-25-75z") + .setStroke({color: "blue"}) + .setFill("#ddd") + .setTransform({dx: 250, dy: 150}) + ; +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> + <h1>dojox.gfx setPath and curve test</h1> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_tbbox.html b/includes/js/dojox/gfx/tests/test_tbbox.html new file mode 100644 index 0000000..1fb1275 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_tbbox.html @@ -0,0 +1,117 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<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"></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("dojox.gfx"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); + var g1 = surface.createGroup(); + // make a checkerboard + for(var i = 0; i < 500; i += 100){ + for(var j = 0; j < 500; j += 100){ + if(i % 200 == j % 200) { + surface.createRect({ x: i, y: j }).setFill([255, 0, 0, 0.1]); + } + } + } + var r1 = g1.createRect({ x: 200, y: 200 }) + .setFill("green") + .setStroke({}) + //.setTransform(dojox.gfx.matrix.rotategAt(45, 250, 250)) + ; + var r2 = surface.createRect().setStroke({}) + .setFill({ type: "linear", to: { x: 50, y: 100 }, + colors: [{ offset: 0, color: "green" }, { offset: 0.5, color: "red" }, { offset: 1, color: "blue" }] }) + .setTransform({dx: 100, dy: 100}) + ; + var r3 = surface.createRect().setStroke({}) + .setFill({ type: "linear" }) + //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) + ; + var r4 = g1.createRect({}) + .setFill("blue") + //.setStroke({}) + //.setTransform(dojox.gfx.matrix.rotategAt(-45, 350, 250)) + .setTransform([dojox.gfx.matrix.rotategAt(-30, 350, 250), { dx: 300, dy: 200 }]) + ; + var p1 = g1.createPath() + .setStroke({}) + .moveTo( 300, 100 ) + .lineTo( 400, 200 ) + .lineTo( 400, 300 ) + .lineTo( 300, 400 ) + .curveTo( 400, 300, 400, 200, 300, 100 ) + //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) + .setTransform({}) + ; + var p2 = g1.createPath(p1.getShape()) + .setStroke({ color: "red", width: 2 }) + //.moveTo( 300, 100 ) + //.lineTo( 400, 200 ) + //.lineTo( 400, 300 ) + //.lineTo( 300, 400 ) + //.curveTo( 400, 300, 400, 200, 300, 100 ) + //.setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) + .setTransform({ dx: 100 }) + ; + var p3 = g1.createPath() + .setStroke({ color: "blue", width: 2 }) + .moveTo( 300, 100 ) + .setAbsoluteMode(false) + .lineTo ( 100, 100 ) + .lineTo ( 0, 100 ) + .lineTo ( -100, 100 ) + .curveTo( 100, -100, 100, -200, 0, -300 ) + //.setTransform(dojox.gfx.matrix.rotategAt(135, 250, 250)) + .setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) + ; + //g1.setTransform({ dx: 100 }); + g1.moveToFront(); + g1.setTransform(dojox.gfx.matrix.rotategAt(-15, 250, 250)); + //g1.setTransform([dojox.gfx.matrix.rotategAt(-45, 250, 250), dojox.gfx.matrix.scaleAt(0.5, 250, 250)]); + //g1.setTransform([dojox.gfx.matrix.scaleAt(2, 1, 250, 250), dojox.gfx.matrix.rotategAt(-45, 250, 250)]); + var a = p1.getTransformedBoundingBox(); + a.push(a[0]); + surface.createPolyline(a).setStroke("green"); + a = p2.getTransformedBoundingBox(); + a.push(a[0]); + surface.createPolyline(a).setStroke("green"); + a = p3.getTransformedBoundingBox(); + a.push(a[0]); + surface.createPolyline(a).setStroke("green"); +}; + +dojo.addOnLoad(makeShapes); + +</script> +<!-- +<style> +v:group { text-align: left; } +</style> +--> +</head> +<body> + <h1>dojox.gfx Transformation test</h1> +<div id="test"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_text.html b/includes/js/dojox/gfx/tests/test_text.html new file mode 100644 index 0000000..446156f --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_text.html @@ -0,0 +1,88 @@ +<html> +<head> +<title>Testing text</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"></script> +<!-- +<script type="text/javascript" src="../common.js"></script> +<script type="text/javascript" src="../shape.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 ROTATION = 30; + +var surface = null, t1, t2, t3, t4, t5; + +var placeAnchor = function(surface, x, y){ + surface.createLine({x1: x - 2, y1: y, x2: x + 2, y2: y}).setStroke("blue"); + surface.createLine({x1: x, y1: y - 2, x2: x, y2: y + 2}).setStroke("blue"); +}; + +var makeText = function(surface, text, font, fill, stroke){ + var t = surface.createText(text); + if(font) t.setFont(font); + if(fill) t.setFill(fill); + if(stroke) t.setStroke(stroke); + placeAnchor(surface, text.x, text.y); + return t; +}; + +makeShapes = function(){ + surface = dojox.gfx.createSurface("test", 500, 500); + var m = dojox.gfx.matrix; + surface.createLine({x1: 250, y1: 0, x2: 250, y2: 500}).setStroke("green"); + t1 = makeText(surface, {x: 250, y: 50, text: "Start", align: "start"}, + {family: "Times", size: "36pt", weight: "bold"}, "black", "red") + .setTransform(m.rotategAt(ROTATION, 250, 50)) + ; + t2 = makeText(surface, {x: 250, y: 100, text: "Middle", align: "middle"}, + {family: "Symbol", size: "24pt"}, "red", "black") + .setTransform(m.rotategAt(ROTATION, 250, 100)) + ; + t3 = makeText(surface, {x: 250, y: 150, text: "End", align: "end"}, + {family: "Helvetica", style: "italic", size: "18pt", rotated: true}, "#FF8000") + .setTransform(m.rotategAt(ROTATION, 250, 150)) + ; + t4 = makeText(surface, {x: 250, y: 200, text: "Define Shuffle Tiff", align: "middle", kerning: true}, + {family: "serif", size: "36pt"}, "black") + .setTransform(m.rotategAt(0, 250, 200)) + ; + t5 = makeText(surface, {x: 250, y: 250, text: "Define Shuffle Tiff", align: "middle", kerning: false}, + {family: "serif", size: "36pt"}, "black") + .setTransform(m.rotategAt(0, 250, 250)) + ; +}; + +getSizes = function(){ + var t = []; + dojo.forEach(["t1", "t2", "t3", "t4", "t5"], function(name){ + var node = eval("(" + name + ")"); + t.push(node.getShape().text + " = " + node.getTextWidth()); + }); + dojo.byId("sizes").innerHTML = t.join("<br/>"); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> + <h1>dojox.gfx Text test</h1> +<div id="test" style="width: 500px; height: 500px;"></div> +<div><button onclick="surface.clear();">Clear</button> <button onclick="getSizes();">Get sizes</button></div> +<p id="sizes"> </p> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_textpath.html b/includes/js/dojox/gfx/tests/test_textpath.html new file mode 100644 index 0000000..201b0b5 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_textpath.html @@ -0,0 +1,76 @@ +<html> +<head> +<title>Testing textpath</title> +<style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; +</style> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> +<!-- +<script type="text/javascript" src="../common.js"></script> +<script type="text/javascript" src="../shape.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"> +dojo.require("dojox.gfx"); + +var CPD = 30; + +var surface = null; + +var makeText = function(surface, text, font, fill, stroke){ + var t = surface.createText(text); + if(font) t.setFont(font); + if(fill) t.setFill(fill); + if(stroke) t.setStroke(stroke); + placeAnchor(surface, text.x, text.y); + return t; +}; + +makeShapes = function(){ + surface = dojox.gfx.createSurface("test", 500, 500); + var p = surface.createPath({}) + .setStroke("green") + .moveTo(0, 100) + .setAbsoluteMode(false) + .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) + .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) + .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) + .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) + .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) + ; + console.debug(p); + var t = surface.createTextPath({ + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. " + + "In malesuada ultricies velit. Vestibulum tempor odio vitae diam. " + + "Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam." + , align: "middle" + //, rotated: true + }) + //.setShape(p.shape) + .moveTo(0, 100) + .setAbsoluteMode(false) + .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) + .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) + .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) + .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) + .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) + .setFont({family: "times", size: "12pt"}) + .setFill("blue") + ; + console.debug(t); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> + <h1>dojox.gfx Text on a Path test</h1> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> diff --git a/includes/js/dojox/gfx/tests/test_transform.html b/includes/js/dojox/gfx/tests/test_transform.html new file mode 100644 index 0000000..abc50d5 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_transform.html @@ -0,0 +1,98 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<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"></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"); + +makeShapes = function(){ + var surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); + var g1 = surface.createGroup(); + // make a checkerboard + for(var i = 0; i < 500; i += 100){ + for(var j = 0; j < 500; j += 100){ + if(i % 200 == j % 200) { + surface.createRect({x: i, y: j}).setFill([255, 0, 0, 0.1]); + } + } + } + var r1 = g1.createShape({type: "rect", x: 200, y: 200}) + .setFill("green") + .setStroke({}) + //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) + ; + var r2 = surface.createShape({type: "rect"}).setStroke({}) + .setFill({type: "linear", to: {x: 50, y: 100}, + colors: [{offset: 0, color: "green"}, {offset: 0.5, color: "red"}, {offset: 1, color: "blue"}] }) + .setTransform({dx: 100, dy: 100}) + ; + var r3 = surface.createRect().setStroke({}) + .setFill({ type: "linear" }) + //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) + ; + var r4 = g1.createShape({type: "rect"}) + .setFill("blue") + //.setStroke({}) + //.setTransform(dojox.gfx.matrix.rotategAt(-45, 350, 250)) + .setTransform([dojox.gfx.matrix.rotategAt(-30, 350, 250), { dx: 300, dy: 200 }]) + ; + var p1 = g1.createShape({type: "path"}) + .setStroke({}) + .moveTo(300, 100) + .lineTo(400, 200) + .lineTo(400, 300) + .lineTo(300, 400) + .curveTo(400, 300, 400, 200, 300, 100) + //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) + .setTransform({}) + ; + var p2 = g1.createShape(p1.getShape()) + .setStroke({color: "red", width: 2}) + //.moveTo( 300, 100 ) + //.lineTo( 400, 200 ) + //.lineTo( 400, 300 ) + //.lineTo( 300, 400 ) + //.curveTo( 400, 300, 400, 200, 300, 100 ) + //.setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) + .setTransform({dx: 100}) + ; + var p3 = g1.createShape({type: "path"}) + .setStroke({color: "blue", width: 2}) + .moveTo(300, 100) + .setAbsoluteMode(false) + .lineTo ( 100, 100) + .lineTo ( 0, 100) + .lineTo (-100, 100) + .curveTo( 100, -100, 100, -200, 0, -300) + //.setTransform(dojox.gfx.matrix.rotategAt(135, 250, 250)) + .setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) + ; + //g1.setTransform({dx: 100}); + g1.moveToFront(); + g1.setTransform(dojox.gfx.matrix.rotategAt(-15, 250, 250)); + //g1.setTransform([dojox.gfx.matrix.rotategAt(-45, 250, 250), dojox.gfx.matrix.scaleAt(0.5, 250, 250)]); + //g1.setTransform([dojox.gfx.matrix.scaleAt(2, 1, 250, 250), dojox.gfx.matrix.rotategAt(-45, 250, 250)]); +}; + +dojo.addOnLoad(makeShapes); + +</script> +</head> +<body> +<h1>dojox.gfx Transform test</h1> +<div id="test"></div> +<p>That's all Folks!</p> +</body> +</html> |