Points, Sizes and Rectangles

A fundamental concept for any graphics system is the way that positions or sizes are represented. GDI+ uses specialist objects that enable you to specify a point in two dimensional space, a size or a complete rectangle having both location and size.

Points

Coordinates in GDI+ are represented by the Point or PointF structures. These both contain an X and Y member that hold the coordinates for the two axes of the drawing surface. Point structures store the values as integers and PointF structures store them as floating point values. Remember that GDI+ uses floating point values internally so the values in the Point structure will be interpreted by the drawing system as a float or a single for the purpose of creating the graphics.

Some drawing methods, such as DrawLine, are overloaded to accept either X,Y coordinate values or two Point or PointF structures as parameters. The following listing shows two line drawing directives that are functionally identical.

myGraphics.DrawLine(Pens.Black,10,20,210,50);

 

Point p1=new Point(10,20);

Point p2=new Point(210,50);

myGraphics.DrawLine(Pens.Black,p1,p2);

myGraphics.DrawLine(Pens.Black,10,20,210,50)

 

Dim p1 As new Point(10,20)

Dim p2 As new Point(210,50)

myGraphics.DrawLine(Pens.Black,p1,p2)

You can see that the first line takes discrete values and the second directive takes points that were created earlier.

Sizes

Sizes in GDI+ are specified by Width and Height. Just like the Point and PointF, the size comes in two flavours, Size and SizeF with the first storing Width and Height as integers and the second storing them as floating point float or Single values.

Rectangles

Shapes drawn on GDI+ surfaces, such as ellipses or rectangles, are defined by their location which corresponds to the top-left corner of the shape and their width and height defined by a size structure.  These two entities, Location and Size are most often used to create a single rectangle definition. Continuing the pattern seen in Points and Sizes, the rectangle too has integer and floating-point versions Rectangle and RectangleF.

Internally, the Rectangle stores the X and Y position of the top-left corner, the Width and the Height. These may be read or manipulated as Location and Size. The Rectangle will also return useful values such as Left, Right, Top and Bottom as individual values.

The code shown in listing 2 creates the effect shown in Figure 1.

Figure 1. Check it out.

Listing 1

    private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

    {

      //Divide the client rectangle up..

      SizeF smallSquareSize=new SizeF(0.1f*this.ClientRectangle.Width,

                                      0.1f*this.ClientRectangle.Height);

      //create the brush

      SolidBrush sb=new SolidBrush(Color.White);

      //toggle between black and white squares

      bool toggle=false;

      //ten steps down

      for(int y=0; y<10; y++)

      {

        //ten steps across

        for(int x=0; x<10; x++)

        {

          //select the brush colour

          if(toggle)

            sb.Color=Color.Black;

          else

            sb.Color=Color.White;

          //create a rectangle

          RectangleF rc=new RectangleF( x*smallSquareSize.Width,

                          y*smallSquareSize.Height,

                          smallSquareSize.Width,

                          smallSquareSize.Height);

          //fill it with the colour

          e.Graphics.FillRectangle(sb,rc);

          //swop the colour

          toggle=!toggle;

        }

        //swop the colour at the line ends

        toggle=!toggle;

      }

      //recycle the brush

      sb.Dispose();

    }

 

    Private Sub Form1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint

     'Divide the client rectangle up..

     Dim smallSquareSize As New SizeF(0.1F * Me.ClientRectangle.Width, _

                                      0.1F * Me.ClientRectangle.Height)

     'create the brush

     Dim sb As New SolidBrush(Color.White)

     'toggle between black and white squares

     Dim toggle As Boolean = False

     'ten steps down

     Dim y As Integer

     For y = 0 To 9

      'ten steps across

      Dim x As Integer

      For x = 0 To 9

         'select the brush colour

         If toggle Then

          sb.Color = Color.Black

         Else

          sb.Color = Color.White

         End If 'create a rectangle

         Dim rc As New RectangleF(x * smallSquareSize.Width, _

                                  y * smallSquareSize.Height, _

                                  smallSquareSize.Width, _

                                  smallSquareSize.Height)

         'fill it with the colour

         e.Graphics.FillRectangle(sb, rc)

         'swop the colour

         toggle = Not toggle

      Next x

      'swop the colour at the line ends

      toggle = Not toggle

     Next y

     'recycle the brush

     sb.Dispose()

    End Sub 'Form1_Paint

Using these structures

GDI+ methods use Point, PointF, Size, SizeF, Rectangle and RectangleF structures everywhere. You will find that arrays of Point structures can be used to define polygons, rectangles are used for shapes, boundaries of objects or defining where you can draw. These structures also interact to do cool stuff too.

Rectangle and RectangleF enable you to check if a certain point is inside the rectangle using the Contains method. This is useful for hit-testing objects. You can obtain the Union of a two rectangles, this is a larger rectangle that covers both parts of the union. You can find out which part of two rectangles overlap using the Intersect method or if it overlaps another using the  IntersectsWith method. A rectangle may be moved bodily using the Offset method or made larger or smaller with the Inflate method, inflating with a negative number deflates the rectangle.

Keep an eye open for nifty uses of points, sizes and rectangles throughout this series of articles.

Return to the Beginners Guide main index.