Home > Articles > Programming > Windows Programming

  • Print
  • + Share This
This chapter is from the book

Vector Graphics

The available vector drawing methods in the .NET Compact Framework are summarized in Table 15.12 (which appeared earlier in this chapter as Table 15.4 and is repeated here for convenience). As indicated in the table, some shapes are drawn with a pen, a drawing object used for lines. The .NET Compact Framework supports only pens that are 1 pixel wide (unless a programmer drills through to the native GDI drawing support). Other shapes in the table are drawn with a brush. We discussed the three methods for creating brushes earlier in this chapter. We cover the creation of pens in this discussion of vector graphics.

Table 15.12. System.Drawing.Graphics Methods for Vector Drawing

Method

Comment

DrawEllipse

Draws the outline of an ellipse using a pen.

DrawLine

Draws a straight line using a pen.

DrawPolygon

Draws the outline of a polygon using a pen.

DrawRectangle

Draws the outline of a rectangle using a pen.

FillEllipse

Fills the interior of an ellipse using a brush.

FillPolygon

Fills the interior of a polygon using a brush.

FillRectangle

Fills the interior of a rectangle using a brush.

The vector methods with names that start with Draw are those that use a pen to draw a line or a set of connected lines. The call to the DrawRetangle method, for example, draws the outline of a rectangle without touching the area inside the line. If you pass a blue pen to the DrawRectangle method, the result is the outline of a rectangle drawn with a blue line. The .NET Compact Framework supports four line-drawing methods.

Vector methods whose names start with Fill, on the other hand, use a brush to fill in the area bounded by the lines. For example, if you pass a red brush to the FillRectangle method, the result is a solid red rectangle. There are three such methods in the .NET Compact Framework for drawing ellipses, polygons, and rectangles.

The Draw and Fill methods complement each other. You could, for example, pass a red brush to the FillRectangle method and pass a blue pen to the DrawRectangle method using the same coordinates that you used to draw the red, filled rectangle. The result would be a two-colored rectangle, with a blue border and a red interior. This type of two-colored figure is natively available in the Windows API. Yet it seems apparent that few programs need to draw two-colored vector figures. That is, no doubt, a factor that contributed to the design of vector drawing in the .NET Framework and the .NET Compact Framework.

If a programmer is willing to do a bit of work, almost all vector drawing can be accomplished by calling two of these methods: DrawLine and FillPolygon. Each of the supported method names is of the form <verb><shape>. In the DrawLine method, for example, the verb is Draw and the shape is Line.

Creating Pens

Pens draw lines. The desktop supports a very sophisticated model for pens, including support for scalable geometric pens and nonscalable cosmetic pens. Pens on the desktop support features that allow you to fine-tune how an end of a line appears (rounded or squared) and even how the "elbow" joints are drawn. Pens can be wide or narrow, and even nonsolid pen colors are supported.

Wake up! In the .NET Compact Framework, pens are always 1 pixel wide. Pens provide a quick and simple way to define the color used to draw a line. From the seventeen properties supported for pens on the desktop, one has survived to the .NET Compact Framework: Color. And so it should come as no surprise that the one constructor for the Pen [29] class has a single parameter, a color as shown here.

Public Sub New( _
   ByVal color as Color)

There are three ways to define a pen in a .NET Compact Framework program because there are three ways to specify a color:

  1. With a system color

  2. With a named color

  3. With an RGB value

Earlier in this chapter, we described some of the details about the three ways to pick a color. We showed that each of the color-specifying approaches could be used to create a brush. Now the time has come to show the same thing for pens.

The following code fragment creates three pens. One pen is created using a system color; another pen is created using a named color; and finally, the third pen is created with an RGB value.

' Pen from a system color
Dim penCtrl As Pen =  New Pen(SystemColors.ControlDark)

' Pen from a named color
Dim penRed As Pen =  New Pen(Color.Red)

' Pen from an RGB value
Dim penBlue As Pen =  New Pen(Color.FromArgb(0,0,255))

A Game: JaspersDots

While writing this book, we watched Paul's son, Jasper, playing a paper-and-pencil game with one of his friends. They were having so much fun that we decided to write a .NET Compact Framework version. The game was Dots, which may be familiar to some readers. In this two-person game, players take turns connecting dots that have been drawn in a grid. A player is awarded a point for drawing the last line that creates a box. We named our version of the game JaspersDots, in honor of Paul's son. The playing board for this game is drawn entirely with the following vector graphic methods:

  • FillEllipse

  • FillRectangle

  • DrawLine

  • DrawRectangle

This program provides extensive use of various Graphics objects including colors, pens, and brushes.

