Click here to Skip to main content
15,867,594 members
Articles / Multimedia / GDI+

Painting on a Panel

Rate me:
Please Sign up or sign in to vote.
4.77/5 (19 votes)
23 May 2011CPOL6 min read 87.4K   8.8K   32   10
How to create a panel that can be drawn on
Paint_on_a_panel.jpg

Introduction

In this article, we look at how to design and implement the ability to paint onto a panel with the mouse, how to record this drawing data, draw the lines and create an eraser tool to remove these lines. What’s more is that we will also store additional information like the line size and line colour and finish everything off by letting users know the current colour and size of their drawing.

This approach to drawing graphics is more aligned to vector type graphics where the points are floating values that are interpolated rather than straight forward rasterized bitmap values.

Background

This article is at a simple level, so no previous Drawing knowledge is necessary, but preferable for expanding on what is done here.

Using the Code

The code here is done in such a way that it can be easily transplanted onto various other projects with very little hassle and could be extended to include other non-standard drawing features like text.

The Classes

To accomplish this, we have two main classes, one of the classes deals with the storage, adding, removing and getting of the individual shape data, whereas the other class is used more as a structure and stores data such as the colour, line width, position and what shape segment it is with.

Classes.JPG

Class Shapes

MethodsFunctionality
GetShape()Returns the index shape.
NewShape()Creates a new shape with the function arguments (position, width, colour, shape segment index).
NumberOfShapes()Returns the number of shapes currently being stored.
RemoveShape()Removes any point within a certain threshold of the point, and re-sorts out the shape segment index of the rest of the points so we don’t have problems with joining up odd lines.
C#
public class Shapes
{
    private List _Shapes;    //Stores all the shapes

    public Shapes()
    {
        _Shapes = new List();
    }
    //Returns the number of shapes being stored.
    public int NumberOfShapes()
    {
        return _Shapes.Count;
    }
    //Add a shape to the database, recording its position,
    //width, colour and shape relation information
    public void NewShape(Point L, float W, Color C, int S)
    {
        _Shapes.Add(new Shape(L,W,C,S));
    }
    //returns a shape of the requested data.
    public Shape GetShape(int Index)
    {
        return _Shapes[Index];
    }
    //Removes any point data within a certain threshold of a point.
    public void RemoveShape(Point L, float threshold)
    {
        for (int i = 0; i < _Shapes.Count; i++)
        {
            //Finds if a point is within a certain distance of the point to remove.
            if ((Math.Abs(L.X - _Shapes[i].Location.X) < threshold) && 
                (Math.Abs(L.Y - _Shapes[i].Location.Y)< threshold))
            {
                //removes all data for that number
                _Shapes.RemoveAt(i);

                //goes through the rest of the data and adds an extra
                //1 to defined them as a separate shape and shuffles on the effect.
                for (int n = i; n < _Shapes.Count; n++)
                {
                    _Shapes[n].ShapeNumber += 1;
                }
                //Go back a step so we don't miss a point.
                i -= 1;
            }
        }
    }
}

Class Shape

VariableTypePurpose
ColourColorSaves the Colour for this part of the line.
LocationPointThe position of the line.
ShapeNumberIntWhich shape this part of the line belongs to.
WidthFloatThe width to draw the line at this point.
C#
 public class Shape
{
    public Point Location;          //position of the point
    public float Width;             //width of the line
    public Color Colour;            //colour of the line
    public int ShapeNumber;         //part of which shape it belongs to

    //CONSTRUCTOR
    public Shape(Point L, float W, Color C, int S)
    {
        Location = L;               //Stores the Location
        Width = W;                  //Stores the width
        Colour = C;                 //Stores the colour
        ShapeNumber = S;            //Stores the shape number
    }
}

The Setup

When drawing in C# or .NET, it's advised to force the drawing surface to use double-buffering to reduce the amount of flickering when re-drawing, but this does come as a memory cost. We should also define some more variables for dealing with conditions such as the mouse position, the current drawing shape, current colour, etc.

C#
private Shapes DrawingShapes = new Shapes();    //Stores all the drawing data
private bool IsPainting = false;                //Is the mouse currently down
private Point LastPos = new Point(0, 0);        //Last Position, used to cut down 
					//on repetitive data.
