Rectangles and Points

Many of the drawing methods take parameters that specify the points needed to draw in terms of x/y coordinates. Most of the methods also take either a Rectangle data structure or a Point data structure. These may be more convenient for you, depending on your code.

First, though, let's talk about the Size data structure. It is a member of the Rectangle data structure. There are two members that we'll be interested in: they are Width and Height. You can create a Size structure that has a width of 10 and a height of 10 as follows:

Size size = new Size(10, 10);

You can also get or set the Width and Height properties as follows:

// Set the Width.
size.Width = 20;
// Set the Height.
size.Height = 29;
// Get the Width.
int nValue = size.Width;
// Get the Height.
Int nValue = size.Height;

The Size structure is a member of the Rectangle structure. The four Rectangle properties that I use most are Left, Top, Right, and Bottom. These give the bounding coordinates for the data structure. You can create a Rectangle structure with the upper left corner at 10, 15 and the lower right corner at 156, 167 as follows. Note that the first and second parameters in the constructor are the upper left coordinate, and the next two parameters are the width and height.

Rectangle r = new Rectangle(10, 15, 146, 152);

The Point data structure is the last thing we'll talk about in this section. It can be used for quite a few of the drawing methods. The important properties of the Point structure are X and Y. These contain the x and y coordinates for the point, and are almost always relative to the client region. The following code shows how to use a Point structure.

// Set the X coordinate
point.X = 15;
// Set the Y coordinate
point.Y = 46;
// Get the X coordinate
Int nX = point.X;
// Get the Y coordinate
Int nY = point.Y;

Easy Drawing 1-2-3

In this section we'll talk about some of the simpler drawing method available. They include DrawLine, DrawEllipse, DrawRectangle, FillEllipse, and FillRectangle. These will get you started. We'll cover many more drawing methods in later articles.

Drawing Lines

There are four DrawLine overloads that we'll talk about. The first takes a Pen object, the first endpoint x and y coordinates (in this example 10,15), and the second endpoint x and y coordinates (in this example 150,167).

g.DrawLine(new Pen(Color.Black), 10, 15, 150, 167);

The next overload takes three parameters: a Pen object, a Point object representing the first endpoint, and a Point object representing the second endpoint.

Point ep1 = new Point(10,15);
Point ep2 = new Point(150,167);
g.DrawLine(new Pen(Color.Black), ep1, ep2);

The Point structure's X and Y properties are integers. There are times when you will need to use floats for greater precision. The PointF structure can be used when this is the case. A third DrawLine overload is similar to the last overload we looked at except that instead of Point objects it uses PointF objects.

PointF ep1 = new PointF(10,15);
PointF ep2 = new PointF(150,167);
g.DrawLine(new Pen(Color.Black), ep1, ep2);

The last DrawLine overload is similar to the first we looked at that uses integers for x, y, width, and height. This overload, however, uses variables of the type Single instead of integers.

Single x1 = 43;
Single y1 = 52;
Single x2 = 554.41;
Single y2 = 99.76;
g.DrawLine(new Pen(Color.Black), x1, y1, x2, y2);

Drawing Ellipses and Filled Ellipses

Drawing ellipse and filled ellipses are both done the same, except the method names are DrawEllipse and FillEllipse. One other difference is that the filled version requires a SoildBrush object instead of a Pen object. In this section we'll look at the overrides that are available. The first overload we'll look at takes five parameters: a Pen object (or SolidBrush object), the x and y coordinates of the upper left corner of the rectangle that bounds the ellipse, and the width and height values of the rectangle that bounds the ellipse. An example of this can be seen below. It draws an ellipse with its bounding rectangle at 10, 15 with a width and height of 100.

g.DrawEllipse(new Pen(Color.Black), 10, 15, 100, 100);
g.FillEllipse(new SolidBrush(Color.Black), 10, 15, 100, 100);

The next override we'll look at takes two parameters: a Pen object (or SolidBrush object) and a Rectangle structure. The following code shows how to use this override:

Rectangle rect = new Rectangle(10, 15, 100, 100);
g.DrawEllipse(new Pen(Color.Black), rect);
g.FillEllipse(new SolidBrush(Color.Black), rect);

Besides a Point structure that uses floats instead of integers, there is a Rectangle structure that uses floats instead of integers. It is the RectrangleF structure. The third overload we'll look at uses this instead of a Rectangle structure for greater precision. The following example shows how it can be used:

RectangleF rect = new RectangleF(10, 15.4, 100, 100.51);
g.DrawEllipse(new Pen(Color.Black), rect);
g.FillEllipse(new SolidBrush(Color.Black), rect);

The last ellipse overload is similar to the first we looked at that uses integers for x, y, width, and height. This overload, however, uses variables of the type Single instead of integers.

Single x1 = 43;
Single y1 = 52;
Single x2 = 554.41;
Single y2 = 99.76;
g.DrawEllipse(new Pen(Color.Black), x1, y1, x2, y2);
g.FillEllipse(new SolidBrush(Color.Black), x1, y1, x2, y2);

Drawing Rectangles and Filled Rectangles

Drawing rectangles and filled rectangles are both done the same, except the method names are DrawRectangle and FillRectangle. One other difference is that the filled version requires a SoildBrush object instead of a Pen object. In this section we'll look at the overrides that are available. The first overload we'll look at takes five parameters: a Pen object (or SolidBrush object), the x and y coordinates of the upper left corner of the rectangle, and the width and height values of the rectangle. An example of this can be seen below. It draws a rectangle at 10, 15 with a width and height of 100.

g.DrawRectangle(new Pen(Color.Black), 10, 15, 100, 100);
g.FillRectangle(new Pen(Color.Black), 10, 15, 100, 100);

The next override we'll look at takes two parameters: a Pen object (or SolidBrush object) and a Rectangle structure. The following code shows how to use this override:

Rectangle rect = new Rectangle(10, 15, 100, 100);
g.DrawRectangle(new Pen(Color.Black), rect);
g.FillRectangle(new Pen(Color.Black), rect);

The last ellipse overload is similar to the first we looked at that uses integers for x, y, width, and height. This overload, however, uses variables of the type Single instead of integers.

Single x1 = 43;
Single y1 = 52;
Single x2 = 554.41;
Single y2 = 99.76;
g.DrawRectangle(new Pen(Color.Black), x1, y1, x2, y2);
g.FillRectangle(new Pen(Color.Black), x1, y1, x2, y2);

Sample Program

There is a sample program named EasyDraw1-2-3 that shows you how to use DrawLine, DrawRectangle, FillRectangle, DrawEllipse, and FillEllipse. It draws in response to the mouse movements. You can download it here.

Conclusion

That's the first installment. It's enough to get you going. Of course, there's a lot more to come, so stay tuned. The next article will include Pens, Brushes, colors, coordinates and transformations, and much more.