Draw text with a moving brush in C#

[moving background color]

This example uses a technique similar to the one used by the example Make a moving background in C#. It uses a gradient brush to draw its text.

When the program’s Timer fires, its Tick event handler refreshes the PictureBox to make the following Paint event handler draw the text.


private float GradientStart = 0;
private float Delta = 5f;

// Draw the background with text on top.
private void picCanvas_Paint(object sender, PaintEventArgs e)
{
    // Clear the background.
    int wid = picCanvas.ClientSize.Width;
    e.Graphics.Clear(Color.White);

    // Make the gradient brush.
    using (LinearGradientBrush brush = new LinearGradientBrush(
        new PointF(GradientStart, 0),
        new PointF(GradientStart + wid, 0),
        Color.Red, Color.Red))
    {
        brush.WrapMode = WrapMode.Tile;
        ColorBlend color_blend = new ColorBlend();
        color_blend.Colors = new Color[]
        {
            Color.Blue, Color.Blue,
            Color.White, Color.Blue, Color.Blue
        };
        color_blend.Positions =
            new float[] { 0, 0.4f, 0.5f, 0.6f, 1 };
        brush.InterpolationColors = color_blend;

        // Use the brush to draw some text.
        using (Font font = new Font("Times New Roman",
            16, FontStyle.Bold))
        {
            using (StringFormat string_format = new StringFormat())
            {
                string_format.Alignment = StringAlignment.Center;
                string_format.LineAlignment =
                    StringAlignment.Center;
                e.Graphics.DrawString("Moving Text Brush",
                    font, brush,
                    picCanvas.ClientSize.Width / 2,
                    picCanvas.ClientSize.Height / 2,
                    string_format);
            }
        }
    }

    // Increase the start position.
    GradientStart += Delta;
    if (GradientStart >= wid) GradientStart = 0;
}

The code clears the Graphics object and then creates a gradient brush. The gradient starts at the value GradientStart and extends for the width of the PictureBox. That makes it stick off the ends of the draw string by a considerable amount.

The code sets the brush’s WrapMode to Tile (which is the default anyway). It then sets the brush’s Positions and InterpolationColors properties so the brush shades through the colors blue, blue, white, blue, and blue. The Positions make the brush remain blue fairly close to the center of the brush so the change from blue to white is relatively abrupt.

The code then creates a font and uses it together with the brush to draw some text.

The event handler finishes by increasing the brush’s starting X coordinate, wrapping the starting position to 0 when it reaches the end of the PictureBox.

Because the brush has a narrow region of white in the middle makes the text appear to have a white area sweep through it. Because the brush extends past the ends of the text, there seems to be a slight pause before the white area repeats the sweep. In fact the white area is always sweeping, it’s just not always on the text. (There are other ways you could provide the same effect. For example, you could use a separate Timer to start a sweep every now and then.)

Download the example for additional details.


Download Example   Follow me on Twitter   RSS feed   Donate




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

Leave a Reply

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