Context Navigation

test_gfx.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 15.4 KB

Line
1	<html>
2	<head>
3	<title>Dojo Unified 2D Graphics</title>
4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
6	<!-- test styles -->
7	<style type="text/css">
8	@import "../../../dojo/resources/dojo.css";
9	@import "../../../dijit/tests/css/dijitTests.css";
10	td { border: 1px solid black; text-align: left; vertical-align: top; }
11	v:group { text-align: left; }
12	</style>
13
14	<!-- required: dojo.js -->
15	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script>
16
17	<script type="text/javascript">
18
19	require(['dojox/gfx', 'dojo/dom', 'dojo/domReady!'], function(gfx, dom){
20
21	var gTestContainer = null;
22	var gTests = {};
23
24	function isEqual(foo, bar, prefix){
25	var flag = true;
26	if(foo != bar ){
27	console.debug(prefix+":"+foo + "!=" + bar + " try dig into it" );
28	if( foo instanceof Array ) {
29	for( var i = 0; i< foo.length; i++ ) {
30	flag = isEqual(foo[i], bar[i], prefix+"["+i+"]") && flag;
31	}
32	flag = false;
33	} else {
34	for(var x in foo) {
35	if(bar[x] != undefined ) {
36	flag = isEqual(foo[x], bar[x], prefix+"."+x) && flag;
37	} else {
38	console.debug(prefix+":"+ x + " is undefined in bar" );
39	flag = false;
40	}
41	}
42	}
43	}
44	return flag;
45	}
46
47
48	function getTestSurface(testName, testDescription, width, height){
49	width = width ? width : 300;
50	height = height ? height : 300;
51
52	// Create a DOM node for the surface
53	var testRow = document.createElement('tr');
54	var testCell = document.createElement('td');
55	var testHolder = document.createElement('div');
56	testHolder.id = testName + '_holder';
57	testHolder.style.width = width;
58	testHolder.style.height = height;
59
60	testCell.appendChild(testHolder);
61	testRow.appendChild(testCell);
62	gTestContainer.appendChild(testRow);
63
64	var descRow = document.createElement('tr');
65	var desc = document.createElement('td');
66	desc.innerHTML = testDescription \|\| testName;
67	descRow.appendChild(desc);
68	gTestContainer.appendChild(descRow);
69
70	return dojox.gfx.createSurface(testHolder, width, height);
71	}
72
73	function addTest(testName, fn){
74	gTests[testName] = fn;
75	}
76
77	function runTest_nodebug(testName){
78	try {
79	var t = gTests[testName];
80	if (!t) {
81	return 'no test named ' + testName;
82	}
83	getTestSurface(testName).whenLoaded(function(surface){
84	t(testName, surface);
85	});
86	return null; // the success condition
87	} catch (e) {
88	return e.message;
89	}
90	}
91
92	function runTest_debug(testName){
93	var t = gTests[testName];
94	if (!t) {
95	return 'no test named ' + testName;
96	}
97	getTestSurface(testName).whenLoaded(function(surface){
98	t(testName, surface);
99	});
100	return null; // the success condition
101	}
102
103	var runTest = dojo.config.isDebug ? runTest_debug : runTest_nodebug;
104
105	gTestContainer = dom.byId('testcontainer');
106	var rect = { x: 0, y: 0, width: 100, height: 100 };
107
108	addTest('rect', function(testName, surface){
109	var red_rect = surface.createRect(rect);
110	red_rect.setFill([255, 0, 0, 0.5]);
111	red_rect.setStroke({color: "blue", width: 10, join: "round" });
112	red_rect.setTransform({dx: 100, dy: 100});
113	//dojo.connect(red_rect.getNode(), "onclick", function(){ alert("red"); });
114	red_rect.connect("onclick", function(){ alert("red"); });
115	});
116
117	addTest('straight_rect', function(testName, surface){
118	var blue_rect = surface.createRect(rect).setFill([0, 255, 0, 0.5]).setTransform({ dx: 100, dy: 100 });
119	//dojo.connect( blue_rect.getNode(), "onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
120	blue_rect.connect("onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
121	});
122
123	addTest('rotated_rect', function(testName, surface){
124	console.debug('rotated_rect');
125	// anonymous 30 degree CCW rotated green rectangle
126	surface.createRect({r: 20})
127	.setFill([0, 0, 255, 0.5])
128	// rotate it around its center and move to (100, 100)
129	.setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 0)])
130	;
131	});
132
133	addTest('skew_rect', function(testName, surface){
134	// anonymous red rectangle
135	surface.createRect(rect).setFill(new dojo.Color([255, 0, 0, 0.5]))
136	// skew it around LB point -30d, rotate it around LB point 30d, and move it to (100, 100)
137	.setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
138	// anonymous blue rectangle
139	surface.createRect(rect).setFill(new dojo.Color([0, 0, 255, 0.5]))
140	// skew it around LB point -30d, and move it to (100, 100)
141	.setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
142	// anonymous yellow rectangle
143	surface.createRect(rect).setFill(new dojo.Color([255, 255, 0, 0.25]))
144	// move it to (100, 100)
145	.setTransform(dojox.gfx.matrix.translate(100, 100));
146	});
147
148	addTest('matrix_rect', function(testName, surface){
149	var group = surface.createGroup();
150
151	var blue_rect = group.createRect(rect).setFill([0, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.identity);
152	console.debug( "blue_rect: rect with identity" );
153
154	group.createRect(rect).setFill([0, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.translate(30, 40));
155	console.debug( "lime_rect: translate(30,40) " );
156
157	group.createRect(rect).setFill([255, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.rotateg(-30));
158	console.debug( "red_rect: rotate 30 degree counterclockwise " );
159
160	group.createRect(rect).setFill([0, 255, 255, 0.5])
161	.applyTransform(dojox.gfx.matrix.scale({x:1.5, y:0.5}))
162	.applyTransform(dojox.gfx.matrix.translate(-40, 220))
163	;
164	console.debug( "lightblue_rect: scale(1.5, 0.5)" );
165
166	group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.flipX);
167	console.debug( "pink_rect: flipX" );
168
169	group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.flipY);
170	console.debug( "yellow_rect: flipY" );
171
172	group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([128, 0, 128, 0.5]).applyTransform(dojox.gfx.matrix.flipXY);
173	console.debug( "purple_rect: flipXY" );
174
175	group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 128, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewXg(-15));
176	console.debug( "purple_rect: skewXg 15 degree" );
177
178	group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([0, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewYg(-50));
179	console.debug( "black_rect: skewXg 50 degree" );
180
181	// move
182	group
183	.setTransform({ xx: 1.5, yy: 0.5, dx: 100, dy: 100 })
184	.applyTransform(dojox.gfx.matrix.rotateg(-30))
185	;
186	});
187
188	addTest('attach', function(testName, surface){
189	var red_rect = surface.createRect(rect)
190	.setShape({ width: 75 })
191	.setFill([255, 0, 0, 0.5])
192	.setStroke({ color: "blue", width: 1 })
193	.setTransform({ dx: 50, dy: 50, xx: 1, xy: 0.5, yx: 0.7, yy: 1.1 })
194	;
195
196	console.debug("attaching !");
197	// now attach it!
198	var ar = dojox.gfx.attachNode(red_rect.rawNode);
199	console.assert( ar.rawNode == red_rect.rawNode );
200
201	// FIXME: more generic method to compare two dictionary?
202	console.debug("attach shape: ");
203	isEqual(ar.shape, red_rect.shape, "rect.shape");
204	console.debug("attach matrix: ");
205	isEqual(ar.matrix, red_rect.matrix, "rect.matrix");
206	console.debug("attach strokeStyle: ");
207	isEqual(ar.strokeStyle, red_rect.strokeStyle, "rect.strokeStyle");
208	console.debug("attach fillStyle: ");
209	isEqual(ar.fillStyle, red_rect.fillStyle, "rect.fillStyle");
210	});
211
212	// test circle
213	addTest('circle', function(testName, surface){
214	var circle = { cx: 130, cy: 130, r: 50 };
215	surface.createCircle(circle).setFill([0, 255, 0, 0.5]).setTransform({ dx: 20, dy: 20 });
216	});
217
218	// test line
219	addTest('line', function(testName, surface){
220	var line = { x1: 20, y1: 20, x2: 100, y2: 120 };
221	surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1}).setTransform({ dx:70, dy: 100 });
222	});
223
224	// test ellipse
225	addTest('ellipse', function(testName, surface){
226	var ellipse = { cx: 50, cy: 80, rx: 50, ry: 80 };
227	surface.createEllipse(ellipse).setFill([0, 255, 255, 0.5]).setTransform({ dx: 30, dy: 70 });
228	});
229
230	// test polyline
231	addTest('polyline', function(testName, surface){
232	var points = [ {x: 10, y: 20}, {x: 40, y: 70}, {x: 120, y: 50}, {x: 90, y: 90} ];
233	surface.createPolyline(points).setFill(null).setStroke({ color: "blue", width: 1 }).setTransform({ dx: 15, dy: 0 });
234	});
235
236	// test polygon
237	addTest('polygon', function(testName, surface){
238	var points2 = [{x: 100, y: 0}, {x: 200, y: 40}, {x: 180, y: 150}, {x: 60, y: 170}, {x: 20, y: 100}];
239	surface.createPolyline(points2).setFill([0, 128, 255, 0.6]).setTransform({dx:30, dy: 20});
240	});
241
242	// test path: lineTo, moveTo, closePath
243	addTest('lineTo', function(testName, surface){
244	surface.createPath()
245	.moveTo(10, 20).lineTo(80, 150)
246	.setAbsoluteMode(false).lineTo(40, 0)
247	.setAbsoluteMode(true).lineTo(180, 100)
248	.setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
249	.closePath()
250	.setStroke({ color: "red", width: 1 })
251	.setFill(null)
252	.setTransform({ dx: 10, dy: 18 })
253	;
254	});
255
256	addTest('setPath', function(testName, surface){
257	surface.createPath()
258	.moveTo(10, 20).lineTo(80, 150)
259	.setAbsoluteMode(false).lineTo(40,0)
260	.setAbsoluteMode(true).lineTo(180, 100)
261	.setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
262	.curveTo(10, -80, -150, -10, -90, -10)
263	.closePath()
264	.setStroke({ color: "red", width: 1 })
265	.setFill(null)
266	.setTransform({ dx: 10, dy: 58 })
267	;
268
269	surface.createPath({ path: "M10,20 L80,150 l40,0 L180,100 l0,-30 l-30,-50 c10,-80 -150,-10 -90,-10 z" })
270	.setFill(null)
271	.setStroke({ color: "blue", width: 1 })
272	.setTransform({ dx: 50, dy: 78 })
273	;
274	});
275
276	// test arcTo
277	addTest('arcTo', function(testName, surface){
278	var m = dojox.gfx.matrix;
279	var g1 = surface.createGroup();
280	var g2 = g1.createGroup();
281
282	var rx = 100, ry = 60, xRotg = 30;
283	var startPoint = m.multiplyPoint(m.rotateg(xRotg), {x: -rx, y: 0 });
284	var endPoint = m.multiplyPoint(m.rotateg(xRotg), {x: 0, y: -ry});
285
286	var re1 = g1.createPath()
287	.moveTo(startPoint)
288	.arcTo(rx, ry, xRotg, true, false, endPoint)
289	.setStroke({color: "red"})
290	;
291	var ge1 = g1.createPath()
292	.moveTo(re1.getLastPosition())
293	.arcTo(rx, ry, xRotg, false, false, startPoint)
294	.setStroke({color: "blue"})
295	;
296	var re2 = g2.createPath()
297	.moveTo(startPoint)
298	.arcTo(rx, ry, xRotg, false, true, endPoint)
299	.setStroke({color: "red"})
300	;
301	var ge2 = g2.createPath()
302	.moveTo(re2.getLastPosition())
303	.arcTo(rx, ry, xRotg, true, true, startPoint)
304	.setStroke({color: "blue"})
305	;
306
307	g1.setTransform({dx: 150, dy: 150});
308	g2.setTransform({dx: 10, dy: 10});
309	});
310
311	// test path: curveTo, smoothCurveTo
312	addTest('curveTo', function(testName, surface) {
313	surface.createPath()
314	.moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100).smoothCurveTo(300, 300, 200, 200)
315	.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
316	;
317	});
318
319	// test path: curveTo, smoothCurveTo with relative.
320	addTest('curveTo2', function(testName, surface) {
321	surface.createPath()
322	.moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100)
323	.setAbsoluteMode(false).smoothCurveTo(150, 200, 50, 100)
324	.setAbsoluteMode(true).smoothCurveTo(50, 100, 10, 230)
325	.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
326	;
327	});
328
329	// test path: curveTo, smoothCurveTo with relative.
330	addTest('qCurveTo', function(testName, surface) {
331	surface.createPath()
332	.moveTo(10, 15).qCurveTo(50, 50, 100, 100).qSmoothCurveTo(150, 20)
333	.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
334	;
335	});
336
337	addTest('qCurveTo2', function(testName, surface) {
338	surface.createPath()
339	.moveTo(10, 20).qCurveTo(50, 50, 100, 100)
340	.setAbsoluteMode(false).qSmoothCurveTo(50, -80)
341	.setAbsoluteMode(true).qSmoothCurveTo(200, 80)
342	.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
343	;
344	});
345
346	// test defines, linearGradient
347	addTest('linearGradient', function(testName, surface) {
348	// this is an example to split the linearGradient from setFill:
349	var lg = {
350	type: "linear",
351	x1: 0, y1: 0, x2: 75, y2: 50,
352	colors: [
353	{ offset: 0, color: "#F60" },
354	{ offset: 1, color: "#FF6" }
355	]
356	};
357	surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });
358	});
359
360	// TODO: test radialGradient
361	addTest('radialGradient', function(testName, surface) {
362	// this is a total inline implementation compared with previous one.
363	var rg = {
364	type: "radial",
365	cx: 100, cy: 100, r: 100,
366	colors: [
367	{ offset: 0, color: "red" },
368	{ offset: 0.5, color: "green" },
369	{ offset: 1, color: "blue" }
370	]
371	};
372
373	surface.createCircle({cx: 100, cy: 100, r: 100})
374	.setStroke({})
375	.setFill(rg)
376	.setTransform({dx: 40, dy: 30})
377	;
378	// surface.createRect(rect)
379	// .setShape({width: 200})
380	// .setStroke({})
381	// .setFill(rg)
382	// .setTransform({dx: 40, dy: 30})
383	// ;
384	});
385
386	addTest('attach_gradient', function(testName, surface) {
387	// this is an example to split the linearGradient from setFill:
388	var lg = {
389	type: "linear",
390	x1: 0, y1: 0, x2: 75, y2: 50,
391	colors: [
392	{ offset: 0, color: "#F60" },
393	{ offset: 0.5, color: "#FAF" },
394	{ offset: 1, color: "#FF6" }
395	]
396	};
397
398	var lgr = surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });
399
400	var ar = dojox.gfx.attachNode(lgr.rawNode);
401	// FIXME: more generic method to compare two dictionary?
402	console.debug("attach_gradient!");
403
404	console.debug("attach shape: ");
405	isEqual(lgr.shape, ar.shape, "rect.shape");
406	console.debug("attach matrix: ");
407	isEqual(lgr.matrix, ar.matrix, "rect.matrix");
408	console.debug("attach strokeStyle: ");
409	isEqual(lgr.strokeStyle, ar.strokeStyle, "rect.strokeStyle");
410	console.debug("attach fillStyle: ");
411	isEqual(lgr.fillStyle.gradient, ar.fillStyle.gradient, "rect.fillStyle.gradient");
412	//isEqual(lgr.fillStyle.id, ar.fillStyle.id, "rect.fillStyle.id");
413	});
414
415	var gTestsToRun = [
416	'rect',
417	'straight_rect',
418	'rotated_rect',
419	'skew_rect',
420	'matrix_rect',
421	//'attach',
422	//'attach_gradient',
423	'circle',
424	'arcTo',
425	'line',
426	'ellipse',
427	'polyline',
428	'polygon',
429	'lineTo',
430	'setPath',
431	'curveTo',
432	'curveTo2',
433	'qCurveTo',
434	'qCurveTo2',
435	'linearGradient',
436	'radialGradient'
437	];
438
439	for (var i = 0; i < gTestsToRun.length; ++i) {
440	var testName = gTestsToRun[i];
441	var err = runTest(testName);
442	if (err) {
443	getTestSurface(testName, testName + ' FAILED (' + err + ')');
444	}
445	}
446
447	}); // end onload
448	</script>
449	</head>
450	<body>
451	<h1 class="testTitle">dojox.gfx tests</h1>
452	<table>
453	<tbody id="testcontainer">
454	</tbody>
455	</table>
456	</body>
457	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojox/gfx/tests/test_gfx.html

Download in other formats: