Make an enhanced scribble application that lets the user draw in different colors, line thicknesses, and line styles in C#

The example Let the user draw curves and 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 a 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.

// 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;
}
}

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. The new version loops through the Polyline objects, calling their Draw methods.

// 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);
}
}

   

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments
  • No comments exist for this post.
Leave a comment

Submitted comments are subject to moderation before being displayed.

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.