Dojo, Now with Drawing Tools!

Internalizing Dojo's “write once, deploy anywhere” philosophy, Dojo's gfx (pronounced “g-f-x” or sometimes “graphics”) library packs a powerful 2-D drawing API that's capable of plugging in to an arbitrary renderer. Out of the box, it works with Canvas, Silverlight, SVG and VML, so regardless of which browser your application is ultimately viewed within, gfx has you covered.
Manipulating Groups

It won't be long before you'll find that it's far more convenient to transform entire groups of objects instead of applying individual transforms to each object in the group. Let's consider the task of drawing a simple arrow that is nothing more than a line with a triangle on the end of it. Although you could use a path to construct the entire arrow, take a look at how groups can be useful by combining the results from the createLine function and the createPath function (Listing 3).

Attempting to calculate the three points for each of the arrows without the benefit of rotation quickly demonstrates just how laborious high-school geometry really can be; perhaps putting it to work with gfx makes it at least a little more interesting.

Figure 7. It's generally a bit easier to think in terms of objects that have been rotated than trying to determine exact coordinates for shapes that don't fit nicely into a simple perpendicular frame of reference.

Drag-and-Droppable Dominoes

Because it's so common to want to interact with graphics, Dojo's gfx library has gone a long way to do most of the legwork for you in this use case as well. To wrap up some aspects of drawing, let's put together a little demonstration that draws a domino on the screen and then add drag-and-drop capabilities to it. As you're about to see, the laborious part of the effort is actually drawing something interesting enough that you'd actually want to drag and drop it. The actual mechanics of making it drag-and-droppable amounts to one whole line of code (Listing 4—note that the full code for Listing 4 is available on LJ's FTP site; see Resources).



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Please post missing file 10308.tgz

Anonymous's picture

When I try this link in the resources:

It's a bad link. I found this

10042.tgz -- Web 2.0 Development with the Google Web Toolkit
Federico Kereki

10308.tgz -- Dojo, Now with Drawing Tools!
Matthew Russell

but this file is missing: 10308.tgz

very interesting, good for

Anonymous's picture

very interesting, good for gfx beginner just like me. thanks!

where is the download for listing 4

forestial's picture

Trying to download the code from listing 4 from the ftp link in Resources. I get a "550 Failed to change directory" error.

Tried browsing the ftp site, but there seems to be nothing there for this issue (178).