You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
9.5 KiB
329 lines
9.5 KiB
2 years ago
|
<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" 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( typeof(foo) == "string" ) {
|
||
|
|
return false;
|
||
|
|
} else 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';
|
||
|
|
|
||
|
|
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);
|
||
|
|
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;
|
||
|
|
|
||
|
|
function attachAssert(reference, attached, prefix)
|
||
|
|
{
|
||
|
|
dojo.debug(prefix+": check rawNode...");
|
||
|
|
dojo.lang.assert( reference.rawNode == attached.rawNode );
|
||
|
|
|
||
|
|
// FIXME: more generic method to compare two dictionary?
|
||
|
|
dojo.debug(prefix+": check shape... ");
|
||
|
|
isEqual(reference.shape, attached.shape, "shape");
|
||
|
|
dojo.debug(prefix+": check matrix... ");
|
||
|
|
isEqual(reference.matrix, attached.matrix, "matrix");
|
||
|
|
dojo.debug(prefix+": check strokeStyle...");
|
||
|
|
isEqual(reference.strokeStyle, attached.strokeStyle, "strokeStyle");
|
||
|
|
dojo.debug(prefix+": check fillStyle...");
|
||
|
|
isEqual(reference.fillStyle, attached.fillStyle, "fillStyle");
|
||
|
|
}
|
||
|
|
|
||
|
|
dojo.addOnLoad(function()
|
||
|
|
{
|
||
|
|
gTestContainer = dojo.byId('testcontainer');
|
||
|
|
var rect = { x: 0, y: 0, width: 100, height: 100 };
|
||
|
|
|
||
|
|
addTest('attach', function(testName){
|
||
|
|
var surface = getTestSurface(testName, 'Attach to an typical shape, skewed rect with color fill, color stroke');
|
||
|
|
var ref = 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 })
|
||
|
|
;
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach2', function(testName){
|
||
|
|
var surface = getTestSurface(testName, 'Attach to an line, with null fill, color stroke');
|
||
|
|
var ref = surface.createRect(rect)
|
||
|
|
.setStroke({color: "red", width: 1})
|
||
|
|
.setTransform({ dx:70, dy: 100 })
|
||
|
|
;
|
||
|
|
surface.createRect(rect)
|
||
|
|
.setFill([0, 255, 0, 0.6])
|
||
|
|
.setTransform({ dx:50, dy:80 })
|
||
|
|
;
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach3', function(testName){
|
||
|
|
var surface = getTestSurface(testName, 'Attach to an circle, with color fill, null stroke');
|
||
|
|
var circle = { cx: 130, cy: 130, r: 50 };
|
||
|
|
var ref = surface.createCircle(circle)
|
||
|
|
.setFill([0, 255, 0, 0.7])
|
||
|
|
.setTransform({ dx: 20, dy: 20 })
|
||
|
|
;
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach_line', function(testName){
|
||
|
|
var surface = getTestSurface(testName, 'Attach to an line, with color fill, color stroke');
|
||
|
|
var line = { x1: 0, y1:0, x2:80, y2:80 };
|
||
|
|
var ref = surface.createLine(line)
|
||
|
|
.setFill([0, 255, 0, 0.7])
|
||
|
|
.setStroke({color:[0, 0, 255, 0.7], width:3} )
|
||
|
|
.setTransform({ dx: 20, dy: 20 })
|
||
|
|
;
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach_image', function(testName){
|
||
|
|
var surface = getTestSurface(testName, 'Attach to an image, with color fill, color stroke');
|
||
|
|
var image = {
|
||
|
|
width: 96, height: 96,
|
||
|
|
src: "http://dojotoolkit.org/img/viewcvs.png"
|
||
|
|
};
|
||
|
|
var ref = surface.createImage(image)
|
||
|
|
.setFill([0, 255, 0, 0.7])
|
||
|
|
.setStroke({color:[0, 0, 255, 0.7], width:3} )
|
||
|
|
.setTransform({ dx: 20, dy: 20 })
|
||
|
|
;
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach_path', function(testName){
|
||
|
|
var surface = getTestSurface(testName, 'Attach to an path, with null fill, color stroke');
|
||
|
|
var ref = surface.createPath()
|
||
|
|
.moveTo(10, 20).lineTo(80, 150)
|
||
|
|
.setAbsoluteMode(false).lineTo(40, 0)
|
||
|
|
.setAbsoluteMode(true).lineTo(180, 100)
|
||
|
|
.setAbsoluteMode(true).curveTo(10, -80, -150, -10, -90, -10)
|
||
|
|
.closePath()
|
||
|
|
.setStroke({color:[0, 0, 255, 0.7], width:1} )
|
||
|
|
.setTransform({ dx: 120, dy: 120 })
|
||
|
|
;
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach_polyline', function(testName){
|
||
|
|
var surface = getTestSurface(testName, 'Attach to polyline, with color stroke, color fill');
|
||
|
|
var points = [ {x:70, y:15}, {x:40, y:70}, {x:100, y:80}, {x:130, y:-20}];
|
||
|
|
var ref = surface.createPolyline(points)
|
||
|
|
.setFill([0, 255, 0, 0.7])
|
||
|
|
.setStroke({color:[255, 0, 0, 0.7], width:1})
|
||
|
|
.setTransform({ dx: 50, dy: 20 })
|
||
|
|
;
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach_gradient', function(testName) {
|
||
|
|
var surface = getTestSurface(testName, 'attach gradient fill');
|
||
|
|
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 ref = surface.createRect(rect)
|
||
|
|
.setFill(lg)
|
||
|
|
.setTransform({ dx: 40, dy: 100 });
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach_pattern', function(testName) {
|
||
|
|
var surface = getTestSurface(testName, 'attach pattern fill');
|
||
|
|
var pattern = {
|
||
|
|
type: "pattern",
|
||
|
|
x: 0, y: 0, width: 120, height: 96,
|
||
|
|
src: "http://dojotoolkit.org/img/viewcvs.png"
|
||
|
|
};
|
||
|
|
|
||
|
|
var ellipse = {cx: 150, cy: 100, rx: 150, ry: 100};
|
||
|
|
var ref = surface.createEllipse(ellipse)
|
||
|
|
.setStroke({color: "blue", width: 1 })
|
||
|
|
.setFill(pattern)
|
||
|
|
;
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
addTest('attach_radial', function(testName) {
|
||
|
|
var surface = getTestSurface(testName, 'attach radial gradient fill');
|
||
|
|
var rg = {
|
||
|
|
type: "radial",
|
||
|
|
cx: 100, cy: 100, r: 100,
|
||
|
|
colors: [
|
||
|
|
{ offset: 0, color: "red" },
|
||
|
|
{ offset: 0.5, color: "green" },
|
||
|
|
{ offset: 1, color: "blue" }
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
var circle = {cx: 100, cy: 100, r: 100 };
|
||
|
|
var ref = surface.createCircle(circle)
|
||
|
|
.setStroke({color: "blue", width: 1 })
|
||
|
|
.setFill(rg)
|
||
|
|
.setTransform({dx: 40, dy: 30})
|
||
|
|
;
|
||
|
|
|
||
|
|
// now attach it!
|
||
|
|
var ar = dojo.gfx.attachNode(ref.rawNode);
|
||
|
|
attachAssert(ref, ar, testName);
|
||
|
|
});
|
||
|
|
|
||
|
|
var gTestsToRun = [
|
||
|
|
'attach',
|
||
|
|
'attach2',
|
||
|
|
'attach3',
|
||
|
|
'attach_line',
|
||
|
|
'attach_polyline',
|
||
|
|
'attach_image',
|
||
|
|
'attach_path',
|
||
|
|
'attach_gradient',
|
||
|
|
'attach_radial',
|
||
|
|
'attach_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>
|
||
|
|
|
||
|
|
|