Draw dashed lines that are visible on any background in C#

[dashed lines]

This example shows how to draw dashed lines that are visible on any background. Sometimes it’s hard to draw lines that are visible on top of a photo or other complicated background. For example, when the user is clicking and dragging to select an area in a photograph, you need the user to be able to see the area selected. If the background image is complicated, then you may be unable to find a color to draw the lines so they will be easily visible.

Some older drawing systems could draw in XOR (exclusive-or) mode so a pixel’s color was the reverse of the color behind it, making it visible. That doesn’t work in .NET, at least not easily.

Another approach is to draw dashed lines consisting of two colors. The bad news is that dashed lines can only have a single color in .NET. The good news is that it’s easy enough to fake it.

To draw two-color dashed lines, first draw the lines using a solid pen. Then draw them again using a dashed pen with a different color. This example uses the following code to draw two-color dashed lines.

// Fill four rectangles and draw a two-color dashed rectangle.
private void Form1_Paint(object sender, PaintEventArgs e)
{
    Graphics gr = e.Graphics;

    // Fill the rectangles.
    int wid = ClientSize.Width / 2;
    int hgr = ClientSize.Height / 2;
    gr.FillRectangle(Brushes.Green, 0, 0, wid, hgr);
    gr.FillRectangle(Brushes.Orange, 0, hgr, wid, hgr);
    gr.FillRectangle(Brushes.Yellow, wid, 0, wid, hgr);
    gr.FillRectangle(Brushes.Blue, wid, hgr, wid, hgr);

    // Draw the dashed rectangle.
    Rectangle rect = new Rectangle(
        20, 20,
        ClientSize.Width - 40, ClientSize.Height - 40);
    using (Pen pen1 = new Pen(Color.Black, 2))
    {
        gr.DrawRectangle(pen1, rect);
    }
    using (Pen pen2 = new Pen(Color.White, 2))
    {
        pen2.DashPattern = new float[] { 5, 5 };
        gr.DrawRectangle(pen2, rect);
    }
}

The code first makes variable gr refer to the event handler’s Graphics object to make the following code a bit easier to read.

Next the code fills the form with four rectangles. It then draws a black rectangle with line thickness 2 and then draws over the rectangle with a dashed white pen. The result is a dashed black and white box that’s easy to see over all of the colored rectangles.

In this example a black box would have worked reasonably well (although it would be somewhat hard to see over the green and blue rectangles) and a white box would also have worked reasonably well (although it would be hard to see over the yellow rectangle). Neither black nor white would have worked if one of the rectangles was black and another was white.

This method can produce some annoying results depending on the colors involved. For example, blue and red dashes over blue and red rectangles can give you headache. The method usually works well if the box’s dash colors don’t interact too strongly with each other (like blue and red) and they contrast with the background. For many photographs, black and white work pretty well.

The example also makes the rectangle a bit easier to see by using lines with thickness 2.


Download Example   Follow me on Twitter   RSS feed   Donate




This entry was posted in drawing, graphics and tagged , , , , , , , , , , , . Bookmark the permalink.

One Response to Draw dashed lines that are visible on any background in C#

  1. Pingback: Draw "marching ants" dashed lines in C# - C# HelperC# Helper

Leave a Reply

Your email address will not be published. Required fields are marked *