Difference between revisions of "Drawing Graphics in C Sharp"

Revision as of 21:23, 28 January 2008

The purpose of this chapter of C# Essentials is to provide the reader with a knowledge of teh basics of graphics drawing in C#. Drawing in C# is achieved using the Graphics Object. The Graphics Object takes much of the pain out of graphics drawing by abstracting away all the problems of dealing with different display devices and screens resolutions. The C# programmer merely needs to create a Graphic Object and tell it what and where to draw.

Persistent Graphics

An important point to note before proceeding with is chapter is that simply creating a Graphics Object for a component and they drawing on that component does not create persistent graphics. In fact what will happen is that as soon as the window is minimized, or obscured by another window the graphics will be erased.

Fore this reason, steps need to be taken to ensure that any graphics are persistent. Two mechanisms for achieving this to perform the drawing in the Paint() event handler of the control, or to perform the drawing on a bitmap image in memory and then transfer that image to the component whenever the Paint() event is triggered (which occurs whenever the control is displayed or unobscured). We will look at both of this techniques in this chapter.

Creating a Graphics Object

The first step in this tutorial is to create a new Visual Studio project called CSharpGraphics. With the new project created select the Form in the design area and click on the lightning bolt at the top of the Properties panel to list the events available for the Form. Double click the Paint event to display the code editing page.

Graphics Objects are created by calling the CreateGraphics() method of the component on which the drawing is to performed. For example, a Graphics Object can be created on our Form called Form1 by calling CreateGraphics() method as follows in the Paint():

       private void Form1_Paint(object sender, PaintEventArgs e)
        {
            System.Drawing.Graphics graphicsObj;

            graphicsObj = this.CreateGraphics();
        }

Now that we have a Graphic Object we need a Pen with which to draw.

Creating a Pen In C#

A Graphics Object is of little use without a Pen object with which to draw (much as a sheet of paper is no good without a pen or pencil with which to draw). A Pen object may be quite easily created as follows:

Pen variable_name = new Pen (color, width);

where variable_name is the name to be assigned to the Pen object, color is the color of the pen and width is the width of the lines to be drawn by the pen.

For example, we can create red pen that is 5 pixels wide as follows:

       private void Form1_Paint(object sender, PaintEventArgs e)
        {
            System.Drawing.Graphics graphicsObj;

            graphicsObj = this.CreateGraphics();

            Pen myPen = new Pen(System.Drawing.Color.Red, 5);
        }

Once a Pen object has been created other properties may be changed. For example, the DashStyle property can be modified to change the style of line (i.e Dash, DashDot, DashDotDot, Dot, Solid or Custom). Properties such as the color and width may similarly be changed after a Pen has been created:

           myPen.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDotDot;

            myPen.Color = System.Drawing.Color.RoyalBlue;

            myPen.Width = 3;

Now that we have a Paint() event handler, a Graphics Object and Pen we can now begin to draw.

Drawing Lines in C#

Lines are drawn in C# using the DrawLine() method of the Graphics Object. This method takes a pre-instantiated Pen object and two sets of x and y co-ordinates (the begin and end points of the line) as arguments. For example, to draw a line from 20, 20 to 200, 210 on our sample form:

       private void Form1_Paint(object sender, PaintEventArgs e)
        {
            System.Drawing.Graphics graphicsObj;

            graphicsObj = this.CreateGraphics();

            Pen myPen = new Pen(System.Drawing.Color.Red, 5);

            graphicsObj.DrawLine(myPen, 20, 20, 200, 210);
        }

The above code, when compiled and executed will result in the form appearing as follows: