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:
Imports
System.Drawing
Imports
System.Drawing.Drawing2D
Imports
System.Drawing.Imaging
NOTE
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 Sub
Page_Load(ByVal sender
As Object, ByVal
e As System.EventArgs)
'Create pens and brushes
Dim redPen
As New
Pen(color.Red, 3)
Dim brush As
New HatchBrush(HatchStyle.Cross, Color.Red,
Color.Yello)
'Create a Bitmap object
Dim curBitmap
As New
Bitmap(200, 200)
'Create a Graphics FromImage (curBitmap);
'Draw and fill rectangle
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()
End Sub
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
%>
<script
language ="VB"
runat="server">
Private
Sub Page_Load(sender As
Object, e As
EventArgs)
Dim redPen As
New Pen(Color.Red, 3)
Dim brush As
New HatchBrush(HatchStyle.Cross, Color.Red,
color.Yellow)
Dim curBitmap As
New Bitmap(200, 200)
Dim g As
Graphics = Graphics.FromImage(curBitmap)
g.FillRectangle(brush, 50, 50, 100, 100)
g.DrawLine(Pens.WhiteSmoke, 10, 10, 180, 10)
g.DrawLine(Pens.White, 10, 10, 10, 180)
curBitmap.Save(Response.OutputStream, ImageFormat.Jpeg)
g.Dispose()
End
Sub
</script>
FIGURE 12.9: Drawing simple graphics objects on the Web
Now when we run our application, the output generated by Listing 12.2 or 12.3
should look like Figure 12.9.
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.
Dim redPen As
New Pen(Color.Red, 3)
Dim brush As
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.
Dim
curBitmap As 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:
Dim g As Graphcs = 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 gilled rectangle:
g.FillRectangle(brush, 50, 50, 100, 100)
g.DrawLine(Pens.WhiteSmoke, 10, 10, 180, 10)
g.DrawLine(Pens.White, 10, 10, 10, 180)
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()
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.OutStream, 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.
The Save method also allows us to save an image on a local physical hard drives. The following code saves the bitmap on the C:\\drive.
curBitmap.Save("C:\TempImg.gif", ImageFormat.Jpeg)