Drawing Simple Graphics in GDI+

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 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

        'Contruct brush and pens
        Dim redPen As New Pen(Color.Red, 3)
        Dim brush As New HatchBrush(HatchStyle.Cross, Color.Yellow, Color.Green)

        Dim hatchPen As New Pen(brush, 2)
        Dim bluePen As New Pen(Color.Blue, 3)
        Dim curBitmap As New Bitmap(300, 200)
        Dim g As Graphics = Graphics.FromImage(curBitmap)
        g.SmoothingMode = SmoothingMode.AntiAlias
        Dim testString As String = "Hello GDI+ On the Web"
        Dim verdana14 As New Font("Verdana", 14)
        Dim Tahoma18__1 As New Font("Tahoma", 18)
        Dim nChars As Integer
        Dim nLines As Integer
        'Call MeasureString to measure a string
        Dim sz As SizeF = g.MeasureString(testString, verdana14)
        Dim testString As String = "Hello GDI+ On the Web"
        Dim verdana14 As New Font("Verdana", 14)
        Dim Tahoma18__1 As New Font("Tahoma", 18)
        Dim nChars As Integer
        Dim nLines As Integer
        'Call MeasureString to measure a string
        Dim sz As SizeF = g.MeasureString(testString, verdana14)
        Dim stringDetails As String = "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(), nChars, nLines)
        Dim stringDetails As String = "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(Me.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 rectangles-just 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.