Home > Designing > dojo.gfx in detail

dojo.gfx in detail

dojogfx

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:

architecture

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:

  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:

PLAIN TEXT

JAVASCRIPT:

  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.