Stroking and filling.

The technique of drawing lines on the Graphics surface is called stroking. A Pen object will follow a line, drawing as it goes, to create the outline shape of the object being drawn. In the case of an open figure, one who's end point does not coincide with it's start point, the line will have distinct ends. For a closed figure, the stroke will be drawn from the start point and continue all around the figure until it reaches the start again and closes the shape.

For enclosed shapes such as rectangles, ellipses or polygons made from arrays of coordinates, the area surrounded by the defined outline can be filled with a colour, a complex colour containing many shades or even a picture. Filling is done using a Brush object.

The GDI+ Graphics object has a set of methods which are specially designed to enable you to stroke or fill lines and shapes. These methods are:

  • DrawLine. Draws a single line from one coordinate to another.

  • DrawLines. Draws a series of lines defined in an array of X,Y coordinates.

  • DrawRectangle. Strokes a rectangle specified by position, width and height.

  • DrawRectangles. Strokes an array of rectangles one by one.

  • FillRectangle. Fills a rectangle specified by position, width and height.

  • FillRectangles. Fills an array of rectangles one by one.

  • DrawEllipse. Strokes an ellipse defined by position, width and height;

  • FillEllipse. Fills an ellipse specified by position, width and height.

  • DrawPolygon. Strokes a polygonal shape defined in an array of X,Y coordinates.

  • FillPolygon. Fills a polygonal shape defined in an array of X,Y coordinates.

  • DrawCurve. Strokes a cardinal spline defined in an array of X,Y coordinates.

  • DrawClosedCurve. Strokes a closed Cardinal Spline defined in an array of X,Y coordinates.

  • DrawBezier. Strokes a Bezier curve defined as X,Y coordinates for the nodes and control points.

  • DrawPath. Strokes a Path object. A Path is a collection of lines and shapes in one easy-to-use container.

  • FillPath. Fills a Path object.

  • DrawArc. Strokes an arc segment. An arc is a section of an ellipse.

  • DrawPie. Strokes a pie-shaped area.

  • FillPie. Fills a pie-shaped area.

  • FillRegion. Fills a Region object.

The image seen in Figure 1 shows some of the most basic stroking and filling operations you can carry out with GDI+.

Figure 1. Simple stroking and filling.

Listing 1 shows the draw code that creates this image.

    protected override void OnPaint(PaintEventArgs e)

    {

      //Get the Graphics object

      Graphics g=e.Graphics;

 

      //Draw a line using discrete coordinates

      g.DrawLine(Pens.Red,10,5,110,15);

 

      //Draw a line using points

      Point p1=new Point(10,8);

      Point p2=new Point(110,18);

      e.Graphics.DrawLine(Pens.Plum,p1,p2);

 

      //Draw a polygon using an array of PointF structures.

      PointF[] pts=new PointF[20];

      float angle=0;

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

      {

        pts[x]=new PointF(x*10,(float)(30+(15*Math.Sin(angle))));

        angle+=(float)Math.PI/10;

      }

      e.Graphics.DrawLines(Pens.Blue,pts);

 

      //fill ellipses over each of the points in the sin curve.

      foreach(PointF p in pts)

        e.Graphics.FillEllipse(Brushes.Green,new RectangleF(p.X-3,p.Y-3,6f,6f));

 

      //Create a closed polygon, fill it and stroke it.

      Point[] poly=new Point[5]{

                     new Point(20,50),

                     new Point(200,100),

                     new Point(200,50),

                     new Point(20,100),

                     new Point(20,50)

                   };

 

      e.Graphics.FillPolygon(Brushes.Tomato,poly);

      Pen pen=new Pen(Color.Tan,4);

      e.Graphics.DrawPolygon(pen,poly);

      pen.Dispose();

 

      //Create an array of rectangles, fill them and stroke them

      Rectangle[] rcs=new Rectangle[10];

      for(int x=1; x<11; x++)

        rcs[x-1]=new Rectangle(80-(x*5),110+(x*12),x*10,12);

      e.Graphics.FillRectangles(Brushes.RoyalBlue,rcs);

      e.Graphics.DrawRectangles(Pens.YellowGreen,rcs);

 

          base.OnPaint (e);

    }

    Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)

      'Get the Graphics object

      Dim g As Graphics = e.Graphics

 

      'Draw a line using discrete coordinates

      g.DrawLine(Pens.Red, 10, 5, 110, 15)

 

      'Draw a line using points

      Dim p1 As New Point(10, 8)

      Dim p2 As New Point(110, 18)

      e.Graphics.DrawLine(Pens.Plum, p1, p2)

 

      'Draw a polygon using an array of PointF structures.

      Dim pts(19) As PointF

      Dim angle As Single = 0

      Dim x As Integer

      For x = 0 To 19

        pts(x) = New PointF(x * 10, CSng(30 + 15 * Math.Sin(angle)))

        angle += CSng(Math.PI) / 10

      Next x

      e.Graphics.DrawLines(Pens.Blue, pts)

 

      'fill ellipses over each of the points in the sin curve.

      Dim p As PointF

      For Each p In pts

        e.Graphics.FillEllipse(Brushes.Green, New RectangleF(p.X - 3, p.Y - 3, 6.0F, 6.0F))

      Next p

      'Create a closed polygon, fill it and stroke it.

      Dim poly() As Point = {New Point(20, 50), New Point(200, 100), New Point(200, 50), New Point(20, 100), New Point(20, 50)}

 

      e.Graphics.FillPolygon(Brushes.Tomato, poly)

      Dim pen As New Pen(Color.Tan, 4)

      e.Graphics.DrawPolygon(pen, poly)

      pen.Dispose()

 

      'Create an array of rectangles, fill them and stroke them

      Dim rcs(9) As Rectangle

      For x = 1 To 10

        rcs((x - 1)) = New Rectangle(80 - x * 5, 110 + x * 12, x * 10, 12)

      Next x

      e.Graphics.FillRectangles(Brushes.RoyalBlue, rcs)

      e.Graphics.DrawRectangles(Pens.YellowGreen, rcs)

 

      MyBase.OnPaint(e)

    End Sub 'OnPaint

Exercise.

Using what you've learned in this article, create a program that displays the image shown in Figure 2

Figure 2. Can you solve it?

For a clue, the yellow square is 500 pixels on each side.

Return to the Beginners Guide Index.