[C# Helper]
Index Books FAQ Contact About Rod
[Beginning Database Design Solutions, Second Edition]

[Beginning Software Engineering, Second Edition]

[Essential Algorithms, Second Edition]

[The Modern C# Challenge]

[WPF 3d, Three-Dimensional Graphics with WPF and C#]

[The C# Helper Top 100]

[Interview Puzzles Dissected]

[C# 24-Hour Trainer]

[C# 5.0 Programmer's Reference]

[MCSD Certification Toolkit (Exam 70-483): Programming in C#]

Title: Let the user scribble on a PictureBox in C#

[Let the user scribble on a PictureBox in C#]

The Graphics class provides a DrawLines method that draws a series of connected lines, which is sometimes called a polyline. This program lets the user create a series of polylines.

The program stores the points that make up a polyline as a List<Point>. It stores a series of polylines in a List<List<Point>>. It keeps track of the new polyline that the user is drawing in the variable NewPolyline.

// The polylines we draw. private List<List<Point>> Polylines = new List<List<Point>>(); // The new polyline we are drawing. private List<Point> NewPolyline = null;

When the user presses the mouse down, the following code creates a new polyline.

// Start drawing. private void picCanvas_MouseDown(object sender, MouseEventArgs e) { // Create the new polyline. NewPolyline = new List<Point>(); Polylines.Add(NewPolyline); // Add the first point. NewPolyline.Add(e.Location); }

This code the NewPolyline list and then adds the mouse's position to it.

When the user moves the mouse, the following code adds the mouse's new location to the new polyline.

// Continue drawing. private void picCanvas_MouseMove(object sender, MouseEventArgs e) { if (NewPolyline == null) return; NewPolyline.Add(e.Location); picCanvas.Refresh(); }

This code checks whether the user is making a new polyline by checking whether NewPolyline == null. If there is a new polyline, the code adds the mouse's current location to the new polyline and refreshes the PictureBox to draw it as it is so far.

When the user releases the mouse, the following code removes the new polyline if it contains only a single point.

// Stop drawing. private void picCanvas_MouseUp(object sender, MouseEventArgs e) { if (NewPolyline == null) return; // See of the new polyline contains more than 1 point. if (NewPolyline.Count < 2) { // Remove it. Polylines.RemoveAt(Polylines.Count - 1); } NewPolyline = null; picCanvas.Refresh(); }

The only other interesting piece of code in this example is the PictureBox's Paint event handler, which draws the polylines.

// Redraw. private void picCanvas_Paint(object sender, PaintEventArgs e) { e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; e.Graphics.Clear(picCanvas.BackColor); // Draw the polylines. foreach (List<Point> polyline in Polylines) { e.Graphics.DrawLines(Pens.Black, polyline.ToArray()); } }

This code sets the Graphics object's SmoothingMode to draw smooth lines. It then loops through the polylines and draws them.

Download the example to experiment with it and to see additional details.

© 2009-2023 Rocky Mountain Computer Consulting, Inc. All rights reserved.