Webmasters Gallery

Matthew Russell wrote the most in depth article on dojo.gfx that I have seen. It appeared in Linux Journal and has now been re-printed online.

The article runs the gamut. It starts off discussing the place that dojo.gfx lives in the Dojo world:

Then we learn about how gfx abstracts on top of the various underlying graphics subsystems that various browsers expose (Canvas, SVG, VML, Flash, Silverlight, …). gfx will choose for you automatically, or you can ask to use a particular rendered:

PLAIN TEXT

HTML:

2. <script type="text/javascript"

3.     djConfig="gfxRenderer:’canvas’"

4. src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js">

5. </script>

Then we delve into the drawing API itself:

PLAIN TEXT

JAVASCRIPT:

2. dojo.addOnLoad(function() {

3. var node = dojo.byId("surface");

4. var surface = dojox.gfx.createSurface(node, 600, 600);

6.     rect1 = surface.createRect({

7. /* x and y default to (0,0) */

8.         width : 200,

9.         height:200

10. })

11.     .setFill("red")

12.     .setTransform([

13.         dojox.gfx.matrix.translate(200,200),

14.         dojox.gfx.matrix.rotategAt(45,100,100)

15. ])

16.     ;

17. });

From here Matthew covers topics such as manipulating groups, and how you can make areas moveable, and the 2D charting API.