Drawing Simple Graphics

As we discussed in the previous section, from the programming perspective, drawing on the Web is the same as drawing in Windows Forms, except for a few small differences. Drawing on the Web is often called "drawing on the fly" (or "graphics on the fly"). The code in Listing 12.4 draws various graphics objects, including lines, text, rectangles, and an ellipse. We create various pens, brushes, and a 300x300 bitmap. Then we create a Graphics object from this bitmap by calling Graphics.FromImage. Once we have a Graphics object, we can call its methods to draw and fill graphics shapes.

After creating the Graphics object, we set its smoothing mode to AntiAlias, create font and size objects, and call the DrawString, DrawLine, and DrawEllipse methods to draw text, lines, and an ellipse, respectively. At this point the bitmap we created contains these objects. The next step is to call the Save method and send the image to the browser, which we do with the Bitmap.Save method. Finally, we call the Dispose method to dispose of various objects.

Listing 12.4 Drawing graphics objects on the fly

// Construct brush and pens
Pen redPen = new Pen(Color.Red, 3);
HatchBrush brush =
 new HatchBrush(HatchStyle.Cross,
 Color.Yellow, Color.Green);
Pen hatchPen = new Pen(brush, 2);
Pen bluePen = new Pen(Color.Blue, 3);
Bitmap curBitmap = new Bitmap(300, 200);
Graphics g = Graphics.FromImage(curBitmap);
g.SmoothingMode = SmoothingMode.AntiAlias;
string testString =
 "Hello GDI+ On the Web";
Font verdana14 = new Font("Verdana", 14);
Font tahoma18 = new Font("Tahoma", 18);
int nChars;
int nLines;
// Call MeasureString to measure a string
SizeF sz = g.MeasureString(testString, verdana14);
string stringDetails =
 "Height: "+sz.Height.ToString()
 + ", Width: "+sz.Width.ToString();
g.DrawString(testString, verdana14,
 Brushes.Wheat, new PointF(40, 70));
g.DrawRectangle(new Pen(Color.Red, 2),
 40.0F, 70.0F, sz.Width, sz.Height);
sz = g.MeasureString("Ellipse", tahoma18,
 new SizeF(0.0F, 100.0F),
 new StringFormat(),
 out nChars, out nLines);
stringDetails =
 "Height: "+sz.Height.ToString()
 + ", Width: "+sz.Width.ToString()
 + ", Lines: "+nLines.ToString()
 + ", Chars: "+nChars.ToString();
 // Draw lines
g.DrawLine(Pens.WhiteSmoke, 10, 20, 180, 20);
g.DrawLine(Pens.White, 20, 10, 20, 180);
// Fill ellipse
g.FillEllipse(brush, 120, 100, 100, 100);
// Draw string
g.DrawString("Ellipse", tahoma18,
 Brushes.Beige, new PointF(40, 20));
// Draw ellipse
g.DrawEllipse( new Pen(Color.Yellow, 3),
 40, 20, sz.Width, sz.Height);
// Send output to the browser and
// dispose of objects
curBitmap.Save(this.Response.OutputStream,
 ImageFormat.Jpeg);
g.Dispose();

For all practical purposes, Listing 12.4 could be a Windows Forms application. The only new code required creates a Bitmap object and calls its Save method to send output to the browser. We use the DrawString method to draw text, the DrawLine method to draw lines, and the DrawRectangle method to draw rectanglesjust as in any other GDI+ application.

Figure 12.10 shows the output from Listing 12.4. The program draws lines, ellipses, and text.

Figure 12.10. Drawing various graphics objects

Note

For more on the Graphics class and its fill and draw methods, see Chapter 3.