Figure 15.6 shows the New Game dialog box. Each player enters a name and picks a color to use for claimed squares. The default board size is 8 × 8, which can be overridden in the New Game dialog box (the maximum board size is 11 × 9).

15fig06.gifFigure 15.6 New Game dialog box for the JaspersDots program

The New Game dialog box is a simple dialog box drawn with regular controls, with one small enhancement: This dialog handles a Paint event, which draws a selection rectangle around each player's currently selected color. The set of available colors is drawn with Panel controls, five for each player. Listing 15.8 shows the source code for the event handlers for responding to the Click event for each set of Panel controls and to the Paint event for the New Game dialog box.

Example 15.8. Paint and Click Event Handlers for the New Game Dialog Box

Private Sub panel1_Click( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles panel1.Click, panel2.Click, _
panel3.Click, panel4.Click, panel5.Click
   If sender Is panel1 Then
      iColor1 = 0
   ElseIf sender Is panel2 Then
      iColor1 = 1
   ElseIf sender Is panel3 Then
      iColor1 = 2
   ElseIf sender Is panel4 Then
      iColor1 = 3
   ElseIf sender Is panel5 Then
      iColor1 = 4
   End If

   ' Redraw the window.
   Invalidate()

End Sub

Private Sub panel2_Click( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles panelA.Click, panelB.Click, _
panelC.Click, panelD.Click, panelE.Click
   If sender Is panelA Then
      iColor2 = 0
   ElseIf sender Is panelB Then
      iColor2 = 1
   ElseIf sender Is panelC Then
      iColor2 = 2
   ElseIf sender Is panelD Then
      iColor2 = 3
   ElseIf sender Is panelE Then
      iColor2 = 4
   End If

   ' Redraw the window.
   Invalidate()

End Sub

Private Sub GameNewDialog_Paint( _
ByVal sender As Object, _
ByVal e As PaintEventArgs) Handles MyBase.Paint
   Dim panel As Panel = panel1

   '
   ' Player 1
   '
   ' What is the current player 1 panel?
   Select Case iColor1
      Case 0
         panel = panel1
      Case 1
         panel = panel2
      Case 2
         panel = panel3
      Case 3
         panel = panel4
      Case 4
         panel = panel5
   End Select
   clr1 = panel.BackColor

   ' Draw a rectangle around the color selected by player 1.
   Dim penBlack As Pen = New Pen(Color.Black)
   Dim rc As Rectangle = New _
         Rectangle(panel.Left - 3, _
         panel.Top - 3, _
         panel.Width + 5, _
         panel.Height + 5)
   e.Graphics.DrawRectangle(penBlack, rc)
   rc.Inflate(1, 1)
   e.Graphics.DrawRectangle(penBlack, rc)
   rc.Inflate(1, 1)
   e.Graphics.DrawRectangle(penBlack, rc)

   '
   ' Player 2
   '
   ' What is the current player 2 panel?
   Select Case iColor2
      Case 0
         panel = panelA
      Case 1
         panel = panelB
      Case 2
         panel = panelC
      Case 3
         panel = panelD
      Case 4
         panel = panelE
   End Select
   clr2 = panel.BackColor

   ' Draw a rectangle around the color selected by player 2.
   rc = New Rectangle(panel.Left - 3, _
         panel.Top - 3, _
         panel.Width + 5, _
         panel.Height + 5)
   e.Graphics.DrawRectangle(penBlack, rc)
   rc.Inflate(1, 1)
   e.Graphics.DrawRectangle(penBlack, rc)
   rc.Inflate(1, 1)
   e.Graphics.DrawRectangle(penBlack, rc)

End Sub

Figure 15.7 shows an example of the JaspersDots game in play. Each dot is drawn with a call to the FillEllipse method that is drawn in a bounding rectangle that is 4 pixels by 4 pixels. Players draw lines by clicking in the area between dots, and when a hit is detected a line is drawn by calling the DrawLine method. A player's claimed boxes are drawn with calls to the FillRectangle method.

15fig07.gifFigure 15.7 JaspersDots with a game under way

The JaspersDots program uses a custom control for the game window, our DotControl class. Listing 15.9 shows the source code to the DotControl class.

Example 15.9. The DotControl Class

Public Class DotControl
Inherits System.Windows.Forms.Control
   Private formParent As FormMain
   Private m_brPlayer1 As Brush
   Private m_brPlayer2 As Brush
   Private sq As Squares

   Sub New(ByVal form As FormMain)
      formParent = form

      formParent.Controls.Add(Me)
      Me.Left = 0
      Me.Top = 64
      Me.Width = 240
      Me.Height = 240

      sq = New Squares(Me)
   End Sub

   Public Function SetGridSize( _
   ByVal cxWidth As Integer, _
   ByVal cyHeight As Integer) As Boolean
      Return sq.SetGridSize(cxWidth, cyHeight)
   End Function

   Public Function SetPlayerColors( _
   ByVal clr1 As Color, _
   ByVal clr2 As Color) As Boolean
      m_brPlayer1 = New SolidBrush(clr1)
      m_brPlayer2 = New SolidBrush(clr2)

      Return sq.SetPlayerBrushes(m_brPlayer1, m_brPlayer2)
   End Function


   Private Sub DotControl_MouseDown( _
   ByVal sender As Object, _
   ByVal e As MouseEventArgs) Handles MyBase.MouseDown

      ' Check the result.
      Dim iResult As Integer = sq.HitTest(e.X, e.Y, _
         formParent.CurrentPlayer)

      ' Click on the available line, no score.
      If iResult = 1 Then
         formParent.NextPlayer()
      End If

      ' Click on the available line, score.
      If iResult = 2 Then
         Dim iScore1 As Integer = sq.GetScore(1)
         formParent.DisplayScore(1, iScore1)
         Dim iScore2 As Integer = sq.GetScore(2)
         formParent.DisplayScore(2, iScore2)

         Dim count As Integer = sq.Height * sq.Width
         If iScore1 + iScore2 = count Then
            Dim strResult As String = Nothing

            If iScore1 > iScore2 Then
               strResult = "Player 1 wins! "
            ElseIf iScore1 < iScore2 Then
               strResult = "Player 2 wins! "
            Else
               strResult = "Tie Game! "
            End If

            MessageBox.Show(strResult, "JaspersDots")
         End If
      End If

   End Sub

   Private Sub DotControl_Paint( _
   ByVal sender As Object, _
   ByVal e As PaintEventArgs) Handles MyBase.Paint
      ' Fill squares that players now own.
      sq.FillSquares(e.Graphics)

      ' Draw lines that players have selected.
      sq.DrawLines(e.Graphics)

      ' Draw dots in the grid.
      sq.DrawDots(e.Graphics)

   End Sub
End Class

The DotControl class handles two events: MouseDown and Paint. Most of the work for these events is done by a helper class named Squares. The source code for the Squares class appears in Listing 15.10.

Example 15.10. The Squares Class

Public Class Squares
   Public ReadOnly Property Width() As Integer
      Get
         Return cxWidth
      End Get
   End Property

   Public ReadOnly Property Height() As Integer
      Get
         Return cyHeight
      End Get
   End Property


   Private cxLeft As Integer = 15
   Private cyTop As Integer = 15
   Private cxWidth As Integer
   Private cyHeight As Integer
   Const cxLine As Integer = 20
   Const cyLine As Integer = 20
   Const cxyDelta As Integer = 5
   Private m_asq(,) As Square

   Private m_ctrlParent As Control
   Private m_brPlayer1 As Brush
   Private m_brPlayer2 As Brush
   Private m_brBackground As Brush = _
      New SolidBrush(SystemColors.Window)
   Private hbrBlack As Brush = New SolidBrush(Color.Black)
   Private ptTest As Point = New Point(0, 0)
   Dim rc As Rectangle = New Rectangle(0, 0, 0, 0)
   Private szDot As Size = New Size(4, 4)

   Dim penLine As Pen = New Pen(Color.Black)

   Public Sub New(ByVal ctrlParent As Control)
      m_ctrlParent = ctrlParent
   End Sub

   Public Function SetGridSize( _
   ByVal cxNewWidth As Integer, _
   ByVal cyNewHeight As Integer) As Boolean
      ' Temporary scratch space.
      Dim rcTemp As Rectangle = New Rectangle(0, 0, 0, 0)
      Dim ptTemp As Point = New Point(0, 0)
      Dim szTemp As Size = New Size(0, 0)

      ' Set up an array to track squares.
      cxWidth = cxNewWidth
      cyHeight = cyNewHeight
      m_asq = New Square(cxWidth, cyHeight) {}
      If m_asq Is Nothing Then
         Return False
      End If

      Dim x As Integer, y As Integer
      For x = 0 To cxWidth - 1
         For y = 0 To cyHeight - 1
            m_asq(x, y).iOwner = 0 ' No owner.
            Dim xLeft As Integer = cxLeft + x * cxLine
            Dim yTop As Integer = cyTop + y * cyLine
            Dim xRight As Integer = cxLeft + (x + 1) * cxLine
            Dim yBottom As Integer = cyTop + (y + 1) * cyLine
            Dim cxTopBottom As Integer = cxLine - (2 * cxyDelta)
            Dim cyTopBottom As Integer = cxyDelta * 2
            Dim cxLeftRight As Integer = cxyDelta * 2
            Dim cyLeftRight As Integer = cxLine - (2 * cxyDelta)

            ' Main rectangle.
            ptTemp.X = xLeft + 1
            ptTemp.Y = yTop + 1
            szTemp.Width = xRight - xLeft - 1
            szTemp.Height = yBottom - yTop - 1
            rcTemp.Location = ptTemp
            rcTemp.Size = szTemp
            m_asq(x, y).rcMain = rcTemp

            ' Top hit rectangle.
            m_asq(x, y).rcTop = _
                  New Rectangle(xLeft + cxyDelta, _
                  yTop - cxyDelta, _
                  cxTopBottom, _
                  cyTopBottom)
            m_asq(x, y).bTop = False

            ' Right hit rectangle.
            m_asq(x, y).rcRight = _
                  New Rectangle(xRight - cxyDelta, _
                  yTop + cxyDelta, _
                  cxLeftRight, _
                  cyLeftRight)
            m_asq(x, y).bRight = False

            ' Bottom hit rectangle.
            m_asq(x, y).rcBottom = _
                  New Rectangle(xLeft + cxyDelta, _
                  yBottom - cxyDelta, _
                  cxTopBottom, _
                  cyTopBottom)
            m_asq(x, y).bBottom = False

            ' Left hit rectangle.
            m_asq(x, y).rcLeft = _
                  New Rectangle(xLeft - cxyDelta, _
                  yTop + cxyDelta, _
                  cxLeftRight, _
                  cyLeftRight)
            m_asq(x, y).bLeft = False

         Next y
      Next x

      Return True
   End Function

   Public Function _
   SetPlayerBrushes( _
   ByVal br1 As Brush, _
   ByVal br2 As Brush)
      m_brPlayer1 = br1
      m_brPlayer2 = br2

      Return True
   End Function

   Public Sub FillOneSquare( _
   ByVal g As Graphics, _
   ByVal x As Integer, _
   ByVal y As Integer)
      Dim brCurrent As Brush = m_brBackground
      If m_asq(x, y).iOwner = 1 Then
         brCurrent = m_brPlayer1
      ElseIf m_asq(x, y).iOwner = 2 Then
         brCurrent = m_brPlayer2
      End If
      g.FillRectangle(brCurrent, m_asq(x, y).rcMain)
   End Sub

   ' FillSquares -- Fill owned squares with a player's color.
   Public Sub FillSquares(ByVal g As Graphics)
      Dim x As Integer, y As Integer
      For x = 0 To cxWidth - 1
         For y = 0 To cyHeight - 1
            If m_asq(x, y).iOwner <> 0 Then
               FillOneSquare(g, x, y)
            End If
         Next
      Next
   End Sub ' FillSquares()

   ' DrawOneLineSet
   '
   Public Sub DrawOneLineSet( _
   ByVal g As Graphics, _
   ByVal x As Integer, _
   ByVal y As Integer)
      Dim xLeft As Integer = cxLeft + x * cxLine
      Dim yTop As Integer = cyTop + y * cyLine
      Dim xRight As Integer = cxLeft + (x + 1) * cxLine
      Dim yBottom As Integer = cyTop + (y + 1) * cyLine

      If (m_asq(x, y).bTop) Then
         g.DrawLine(penLine, xLeft, yTop, xRight, yTop)
      End If
      If (m_asq(x, y).bRight) Then
         g.DrawLine(penLine, xRight, yTop, xRight, yBottom)
      End If
      If (m_asq(x, y).bBottom) Then
         g.DrawLine(penLine, xRight, yBottom, xLeft, yBottom)
      End If
      If (m_asq(x, y).bLeft) Then
         g.DrawLine(penLine, xLeft, yBottom, xLeft, yTop)
      End If
   End Sub ' DrawOneLineSet()

   ' DrawLines -- Draw lines that have been hit.
   '
   Public Sub DrawLines(ByVal g As Graphics)
      Dim x As Integer, y As Integer
      For x = 0 To cxWidth - 1
         For y = 0 To cyHeight - 1
            DrawOneLineSet(g, x, y)
         Next
      Next
   End Sub

   Public Sub DrawDots(ByVal g As Graphics)
      ' Draw an array of dots.
      Dim x As Integer, y As Integer
      For x = 0 To cxWidth
         For y = 0 To cyHeight
            ptTest.X = (cxLeft - 2) + x * cxLine
            ptTest.Y = (cyTop - 2) + y * cyLine
            rc.Location = ptTest
            rc.Size = szDot
            g.FillEllipse(hbrBlack, rc)
         Next
      Next
   End Sub ' DrawDots

   Public Enum Side
      None
      Left
      Top
      Right
      Bottom
   End Enum

   ' HitTest - Check whether a point hits a line.
   '
   ' Return values:
   ' 0 = miss.
   ' 1 = hit a line.
   ' 2 = hit and completed a square.
   Public Function HitTest( _
   ByVal xIn As Integer, _
   ByVal yIn As Integer, _
   ByVal iPlayer As Integer) As Integer
      Dim x As Integer, y As Integer
      Dim bHit1 As Boolean = False
      Dim bHit2 As Boolean = False
      Dim sideHit As Side = Side.None

      For x = 0 To cxWidth - 1
         For y = 0 To cyHeight - 1
            ' If already owned, do not check
            If m_asq(x, y).iOwner = 0 Then

               ' Check for lines against point.
               If m_asq(x, y).rcTop.Contains(xIn, yIn) Then
                  ' Line already hit?
                  If m_asq(x, y).bTop Then
                     Return 0
                  End If
                  ' If not, set line as hit.
                  sideHit = Side.Top
                  m_asq(x, y).bTop = True
               ElseIf m_asq(x, y).rcLeft.Contains(xIn, yIn) Then
                  ' Line already hit?
                  If m_asq(x, y).bLeft Then
                     Return 0
                  End If
                  ' If not, set line as hit.
                  sideHit = Side.Left
                  m_asq(x, y).bLeft = True
               ElseIf m_asq(x, y).rcRight.Contains(xIn, yIn) Then
                  ' Line already hit?
                  If m_asq(x, y).bRight Then
                     Return 0
                  End If
                  ' If not, set line as hit.
                  sideHit = Side.Right
                  m_asq(x, y).bRight = True
               ElseIf m_asq(x, y).rcBottom.Contains(xIn, yIn) Then
                  ' Line already hit?
                  If m_asq(x, y).bBottom Then
                     Return 0
                  End If
                  sideHit = Side.Bottom

                  ' If not, set line as hit.
                  m_asq(x, y).bBottom = True
               End If

               If (sideHit <> Side.None) Then
                  ' We hit a side.
                  bHit1 = True

                  ' Draw sides.
                  Dim g As Graphics = _
                     m_ctrlParent.CreateGraphics()
                  DrawOneLineSet(g, x, y)

                  ' Check whether the square is now complete.
                  ' We hit a line - check for hitting a square.
                  If (m_asq(x, y).bLeft And _
                        m_asq(x, y).bTop And _
                        m_asq(x, y).bRight And _
                        m_asq(x, y).bBottom) Then

                     ' Side is complete.
                     m_asq(x, y).iOwner = iPlayer
                     bHit2 = True

                     ' Fill the current square.
                     FillOneSquare(g, x, y)
                  End If

                  g.Dispose()
               End If
            End If
         Next y
      Next x

      If (bHit2) Then
         Return 2
      ElseIf (bHit1) Then
         Return 1
      Else
         Return 0
      End If

   End Function

   ' GetScore - Get the current score for player N.
   '
   Public Function GetScore( _
   ByVal iPlayer As Integer) As Integer
      Dim iScore As Integer = 0
      Dim x As Integer, y As Integer
      For x = 0 To cxWidth - 1
         For y = 0 To cyHeight - 1
            If m_asq(x, y).iOwner = iPlayer Then
               iScore = iScore + 1
            End If
         Next
      Next
      Return iScore
   End Function ' GetScore

End Class

Finally, we define two simple data structures—Square and Players—to hold details about individual game board squares and details about individual players, respectively. Listing 15.11 shows the code.

Example 15.11. The Square and Players Structures

Public Structure Square
   ' Coordinate of main rectangle
   Public rcMain As Rectangle
   Public iOwner As Integer

   ' Hit-rectangles of four edges of main rectangle
   Public rcTop As Rectangle
   Public bTop As Boolean
   Public rcRight As Rectangle
   Public bRight As Boolean
   Public rcBottom As Rectangle
   Public bBottom As Boolean
   Public rcLeft As Rectangle
   Public bLeft As Boolean
End Structure

Public Class Players
   Public strName1 As String
   Public strName2 As String
   Public bComputerPlaying As Boolean
   Public clr1 As System.Drawing.Color
   Public clr2 As System.Drawing.Color
End Class
  • + Share This
  • 🔖 Save To Your Account