Search code examples
.netgraphicstextgdi

Draw text with a stroke onto an image in .Net


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?


Solution

  • 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.