private Color CurrentColour = Color.Black;     	//Default Colour
private float CurrentWidth = 10;              	//Default Pen width
private int ShapeNum = 0;                     	//record the shapes so they can be 
					//drawn separately.

public Form1()
{
	InitializeComponent();
	//Set Double Buffering
	panel1.GetType().GetMethod("SetStyle", 
	  System.Reflection.BindingFlags.Instance |
	  System.Reflection.BindingFlags.NonPublic).Invoke(panel1, 
	  new object[]{ System.Windows.Forms.ControlStyles.UserPaint | 
	  System.Windows.Forms.ControlStyles.AllPaintingInWmPaint | 
	  System.Windows.Forms.ControlStyles.DoubleBuffer, true });
}

DrawingShapes is an instance of the shapes class, which will allow us to store all the necessary drawing information, and allow the re-drawing function to later use this variable to draw the lines.

The Events

With the ability to store the drawing point data, we will need to augment the drawing panel’s event handlers to accommodate the functions for MouseDown (when the mouse button is pressed down), MouseMove (when the mouse is moving across the drawing panel) and MouseUp (when the mouse button is let go of).

When the mouse is pressed down on the drawing panel, we want to start recording the data, and as the mouse moves while the mouse is pressed down, we want to record the position of the mouse, and when the mouse button is lifted, that is the end of the drawing line.

MouseDown
C#
private void panel1_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
{
	//set it to mouse down, illustrate the shape being drawn and reset the last position
	IsPainting = true;
	ShapeNum++;
	LastPos = new Point(0, 0);
}
MouseMove
C#
protected void panel1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
{
//PAINTING
	if (IsPainting)
	{
		//check it's not at the same place it was last time, 
		//saves on recording more data.
		if (LastPos != e.Location)
		{
			//set this position as the last position
			LastPos = e.Location;
			//store the position, width, colour and shape relation data
			DrawingShapes.NewShape(LastPos, CurrentWidth, 
				CurrentColour, ShapeNum);
		}
	}
	//refresh the panel so it will be forced to re-draw.
	panel1.Refresh();
}
MouseUp
C#
private void panel1_MouseUp(object sender, System.Windows.Forms.MouseEventArgs e)
{
	if (IsPainting)
	{
		//Finished Painting.
		IsPainting = false;
	}
}

The last part now that we can store that point data, is to draw the lines. To do this, another event handler is needed on the drawing panel for Paint (which is called every time the panel is being re-drawn). It is here that we use the collected data to connect the dots using the line width and line colours that we have saved. The shape number information comes in particular use here as we don’t want to be drawing a line between two dots which are not connected.

Paint
C#
//DRAWING FUNCTION
private void panel1_Paint(object sender, PaintEventArgs e)
{
	//Apply a smoothing mode to smooth out the line.
	e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
	//DRAW THE LINES
	for (int i = 0; i < DrawingShapes.NumberOfShapes()-1; i++)
	{
		Shape T = DrawingShapes.GetShape(i);
		Shape T1 = DrawingShapes.GetShape(i+1);
		//make sure shape the two adjoining shape numbers are part of the same shape
		if (T.ShapeNumber == T1.ShapeNumber)
		{
			//create a new pen with its width and colour
			Pen p = new Pen(T.Colour, T.Width);
			p.StartCap = System.Drawing.Drawing2D.LineCap.Round;
			p.EndCap = System.Drawing.Drawing2D.LineCap.Round; 
			//draw a line between the two adjoining points
			e.Graphics.DrawLine(p, T.Location, T1.Location);
			//get rid of the pen when finished
			p.Dispose();
		}
	}
}

Adding the Erasing Tool

Now that we can draw on the panel, it’s time to look at erasing the lines in a similar fashion. To do this, we need to augment our code slightly to accommodate this new interaction. The way I’m implementing this is by adding 2 extra variables, both of which are defined at the start of the program.

Brush is a boolean value, representing either the Painting or Erasing tool currently in use.

IsErasing is a boolean value which is used in an identical fashion to the IsPainting variable.

The use of the Brush variable changes a few things, most notably the MouseDown event handler. Instead of assigning the IsPainting variable as true when the mouse is down, we need to check weather it’s painting or erasing. The function should look like this after:

C#
private void panel1_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
{
	//If we're painting...
	if (Brush)
	{
		//set it to mouse down, illustrate the shape being drawn 
		//and reset the last position
		IsPainting = true;
		ShapeNum++;
		LastPos = new Point(0, 0);
	}
        //but if we're erasing...
        else
        {
        	IsEraseing = true;
        }
}

