Your First Graphics Web Application

Now it's time to use GDI+ in Web applications. First we'll write some code, and then we'll discuss how GDI+ Web applications work.

In this application we will draw a few simple graphics objects, including lines and rectangles. First we create a Web Application using Visual Studio .NET. After creating a Web application, we need to add a GDI+-related namespace to the project. We import namespaces as follows:

using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;

Note

See Chapter 1 to learn more about GDI+ namespaces and classes. If you use Visual Studio .NET to create your Web application, the wizard will add System and System.Drawing namespace references automatically.

Now we add code to draw graphics objects. Listing 12.2 draws two lines and a rectangle. You can write the code on the page-load event handler or on a button click event handler.

Listing 12.2 Drawing simple graphics objects on the Web

private void Page_Load(object sender,
 System.EventArgs e)
 {
 // Create pens and brushes
 Pen redPen = new Pen(Color.Red, 3);
 HatchBrush brush =
 new HatchBrush(HatchStyle.Cross,
 Color.Red, Color.Yellow);
 // Create a Bitmap object
 Bitmap curBitmap = new Bitmap(200, 200);
 // Create a Graphics object from Bitmap
 Graphics g = Graphics.FromImage(curBitmap);
 // Draw and fill rectangles
 g.FillRectangle(brush, 50, 50, 100, 100);
 g.DrawLine(Pens.WhiteSmoke, 10, 10, 180, 10);
 g.DrawLine(Pens.White, 10, 10, 10, 180);
 // Save the Bitmap object and send response to the
 // browser
 curBitmap.Save(Response.OutputStream,
 ImageFormat.Jpeg);
 // Dispose of Graphics and Bitmap objects
 curBitmap.Dispose();
 g.Dispose();
 }

We will discuss this code in more detail in the following section. If you are using a text editor to write your applications, you can write the code given in Listing 12.3.

Listing 12.3 Using a text editor to draw simple graphics

<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="System.Drawing.Imaging" %>

Now when we run our application, the output generated by Listing 12.2 or 12.3 should look like Figure 12.9.

Figure 12.9. Drawing simple graphics objects on the Web

12.2.1 How Does It Work?

Let's break down the code shown in Listings 12.2 and 12.3. We begin by importing GDI+-related namespaces in the application: System, System.Drawing, System.Drawing.Drawing2D, and System.Drawing.Drawing.Imaging. If we were using Visual Studio .NET, we would simply use the using directive followed by the namespace name.

Next we have a Page_Load event, which is executed when a Web page is loaded. We create a pen and brush using the Pen and HatchBrush classes.

Pen redPen = new Pen(Color.Red, 3);
HatchBrush brush = new HatchBrush(HatchStyle.Cross,
Color.Red, Color.Yellow);

One important limitation of Web applications is Web browser capability. A Web browser can display only certain objects. For example, all graphics objects in a Web browser will be displayed as images. So before a Web browser can display graphics objects, we need to convert them into images that can be displayed by the browser. Our next step, then, is to create a Bitmap object. The following line creates a 200x200 Bitmap object.

Bitmap curBitmap = new Bitmap(200, 200);

You already know that the Graphics object functions as a canvas and provides members to draw lines, shapes, and images. Now we need to create a Graphics object from the bitmap:

Graphics g = Graphics.FromImage(curBitmap);

Once we have a Graphics object, we can draw shapes, lines, and images. In the following code we use the DrawLine and FillRectangle methods to draw lines and a filled rectangle:

g.FillRectangle(brush, 50, 50, 100, 100);
g.DrawLine(Pens.WhiteSmoke, 10, 10, 180, 10);
g.DrawLine(Pens.White, 10, 10, 10, 180);

If you don't know how draw and fill methods work, you may want to look again at Chapter 3.

We're almost done. So far we have created Bitmap and Graphics objects, and we have drawn lines and a rectangle. Because a Web browser can display only images (not pixels), we need to convert the bitmap into an image. The Save method of the Bitmap object does the trick for us. The following line is responsible for rendering a bitmap and sending it to the browser:

curBitmap.Save(Response.OutputStream,
 ImageFormat.Jpeg);

Finally, we dispose of the Bitmap and Graphics objects:

curBitmap.Dispose();
g.Dispose();

12.2.2 Understanding the Save Method

The Bitmap class is inherited from the Image class, which defines the Save method. This method saves an image to the specified Stream object in the specified format. For example, in our code the Save method takes the following two arguments: Response.OutputStream and ImageFormat:

curBitmap.Save(Response.OutputStream,
 ImageFormat.Jpeg);

The Response property of the Page class returns the HttpResponse object associated with the page, which allows us to send HTTP response data to the client and contains information about the response. The OutputStream property of HttpResponse enables binary output to the outgoing HTTP content body. In other words, Page.Response.OutputStream sends the images to the browser in a compatible format. The second parameter is of ImageFormat enumeration type and specifies the format of the image. ImageFormat is discussed in more detail in Chapter 7 (see Table 7.4).

The Save method also allows us to save an image on a local physical hard drive. The following code saves the bitmap on the C:\ drive.

curBitmap.Save("C:\TempImg.gif",
 ImageFormat.Jpeg);