Drawing by mouse on a PictureBox (Freehand drawing)


Brief overview of GDI+: Graphics Device Interface + (GDI+) is a graphical subsystem of Windows that consists of an application programming interface (API) to display graphics and formatted text on both video display and printer.
GDI+ acts as an intermediate layer between applications and device drivers for rendering two-dimensional graphics, images and text.

Suppose we wanted to create a sort of painting/freehand writing program that uses the mouse to draw. We can do this in .Net by first creating a Windows Forms application and then making a picturebox like so (adding a button to clear the picturebox is optional):

The code (in C#) is relatively simple to write. Theres many ways to accomplish freehand drawing by mouse, so this is just one way. The algorithm goes like this:

  1. First, create the event handlers for the picture box: MouseDown, MouseMove, & MouseUp
  2. Create a previous Point object to store the current mouse position so that the any previous point will equal whatever position the mouse is on the picturebox (x,y coordinates)
  3. Create a boolean to detect whether the mouse button is currently pressed
  4. Create a Bitmap so that you have something to write/paint on if there is no existing Image/Bitmap on the picturebox
  5. Once you’ve created a bitmap, create a Graphics object to draw with, we will use the DrawLine() function, it takes a Pen object, a starting Point, and an ending Point

The sample code in C#:

public partial class Form1 : Form

    {

        Point lastPoint = Point.Empty;//Point.Empty represents null for a Point object

        bool isMouseDown = new Boolean();//this is used to evaluate whether our mousebutton is down or not

        public Form1()

        {

            InitializeComponent();

        }

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)

        {

            lastPoint = e.Location;//we assign the lastPoint to the current mouse position: e.Location ('e' is from the MouseEventArgs passed into the MouseDown event)

            isMouseDown = true;//we set to true because our mouse button is down (clicked)

        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)

        {

            if (isMouseDown == true)//check to see if the mouse button is down

            {

                if (lastPoint != null)//if our last point is not null, which in this case we have assigned above

                {

                    if (pictureBox1.Image == null)//if no available bitmap exists on the picturebox to draw on

                    {
                        //create a new bitmap
                        Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);

                        pictureBox1.Image = bmp; //assign the picturebox.Image property to the bitmap created

                    }

                    using (Graphics g = Graphics.FromImage(pictureBox1.Image))

                    {//we need to create a Graphics object to draw on the picture box, its our main tool

                 //when making a Pen object, you can just give it color only or give it color and pen size

                        g.DrawLine(new Pen(Color.Black, 2), lastPoint, e.Location);
                        g.SmoothingMode = SmoothingMode.AntiAliasing;
                   //this is to give the drawing a more smoother, less sharper look

                    }

                    pictureBox1.Invalidate();//refreshes the picturebox

                    lastPoint = e.Location;//keep assigning the lastPoint to the current mouse position

                }

            }

        }

        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)

        {

            isMouseDown = false;

            lastPoint = Point.Empty;

           //set the previous point back to null if the user lets go of the mouse button

        }

        private void clearButton_Click(object sender, EventArgs e)//our clearing button

        {

            if (pictureBox1.Image != null)

            {

                pictureBox1.Image = null;

                Invalidate();

            }

        }

    }

If you think this post is great, please rate or comment on it. Thanks!

Advertisements

2 thoughts on “Drawing by mouse on a PictureBox (Freehand drawing)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s