Draw rainbow compound lines in WPF and C#

[rainbow compound lines]

The post Make compound lines in WPF and C# shows how to make compound lines, lines that are striped lengthwise. Once you know how to do that, it’s easy to make rainbow compound lines. The following code shows how this example converts the shape at runtime into the rainbow lines.

private void btnGo_Click(object sender, RoutedEventArgs e)
    // Get the outline path.
    PathGeometry flat =
    double thickness = scribblePath.StrokeThickness;

    // Define the stripe brushes.
    Brush[] brushes =
        Brushes.Red, Brushes.Orange, Brushes.Yellow,
        Brushes.Lime, Brushes.Blue, Brushes.Indigo,

    // Give each stripe the same thickness.
    double stripe_thickness = 1.0 / brushes.Length;
    double[] thicknesses = new double[brushes.Length];
    for (int i = 0; i < thicknesses.Length; i++)
        thicknesses[i] = stripe_thickness;

    // Get Shapes representing the path's stripes.
    List<Shape> shapes = GetPathStripeShapes(
        flat, thickness, thicknesses, brushes);

    // Add the Shapes to the main Grid.
    foreach (Shape shape in shapes)

    // Remove the original path.
    btnGo.IsEnabled = false;
    btnGo.Opacity = 0.5;

This code starts by getting the original path’s flattened points and thickness.

Next the code makes an array of Brush objects to define the stripes’ colors. It then initializes an array of thicknesses, giving each stripe the same width.

The code passes the Brushes and thicknesses arrays into the GetPathStripeShapes method to get the rainbow shapes. It then adds the shapes to the main Grid control.

The code finishes by removing the original path from the Grid and disabling the Go button.

[rainbow compound lines]
Notice that the stripes don’t act as a single thick ribbon when they overlap themselves. For example, you might prefer the shapes to look like the picture on the right. To do that, you would need to calculate where the shapes intersected themselves and then break them into non-overlapping pieces.

[rainbow compound lines]
This code shows a basic approach you can use to draw just about any shape with compound lines. Simply replace the values in the thicknesses and Brushes arrays and the rest of the code will be roughly the same. For example, the picture on the left shows the program using 10 different shades of blue for its stripes.

Feel free to download the example and experiment with it.

Download Example   Follow me on Twitter   RSS feed   Donate

About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in algorithms, drawing, graphics, mathematics and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

2 Responses to Draw rainbow compound lines in WPF and C#

  1. Alex Yang says:

    Hey Rod:
    First of all, I want to say that “Draw rainbow compound lines in WPF and C#” is an amazing work, and code is so simple and clear. Great job.
    Second, I have read through all your codes, but I didn’t understand some part of codes.

    double dx12 = p2.X - p1.X;
    double dy12 = p2.Y - p1.Y;
    double dx34 = p4.X - p3.X;
    double dy34 = p4.Y - p3.Y;
    // Solve for t1 and t2
    double denominator = (dy12 * dx34 - dx12 * dy34);
    double t1 =
        ((p1.X - p3.X) * dy34 + (p3.Y - p1.Y) * dx34)
            / denominator;

    Is some kind of theory for solving intersect point ?
    Can you give me some cue?

    Best regards

Comments are closed.