Using GDI+ in ASP.NET Web Applications, Part II : Page 4
GDI+ is generally considered a Windows technology. However, some of the new GDI+ features make this technology an excellent choice for Web applications, enabling developers to generate images, graphs, diagrams, and much more on the fly.
by Markus Egger
Aug 7, 2003
Page 4 of 4
A Dynamic Diagram
A somewhat similar task is rendering a dynamic diagram. In Part 1 I showed how to use a Graphics path to render the familiar shape of a human (well, a stick-figure). Using the basic technique described in that article, you can create a control that renders a human-relationship chart. In fact, a similar charting mechanism is common in many corporate HR departments.
Often, it is very helpful to show those types of charts dynamically (and to keep them up-to-date) on the Web. Listing 3shows the implementation of such a diagram. Most of this code should already be familiar. After creating the drawing canvas, you generate a Graphics path that defines the shape of a person. The actual drawing of the person is handled by (you guessed it) the DrawPerson() method. This method is actually a bit more generic than its name suggests. It has the ability to draw any shape (Graphics path) onto any drawing surface at a defined position, as these are passed as parameters. Also, the method requires a fill color, as well as a label to be passed along.
The drawing code itself is quite simple. The method transforms the coordinate system to allow it to position the shape as desired. The trickiest part here is measuring the text dimensions to allow for the automated, centered position of the text below the shape. (For a more detailed explanation of font measurement code, see the drop cap sample discussed earlier in this article.) Another effect applied in this example is a gradient brush to fill the shape rather than using the plain color that is passed along. This makes the diagram look a lot more professional. The DrawPerson() method generates a new gradient brush that flows from white (at the top) to the color originally passed along (at the bottom).
In this example, you call the DrawPerson() method several times with a few hard-coded values. In real life, of course, a more dynamic approach is required.
Markus Egger is the President and Chief Software Architect of EPS Software Corp., located in Houston, Texas. He is also the founder of EPS Software Austria, located in Salzburg. He concentrates in consulting and development of custom software based on Microsoft technologies. Markus' passion lies with object-oriented technology. He is an international author and speaker, and is the publisher of CoDe Magazine. For the past 8 years, Markus has received the Microsoft MVP award, originally for Visual FoxPro, and now for C#. Several applications he has worked on (mostly as project manager) have received Microsoft Excellence Award nominations. A full bio can be found on the Web at www.eps-cs.com and www.MarkusEgger.com. You can reach Markus at