Draw text with a stroke onto an image in .Net

Question

I am currently using the System.Drawing.Graphics.DrawString() method in .Net to draw text on top of an image, and then save it to a new file:

// define image file paths
string sourceImagePath = HttpContext.Current.Server.MapPath("~/img/sourceImage.jpg");
string destinationImagePath = HttpContext.Current.Server.MapPath("~/img/") + "finalImage.jpg";

// create new graphic to draw to
Bitmap bm = new Bitmap(200, 200);
Graphics gr = Graphics.FromImage(bm);

// open and draw image into new graphic
System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(sourceImagePath, true);
gr.DrawImage(sourceImage, 0, 0);
sourceImage.Dispose();

// write "my text" on center of image
gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;

PrivateFontCollection fontCollection = new PrivateFontCollection();
fontCollection.AddFontFile(HttpContext.Current.Server.MapPath("~/fonts/HelveticaNeueLTStd-BlkCn.ttf"));
// prototype (1)
gr.DrawString("my text", new Font(fontCollection.Families[0], 14, FontStyle.Bold), new SolidBrush(Color.FromArgb(255, 255, 255)), 100, 0, sf);
fontCollection.Dispose();

// save new image
if (File.Exists(destinationImagePath))
{
    File.Delete(destinationImagePath);
}
bm.Save(destinationImagePath);
bm.Dispose();
gr.Dispose();

This method of adding text on an image does not provide a way (that I know of) to add a stroke to the text. For example, what I really need to do is add a 2px stroke of a certain color to the text that is written on the image.

How can this be done with the .Net Framework <= v3.5?

Answer 1

Not sure if this is exactly what you're looking for, but try using a LinearGradientBrush instead of a SolidBrush in your code.

I'm not sure what you mean by "stroke" in this question, but if you want, say, all pixels on rows 7 and 8 to be red, you can use a System.Drawing.TextureBrush instead of a SolidBrush. You would create a Bitmap one pixel wide and tall enough for your font (all black except for rows 7 and 8 which would be red), and then use the constructor for TextureBrush that takes this Bitmap as a parameter.

Answer 2

A bit of a hack, but you could layer two sets of text one atop the other, with the lower layer scaled up just slightly. Might not work perfectly for all fonts but it's worth a try.

Answer 3

All text has strokes.

If by stroke you mean outline, then you create a GraphicsPath and add the string using AddString, you can then outline the path using DrawPath rather than FillPath as used in the example on msdn.

    private void Form1_Paint(object sender, PaintEventArgs e)
    {
        // Create a GraphicsPath object.
        GraphicsPath myPath = new GraphicsPath();

        // Set up all the string parameters.
        string stringText = "Sample Text";
        FontFamily family = new FontFamily("Arial");
        int fontStyle = (int)FontStyle.Italic;
        int emSize = 96;
        Point origin = new Point(20, 20);
        StringFormat format = StringFormat.GenericDefault;

        // Add the string to the path.
        myPath.AddString(stringText,
            family,
            fontStyle,
            emSize,
            origin,
            format);

        //Draw the path to the screen.
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
        e.Graphics.FillPath(Brushes.BlanchedAlmond, myPath);
        e.Graphics.DrawPath(new Pen(Brushes.Azure, 2), myPath);
    }

If by stroke you mean strike, then use the Strikeout font style.

If by stroke you mean serif, then use a different font.