The MouseMove function has an admen that looks like this:

C#
if (IsEraseing)
{
	//Remove any point within a certain distance of the mouse
	DrawingShapes.RemoveShape(e.Location,10);
}

And the MouseUp:

C#
if (IsEraseing)
{
	//Finished Erasing.
	IsEraseing = false;
}

Drawing a Mouse Cursor

Removing and painting new lines onto a panel is great, but the task for the user is made more difficult by the fact that they cannot interactively see how big they are painting or removing lines. To do this, we need to make a final few tweaks to the program. This method is a little brute force for larger applications, but it will do the trick for smaller applications. An additional two variables are needed in order to make this work.

MouseLoc is a point variable, which means it holds two integer values, very good for location coordinates, and will store the current mouse coordinates.

IsMouseing is a boolean which will be used to decide whether to draw the mouse “Painting Pointer” or not.

Two event handlers for the drawing panel are used for good measure to hide and show the mouse curser as it enters or leaves the drawing panel and to tell the re-drawer to draw the “Painting Pointer”.

MouseEnter (Hide the mouse Cursor)
C#
private void panel1_MouseEnter(object sender, EventArgs e)
{
	//Hide the mouse cursor and tell the re-drawing function to draw the mouse
	Cursor.Hide();
	IsMouseing = true;
}
MouseLeave (Show the mouse Cursor)
C#
private void panel1_MouseLeave(object sender, EventArgs e)
{
	//show the mouse, tell the re-drawing function
	//to stop drawing it and force the panel to re-draw.
	Cursor.Show();
	IsMouseing = false;
	panel1.Refresh();
}

Two small changes are needed to be made to update the MouseLoc and then to finally draw it. Within the MouseMove function, the following line should be added:

C#
MouseLoc = e.Location;

At the bottom of the Paint event, the following lines should be added, which will draw the center circle to the tip of the mouse pointer and the circle will be as large as the drawing width.

C#
if (IsMouseing)
{
	e.Graphics.DrawEllipse(new Pen(Color.White, 0.5f), 
	  MouseLoc.X - (CurrentWidth / 2), 
	  MouseLoc.Y - (CurrentWidth / 2), CurrentWidth, CurrentWidth);
}

It is important to note that if the drawing of the mouse cursor is done before the drawing of the lines, the lines will be drawn on top of the curser and it would not be visible.

Points of Interest

This project was quite fun, nothing extremely challenging, but trying to optimize it from my original conception was interesting. It will be interesting to see what else can be done by pushing this code further by creating a small vector artwork package, or by introducing layers. For me, I’ve been using it to let users annotate node based graphs and images, and store the vector data with it.

History

  • 23rd May, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Rockstar Games
United States United States
Geoff Samuel currently employed as a Principal Technical Animator at Rockstar Games in San Diego, specializing in tools and pipelines for animation and motion capture.

For more information please check out www.GeoffSamuel.com

Comments and Discussions

 
GeneralTrojan? Pin
Member 773084111-Jul-21 19:20
Member 773084111-Jul-21 19:20 
QuestionGreatWork Pin
Member 1462827816-Nov-19 9:15
Member 1462827816-Nov-19 9:15 
QuestionScrollbar in painted graphcis Pin
Member 284105229-May-17 22:39
Member 284105229-May-17 22:39 
Questionmethod to save result in filestream Pin
fboudineau8-Jul-14 11:41
fboudineau8-Jul-14 11:41 
QuestionHow to clear after drawing? Pin
chuki230-Jun-13 22:04
chuki230-Jun-13 22:04 
GeneralMy vote of 5 Pin
Southmountain4-Jun-13 5:29
Southmountain4-Jun-13 5:29 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey20-Feb-12 21:51
professionalManoj Kumar Choubey20-Feb-12 21:51 
Nice
GeneralMy vote of 5 Pin
xisouthros5-Oct-11 3:07
professionalxisouthros5-Oct-11 3:07 
GeneralMy vote of 5 Pin
Yevgen G. Shymshyt20-Jun-11 5:56
Yevgen G. Shymshyt20-Jun-11 5:56 
GeneralSuggestion PinPopular
mav.northwind23-May-11 19:12
mav.northwind23-May-11 19:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.