Title: Let the user scribble with different line styles in C#

The example Let the user scribble on a PictureBox in C# explains how to let the user draw polylines, but the program only draws thin black curves. This example adds color, line thickness, and line styles such as dashed or dotted lines.

The previous example stores information about a polyline in a List<Point>. To keep track of line color, thickness, and style, this example represents a polyline with the following Polyline class.

class Polyline { public Color Color = Color.Black; public int Thickness = 1; public DashStyle DashStyle = DashStyle.Solid; public List<Point> Points = new List<Point>(); public void Draw(Graphics gr) { using (Pen the_pen = new Pen(Color, Thickness)) { the_pen.DashStyle = DashStyle; if (DashStyle == DashStyle.Custom) { the_pen.DashPattern = new float[] { 10, 2 }; } gr.DrawLines(the_pen, Points.ToArray()); } } }

The only really interesting part to the Polyline class is its Draw method, which draws the polyline using the appropriate color, thickness, and style.

The program now uses a list of Polylines to hold the drawing information.

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

The program uses private variables to store the currently selected drawing parameters (color, thickness, and style).

// The currently selected drawing parameters. private Color DrawingColor = Color.Black; private int DrawingThickness = 1; private DashStyle DrawingDashStyle = DashStyle.Solid;

Dropdown buttons on the toolbar let the user select the drawing parameters. The following code shows how the buttons work. The color buttons have ForeColor values equal to the colors they represent. The thickness buttons have their text set to their thicknesses. The style buttons have their text set to the names of their styles. All of the buttons display images.

// Select the appropriate color. private void ColorTool_Click(object sender, EventArgs e) { ToolStripMenuItem tool = sender as ToolStripMenuItem; toolColor.Image = tool.Image; DrawingColor = tool.ForeColor; } // Select the line thickness. private void ThicknessTool_Click(object sender, EventArgs e) { ToolStripMenuItem tool = sender as ToolStripMenuItem; toolThick.Image = tool.Image; DrawingThickness = int.Parse(tool.Text); } // Select the dash style. private void StyleTool_Click(object sender, EventArgs e) { ToolStripMenuItem tool = sender as ToolStripMenuItem; toolStyle.Image = tool.Image; switch (tool.Text) { case "Solid": DrawingDashStyle = DashStyle.Solid; break; case "Dash": DrawingDashStyle = DashStyle.Dash; break; case "Dot": DrawingDashStyle = DashStyle.Dot; break; case "Custom": DrawingDashStyle = DashStyle.Custom; break; } }

This code simply saves the user's selections in the private variables.

The following code shows the mouse event handlers that the program uses to draw a new polyline. These are similar to the previous version except they use the new drawing parameters.

// Start drawing. private void picCanvas_MouseDown(object sender, MouseEventArgs e) { // Create the new polyline. NewPolyline = new Polyline(); Polylines.Add(NewPolyline); // Initialize it and add the first point. NewPolyline.Color = DrawingColor; NewPolyline.Thickness = DrawingThickness; NewPolyline.DashStyle = DrawingDashStyle; NewPolyline.Points.Add(e.Location); } // Continue drawing. private void picCanvas_MouseMove(object sender, MouseEventArgs e) { if (NewPolyline == null) return; NewPolyline.Points.Add(e.Location); picCanvas.Refresh(); } // Stop drawing. private void picCanvas_MouseUp(object sender, MouseEventArgs e) { if (NewPolyline == null) return; // See if the new polyline contains more than 1 point. if (NewPolyline.Points.Count < 2) { // Remove it. Polylines.RemoveAt(Polylines.Count - 1); } NewPolyline = null; picCanvas.Refresh(); }

The final changes to the program are in the Paint event handler.

// Redraw. private void picCanvas_Paint(object sender, PaintEventArgs e) { e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; e.Graphics.Clear(picCanvas.BackColor); // Draw the polylines. foreach (Polyline polyline in Polylines) { polyline.Draw(e.Graphics); } }

The new version of the event handler simply loops through the Polyline objects, calling their Draw methods.

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