Home > Designing > dojo.gfx in detail

dojo.gfx in detail


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:



  1. <script type="text/javascript"

  2.     djConfig="gfxRenderer:’canvas’"

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

  4. </script>

Then we delve into the drawing API itself:



  1. dojo.addOnLoad(function() {

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

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

  4.     rect1 = surface.createRect({

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

  6.         width : 200,

  7.         height:200

  8. })

  9.     .setFill("red")

  10.     .setTransform([

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

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

  13. ])

  14.     ;

  15. });

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

Categories: Designing Tags: ,
  1. No comments yet.
  1. No trackbacks yet.