Basic Drawing in ASP.NET

One of the features of the .NET Framework is GDI+, a set of classes designed for drawing images. You can use GDI+ in a Windows or an ASP.NET application to create dynamic graphics. In a Windows application, the graphics you draw would be copied to a window for display. In ASP.NET, the graphics can be rendered right into the HTML stream and sent directly to the client browser.

In general, using GDI+ code to draw a graphic is slower than using a ready-made image file. However, GDI+ gives you much more freedom. For example, you can tailor your image to suit a particular purpose, incorporating information such as the date or current user name. You can also mingle text, shapes, and other bitmaps to create a complete picture.

You need to follow four basic steps when using GDI+. First, you have to create an in-memory bitmap. This is the drawing space where you’ll create your masterpiece. To create the bitmap, declare a new instance of the System.Drawing.Bitmap class. You must specify the height and width of the image in pixels. Be careful—don’t make the bitmap larger than required, or you’ll needlessly waste memory.

// Create an in-memory bitmap where you will draw the image.

// The Bitmap is 300 pixels wide and 50 pixels high.

Bitmap image = new Bitmap(300, 50);

The next step is to create a GDI+ graphics context for the image, which is represented by a System.Drawing.Graphics object. This object provides the methods that allow you to render content to the in-memory bitmap. To create a Graphics object from an existing Bitmap object, you just use the static Graphics.FromImage() method, as shown here:

Graphics g = Graphics.FromImage(image);

Now comes the interesting part. Using the methods of the Graphics class, you can draw text, shapes, and images on the bitmap. Below is a list of some of the most fundamental methods of the Graphics class. The methods that begin with the word Draw draw outlines, while the methods that begin with the word Fill draw solid regions. The only exceptions are the DrawString() method, which draws filled-in text using a font you specify, and the methods for copying bitmap images, such as DrawIcon() and DrawImage().

DrawArc() 

Draws an arc representing a portion of an ellipse specified by a pair of coordinates, a width, and a height (or some other combination of information, if you use one of the overloaded versions of this method).

DrawBezier() and DrawBeziers() 

Draws the infamous and attractive Bezier curve, which is defined by four control points.

DrawClosedCurve() 

Draws a curve and then closes it off by connecting the end points.

DrawCurve() 

Draws a curve (technically, a cardinal spline).

DrawEllipse() 

Draws an ellipse defined by a bounding rectangle specified by a pair of coordinates, a height, and a width.

DrawIcon() and DrawIconUnstreched() 

Draws the icon represented by an Icon object and (optionally) stretches it to fit a given rectangle.

DrawImage() and DrawImageUnscaled() 

Draws the image represented by an Image-derived object (such as a Bitmap object) and (optionally) stretches it to fit a given rectangle.

DrawLine() and DrawLines() 

Draws one or more lines. Each line connects the two points specified by a coordinate pair.

DrawPie() 

Draws a “piece of pie” shape defined by an ellipse specified by a coordinate pair, a width, a height, and 

two radial lines.

DrawPolygon() 

Draws a multisided polygon defined by an array of points.

DrawRectangle() and DrawRectangles() 

Draws one or more ordinary rectangles. Each rectangle is defined by a starting coordinate pair, a width, and a height.

DrawString() 

Draws a string of text in a given font. 

DrawPath() 

Draws a more complex shape that’s defined by the Path object.

FillClosedCurve() 

Draws a curve, closes it off by connecting the end points, and fills it.

FillEllipse() 

Fills the interior of an ellipse. FillPie() Fills the interior of a “piece of pie” shape.

FillPolygon() 

Fills the interior of a polygon. 

FillRectangle() and FillRectangles() 

Fills the interior of one or more rectangles. 

DrawPath() 

Fills the interior of a complex shape that’s defined by the Path object.

When calling the Graphics class methods, you need to specify several parameters to indicate the pixel coordinates for what you want to draw. For example, when drawing a rectangle, you need to specify the location of the top-left corner and its width and height. Here’s an example of how you might draw a solid rectangle in yellow:

// Draw a rectangle starting at location (0, 0)

// that is 300 pixels wide and 50 pixels high.

g.FillRectangle(Brushes.Yellow, 0, 0, 300, 50);

When measuring pixels, the point (0, 0) is the top-left corner of your image in (x, y) coordinates. The x coordinate increases as you go farther to the right, and the y coordinate increases as you go farther down. In the current example, the image is 300 pixels wide and 50 pixels high, which means the point (299, 49) is the bottom-right corner.

You’ll also notice that you need to specify either a Brush or a Pen object when you draw most content. (Both of these classes are defined in the System.Drawing namespace, alongside the Graphics class.) Methods that draw shape outlines require a Pen, while methods that draw filled-in shapes require a Brush. You can create your own custom Pen and Brush objects, but .NET provides an easier solution with the Brushes and Pens classes. These classes expose static properties that provide various Brushes and Pens for different colors. For example, Brushes.Yellow returns a Brush object that fills shapes using a solid yellow color. Once the image is complete, you can send it to the browser using the Image.Save() method. Conceptually, you “save” the image to the browser’s response stream. It then gets sent to the client and displayed in the browser.

// Render the image to the HTML output stream.

image.Save(Response.OutputStream,

System.Drawing.Imaging.ImageFormat.Gif);

Finally, you should explicitly release your image and graphics context when you’re finished, because both hold onto some unmanaged resources that might not be released right away if you don’t:

g.Dispose();

image.Dispose();