<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" />
<script type="text/javascript">
// Dojo configuration
djConfig = {
isDebug: true
};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">dojo.require("dojo.debug.console");</script>
<!--<script type="text/javascript" src="../../src/gfx/common.js"></script>-->
<!--<script type="text/javascript" src="../../src/gfx/path.js"></script>-->
<!--<script type="text/javascript" src="../../src/gfx/vml.js"></script>-->
<!--<script type="text/javascript" src="../../src/gfx/svg.js"></script>-->
<script type="text/javascript">
dojo.require("dojo.gfx.*");
dojo.require("dojo.event.*");
dojo.require("dojo.lang.assert");
var gTestContainer = null;
var gTests = {};
function isEqual(foo, bar, prefix)
{
var flag = true;
if( foo != bar ) {
dojo.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 {
dojo.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';
var refCell = document.createElement('td');
var refHolder = document.createElement('div');
var refImg = document.createElement('img');
refImg.src = "images/placeholder.png";
// refImg.width = width;
// refImg.height = height;
refImg.id = testName + '_refimg';
var imgUrl = 'images/' + testName + '.png';
var errUrl = 'images/error.png';
var imgToLoad = new Image();
dojo.event.connect(imgToLoad, 'onload', function() {
refImg.src = imgUrl;
});
dojo.event.connect(imgToLoad, 'onerror', function() {
refImg.src = errUrl;
});
imgToLoad.src = imgUrl;
testCell.appendChild(testHolder);
testRow.appendChild(testCell);
refHolder.appendChild(refImg);
refCell.appendChild(refHolder);
testRow.appendChild(refCell);
gTestContainer.appendChild(testRow);
var descRow = document.createElement('tr');
var desc = document.createElement('td');
var ref = document.createElement('td');
desc.innerHTML = testDescription;
ref.innerHTML = testName + '.png';
descRow.appendChild(desc);
descRow.appendChild(ref);
gTestContainer.appendChild(descRow);
// see if there's a reference image available
// our surface is created from scratch
//testSurfaceHolder.width = width + "px";
//testSurfaceHolder.height = height + "px";
var surface = dojo.gfx.createSurface(testHolder, width, height);
return surface;
}
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.event.connect(red_rect.getNode(), "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.event.connect( blue_rect.getNode(), "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');
dojo.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([dojo.gfx.matrix.translate(100, 100), dojo.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.gfx.color.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([dojo.gfx.matrix.translate(100, 100), dojo.gfx.matrix.rotategAt(30, 0, 100), dojo.gfx.matrix.skewXgAt(-30, 0, 100)]);
// anonymous blue rectangle
surface.createRect(rect).setFill(new dojo.gfx.color.Color([0, 0, 255, 0.5]))
// skew it around LB point -30d, and move it to (100, 100)
.setTransform([dojo.gfx.matrix.translate(100, 100), dojo.gfx.matrix.skewXgAt(-30, 0, 100)]);
// anonymous yellow rectangle
surface.createRect(rect).setFill(new dojo.gfx.color.Color([255, 255, 0, 0.25]))
// move it to (100, 100)
.setTransform(dojo.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(dojo.gfx.matrix.identity);
dojo.debug( "blue_rect: rect with identity" );
group.createRect(rect).setFill([0, 255, 0, 0.5]).applyTransform(dojo.gfx.matrix.translate(30, 40));
dojo.debug( "lime_rect: translate(30,40) " );
group.createRect(rect).setFill([255, 0, 0, 0.5]).applyTransform(dojo.gfx.matrix.rotateg(30));
dojo.debug( "red_rect: rotate 30 degree counterclockwise " );
group.createRect(rect).setFill([0, 255, 255, 0.5])
.applyTransform(dojo.gfx.matrix.scale({x:1.5, y:0.5}))
.applyTransform(dojo.gfx.matrix.translate(-40, 220))
;
dojo.debug( "lightblue_rect: scale(1.5, 0.5)" );
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 0, 255, 0.5]).applyTransform(dojo.gfx.matrix.flipX);
dojo.debug( "pink_rect: flipX" );
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 255, 0, 0.5]).applyTransform(dojo.gfx.matrix.flipY);
dojo.debug( "yellow_rect: flipY" );
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([128, 0, 128, 0.5]).applyTransform(dojo.gfx.matrix.flipXY);
dojo.debug( "purple_rect: flipXY" );
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 128, 0, 0.5]).applyTransform(dojo.gfx.matrix.skewXg(15));
dojo.debug( "purple_rect: skewXg 15 degree" );
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([0, 0, 0, 0.5]).applyTransform(dojo.gfx.matrix.skewYg(50));
dojo.debug( "black_rect: skewXg 50 degree" );
// move
group
.setTransform({ xx: 1.5, yy: 0.5, dx: 100, dy: 100 })
.applyTransform(dojo.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 })
;
dojo.debug("attaching !");
// now attach it!
var ar = dojo.gfx.attachNode(red_rect.rawNode);
dojo.lang.assert( ar.rawNode == red_rect.rawNode );
// FIXME: more generic method to compare two dictionary?
dojo.debug("attach shape: ");
isEqual(ar.shape, red_rect.shape, "rect.shape");
dojo.debug("attach matrix: ");
isEqual(ar.matrix, red_rect.matrix, "rect.matrix");
dojo.debug("attach strokeStyle: ");
isEqual(ar.strokeStyle, red_rect.strokeStyle, "rect.strokeStyle");
dojo.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 = dojo.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('qbCurveTo', function(testName) {
var surface = getTestSurface(testName, 'qbcurveTo, smoothQBCurveTo' );
surface.createPath()
.moveTo(10, 15).qbCurveTo(50, 50, 100, 100).smoothQBCurveTo(150, 20)
.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
;
});
addTest('qbCurveTo2', function(testName) {
var surface = getTestSurface(testName, 'qbcurveTo, smoothQBCurveTo with relative' );
surface.createPath()
.moveTo(10, 20).qbCurveTo(50, 50, 100, 100)
.setAbsoluteMode(false).smoothQBCurveTo(50, -80)
.setAbsoluteMode(true).smoothQBCurveTo(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})
// ;
});
// TODO: test defines,pattern, path
addTest('pattern', function(testName) {
var surface = getTestSurface(testName, 'pattern fill');
var pat = new dojo.gfx.Pattern( {x:0, y:0, width:40, height:40, patternUnits:"userSpaceOnUse", viewBox:[0, 0, 10, 10] });
pat.createRect().setRect({width:25, height:20}).
setFill(new dojo.gfx.color.Color("red"));
surface.createRect(rect).setFill(pat).
setStroke({ color: new dojo.gfx.color.Color("blue"), width: 2}).
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 = dojo.gfx.attachNode(lgr.rawNode);
// FIXME: more generic method to compare two dictionary?
dojo.debug("attach_gradient!");
dojo.debug("attach shape: ");
isEqual(lgr.shape, ar.shape, "rect.shape");
dojo.debug("attach matrix: ");
isEqual(lgr.matrix, ar.matrix, "rect.matrix");
dojo.debug("attach strokeStyle: ");
isEqual(lgr.strokeStyle, ar.strokeStyle, "rect.strokeStyle");
dojo.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',
//'qbCurveTo',
//'qbCurveTo2',
'linearGradient',
'radialGradient'
//'pattern'
];
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>
<table>
<tbody id="testcontainer">
</tbody>
</table>
</body>
</html>