Question

I’m using the Drawstring method of the Graphics Class to Draw a Text on an Image.The Font is Specified before drawing.

G.DrawString(mytext, font, brush, 0, 0)

The Problem arises when the same text is drawn on an image with smaller size.The Text drawn appears to be larger.I’m looking for a solution to alter the font size according to the image size so that the text don’t appear larger or smaller when drawn on images of different sizes.

I’m attaching the images with different sizes with the text of same font size drawn on it.
https://i.stack.imgur.com/ZShUI.jpg

https://i.stack.imgur.com/GUfbM.jpg

I can’t directly post the image because I’m not allowed.

Answer 1

You would get most precise scaling by drawing on separate image and then slapping that image onto original one. You’d do that as follows:

1. Create in-memory Bitmap with enough space
2. Draw text on that bitmap in your default font
3. Draw image containing the text onto original image by scaling it to size you need

Code:

Bitmap textBmp = new Bitmap(100, 100);
Graphics textBmpG = Graphics.FromImage(textBmp);
textBmpG .DrawString("test 1", new Font(FontFamily.GenericSansSerif, 16), Brushes.Red, new PointF(0, 0));
Graphics origImgG = Graphics.FromImage(originalImg);
origImgG.DrawImage(textBmpG, new Rectangle(50, 50, 50, 50), new Rectangle(0, 0, 100, 100), GraphicsUnit.Pixel);

Take notice of last line and Rectangle parameters. Use them to scale your text bitmap onto original image. Alternatively, you can also choose Graphics.MeasureString method to determine how wide your text would be and make attempts until you get best one you can.

1. Use Graphics.MeasureString() to measure how big your string would be on the image
2. Decrease/increase font step by step accordingly

As you requested in comment I’ll give you more detailed suggestion here. Say your original image width is WI1, and width of text on it using Graphics.MeasureString is WT1. If you resize your image to width WI2, then your perfect text width would be WT2 = WT1 * WI2 / WI1. Using DrawText method you may not be able to get this exact width because when you increase font by 1 it may jump over that value. So you have to make several attempts and find best. Pick a size of font, if resulting text width is smaller (measure with MeasureString), increase it until it becomes bigger than target and you’ve got about closest match. Same thing goes if it’s too big. Decrease font step by step.

This is quick and dirty as you see, because you have many draws, but I can’t think of better solution, unless you’re using monospaced fonts.

Difference between those solutions would be that in first you can get text to fit EXACT size you need, but you probably would loose some font readability due to scaling. Second solution would give good readability, but you can’t get pixel perfect size of text.