Draw text filled with a picture in C#

Draw text filled with a picture

This example shows how you can draw text filled with a picture. It uses two images added to the project as resources.

(To add resources to the project, open the Project menu and select the Properties command at the very bottom. On the Properties page, click the Resources tab. Now you can use the Add Resource dropdown menu to add existing or new files to the program’s resources.

When it loads, this program draws two pieces of text filled with pictures. It first uses the following code to fill text with a single big image.

// Make the image.
private void Form1_Load(object sender, EventArgs e)
{
    // Make the bitmap we will display.
    Bitmap bm = new Bitmap(
        this.ClientSize.Width, this.ClientSize.Height);
    using (Graphics gr = Graphics.FromImage(bm))
    {
        gr.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
        gr.Clear(this.BackColor);

        // Make text filled with a single big image.
        // Make a brush containing the picture.
        using (TextureBrush the_brush =
            new TextureBrush(Properties.Resources.ColoradoFlowers))
        {
            // Draw the text.
            using (Font the_font = new Font("Times New Roman",
                150, FontStyle.Bold))
            {
                gr.DrawString("Flowers", the_font, the_brush, 0, 0);
            }
        }
        ...

This code creates a Bitmap and a Graphics object associated with it. It sets the Graphics object’s TextRenderingHint to make the text smoother.

Next the code creates a TextureBrush holding the large image contained in the ColoradoFlowers resource. It makes a big font and then uses DrawString to draw the text, filling it with the brush.

Note: Depending on where the text is drawn and where the brush’s origin is, the image may not fit the text nicely. For example, the edge of the image may run through the middle of the text. In that case, DrawString will repeat the image as needed, but you may see the border between two copies of the image and that may look ugly. If necessary, you can use the brush’s TranslateTransform method to move the brush’s origin so it lines up with the text better.

After drawing the first piece of text, the program uses the following code to draw the second.

        // Make text filled with a tiled image.
        // Make a brush containing the picture.
        using (TextureBrush the_brush =
            new TextureBrush(Properties.Resources.Smiley))
        {
            // Draw the text.
            using (Font the_font = new Font("Times New Roman",
                150, FontStyle.Bold))
            {
                gr.DrawString("Smile!", the_font, the_brush, 75, 175);
            }
        }
    }

    // Display the result.
    this.BackgroundImage = bm;
}

This code creates another TextureBrush using a different image resource. This time the resource is small, so it is tiled to fill the text. You can see the different results in the picture above.


Download Example   Follow me on Twitter   RSS feed




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

Leave a Reply

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