We Keep Coding

Custom Measure String in C# without Graphics.MeasureString

I am trying to create an Image with a Caption/Text on it for Youtube-Thumbnails.
Following Rules are defined:
The Text is the Title of the Video and always changes from Thumbnail to Thumbnail.
The Porgram uses a pre-defined Text-Width which must not be touched by the Text on the Image.
The Text should be as close to the pre-defined with as possible.
So my thoughts were that I would use Graphics.MeasureString to be able to track the Width of the String on the Image and increase the Font-Size and repeat this until the pre-defined Width is closely reached but not touched.
But I have tested it with MeasureString and found out that it isn't that accurate. And also found confirmation here: Graphics.MeasureCharacterRanges giving wrong size calculations
I have tried the things they have recommended but with no success as the final width of my string always overflooded the image borders. Even if my pre-defined Width was way smaller than the Image Width. (Image Width: 1920; Pre-Defined Width: 1600)
So I came up with the Idea to create a custom Measurement Method and to write the String as I want it on a new Bitmap and to count the maximum Pixels of the String in Height and Width. (The Height is just for future stuff)
My current Code is:
public static SizeF MeasuredStringSize(string text, Bitmap originBitmap, FontFamily fontFamily, StringFormat strformat)
{
int currentFontSize = 10;
SizeF measuredSize = new();
var highestWidth = 0;
var highestHeight = 0;
while (highestWidth < maximumTextWidth)
{
Bitmap bitmap = new(originBitmap);
Bitmap _bitmap = new(bitmap.Width, bitmap.Height);
using Graphics graphics = Graphics.FromImage(bitmap);
if (graphics != null)
{
graphics.TranslateTransform(bitmap.Width / 2, bitmap.Height / 2);
currentFontSize++;
graphics.Clear(Color.White);
using GraphicsPath path = new();
using SolidBrush brush = new(Color.Red);
using Pen pen = new(Color.Red, 6)
{
LineJoin = LineJoin.Round
};
path.AddString(text, fontFamily, (int)fontStyle, currentFontSize, new Point(0, 0), strformat);
graphics.DrawPath(pen, path);
graphics.FillPath(brush, path);
Dictionary<int, List<int>> redPixelMatrix = new();
for (int i = 0; i < bitmap.Width; i++)
{
for (int j = 0; j < bitmap.Height; j++)
{
var currentPixelColor = bitmap.GetPixel(i, j);
if (currentPixelColor.B != 255 && currentPixelColor.G != 255 && currentPixelColor.R == 255)
{
if (!redPixelMatrix.ContainsKey(i))
{
redPixelMatrix.Add(i, new());
}
redPixelMatrix[i].Add(j);
}
}
}
highestWidth = redPixelMatrix.Keys.Count;
highestHeight = redPixelMatrix.Aggregate((l, r) => l.Value.Count > r.Value.Count ? l : r).Value.Count;
Console.WriteLine($"X:{highestWidth};Y:{highestHeight}");
//Debugging the final Image with Text to see the Result
bitmap.Save(ResultPath);
}
}
measuredSize = new SizeF(highestWidth, highestHeight);
return measuredSize;
}
The Resulting Image from bitmap.Save(ResultPath); as the String reaches the Image borders looks like this:
But the exact String width is 1742 instead of the width of my Image 1920 which should be more or less the same at this moment.
So, why is the Text nearly as wide as the Image but doesn't have the same width?

highestWidth = redPixelMatrix.Keys.Count; This will just count the number of columns containing red pixels, excluding any spaces in the text. You presumably want the minimum and maximum indices.
I.e.
var minX = int.MaxValue;
var maxX = int.MinValue;
// Loops over rows & columns
// Check if pixel is red
if(i > maxX) maxX = i;
if(i < minX) minX = i;
If you only want the text width and not the bounds you can just do maxX - minX.

C# How to nextline in e.Drawing when printing images

I'm generating a barcode depending on how many inputs that the user set in the numericUpDown control. The problem is when generating a lot of barcodes, the other barcodes cannot be seen in the printpreviewdialog because it I cannot apply a nextline or \n every 4-5 Images.
int x = 0, y = 10;
for (int i = 1; i <= int.Parse(txtCount.Text); i++)
{
idcount++;
connection.Close();
Zen.Barcode.Code128BarcodeDraw barcode = Zen.Barcode.BarcodeDrawFactory.Code128WithChecksum;
Random random = new Random();
string randomtext = "MLQ-";
int j;
for (j = 1; j <= 6; j++)
{
randomtext += random.Next(0, 9).ToString();
Image barcodeimg = barcode.Draw(randomtext, 50);
resultimage = new Bitmap(barcodeimg.Width, barcodeimg.Height + 20);
using (var graphics = Graphics.FromImage(resultimage))
using (var font = new Font("Arial", 11)) // Any font you want
using (var brush = new SolidBrush(Color.Black))
using (var format = new StringFormat() { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Far}) // Also, horizontally centered text, as in your example of the expected output
{
graphics.Clear(Color.White);
graphics.DrawImage(barcodeimg, 0, 0);
graphics.DrawString(randomtext, font, brush, resultimage.Width / 2, resultimage.Height, format);
}
x += 25;
}
e.Graphics.DrawImage(resultimage, x, y);
}

There's no "new lines" in rasterized graphics. There's pixels. You've got the right idea, every n number of images, add a new line. But since you're working with pixels, let's say every 4 images you're going to need to add a vertical offset by modifying the y coordinate of all your graphics draw calls. This offset, combined with a row height in pixels could look something like this:
var rowHeight = 250; // pixels
var maxColumns = 4;
var verticalOffset = (i % maxColums) * rowHeight;
Then, when you can supply a y coordinate, starting at or near 0, add the vertical offset to it.

Draw visible text on image regardless of image color

I want to print text on a 24bpp image using DrawString(). The problem is if I choose white as text color the text is nearly invisible in brighter image areas. If I choose red as text color the text is nearly invisible in image areas which contains more red. And so on.
What I want to achieve is that the text is visible in any circumstances. What I tried was tho draw the text with bold font and then draw the text using the same font but regular again. But the bold text is slightly wider so this is not a solution.
But what is the solution? Is there any?
Thanks!

If the image doesn't differ much such that one can assume you will paint a string in a region with a quite solid color, you can use the following solution.
You can first use an algorithm to calculate the most different color from another color as follows:
public static byte MostDifferent (byte original) {
if(original < 0x80) {
return 0xff;
} else {
return 0x00;
}
}
public static Color MostDifferent (Color original) {
byte r = MostDifferent(original.R);
byte g = MostDifferent(original.G);
byte b = MostDifferent(original.B);
return Color.FromArgb(r,g,b);
}
Now that we have done that, we must calculate the average color within the region where the string will be drawn. You can do this on Bitmap level with:
public static unsafe Color AverageColor (Bitmap bmp, Rectangle r) {
BitmapData bmd = bmp.LockBits (r, ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);
int s = bmd.Stride;
int cr = 0;
int cg = 0;
int cb = 0;
int* clr = (int*)(void*)bmd.Scan0;
int tmp;
int* row = clr;
for (int i = 0; i < r.Height; i++) {
int* col = row;
for (int j = 0; j < r.Width; j++) {
tmp = *col;
cr += (tmp >> 0x10) & 0xff;
cg += (tmp >> 0x08) & 0xff;
cb += tmp & 0xff;
col++;
}
row += s>>0x02;
}
int div = r.Width * r.Height;
int d2 = div >> 0x01;
cr = (cr + d2) / div;
cg = (cg + d2) / div;
cb = (cb + d2) / div;
bmp.UnlockBits (bmd);
return Color.FromArgb (cr, cg, cb);
}
Finally the algorithm first measures the rectangle where the string will be painted, next it determines the most different color and finally paints the string with that color:
public static void DrawColorString (this Graphics g, Bitmap bmp, string text, Font font, PointF point) {
SizeF sf = g.MeasureString (text, font);
Rectangle r = new Rectangle (Point.Truncate (point), Size.Ceiling (sf));
r.Intersect (new Rectangle(0,0,bmp.Width,bmp.Height));
Color brsh = MostDifferent (AverageColor (bmp, r));
g.DrawString (text, font, new SolidBrush (brsh), point);
}
Now you can call the method for instance as:
Bitmap bmp = new Bitmap("Foo.png");
Graphics g = Graphics.FromImage(bmp);
g.DrawColorString (bmp, "Sky", new Font ("Arial", 72.0f), new PointF (600.0f, 150.0f));
g.DrawColorString (bmp, "Sand", new Font ("Arial", 72.0f), new PointF (600.0f, 450.0f));
bmp.Save ("result.jpg");
This result for instance in:

I suggest drawing the text two (or three) times: Once in a dark and once in a bright color, set apart 1 or 2 pixels up & left, depending on the font size.
If your font is very small and only 1 pixel wide on many strokes then using triple drawing will help: two outer ones in one color (dark) and the 3rd one in the middle (bright)
Random R = new Random();
private void pictureBox2_Paint(object sender, PaintEventArgs e)
{
// using a loop for create random locations..:
for (int i=0; i< 33; i++)
{
Point pt = new Point(R.Next(pictureBox2.ClientSize.Width),
R.Next(pictureBox2.ClientSize.Width));
e.Graphics.DrawString("Hello World", Font, Brushes.Black, pt.X - 1, pt.Y - 1);
e.Graphics.DrawString("Hello World", Font, Brushes.Black, pt.X + 1, pt.Y + 1);
e.Graphics.DrawString("Hello World", Font, Brushes.White, pt.X , pt.Y);
}
}
Here is an example with triple drawing
:
(Note that the original looks a lot crisper that what I see in the browser. You may want to download it to check..)
If your images may contain very much noise and the font must be rather small, then adding a solid background behind the text will work better.

Issues with DrawString on a Bitmap

I have this constructor that takes in an input of an array of Color objects and some misc strings (like file location and size of list), and stores this heatmap into a bitmap instance called _image_. Everything works out fine, but my main issue is I have no way to render text onto this heatmap. I would like to overlay title text and x and y-axis labels onto this bitmap.
public HeatMap(IEnumerable<Color> colors, int width, int height, string file, int U, int V) {
if (colors == null)
throw new ArgumentNullException("colors");
if (width <= 0)
throw new ArgumentException("width must be at least 1");
if (height <= 0)
throw new ArgumentException("height must be at least 1");
_width = width;
_height = height;
_file = file;
_image = new Bitmap(U, V, PixelFormat.Format32bppArgb);
Graphics graphics = Graphics.FromImage(_image);
graphics.Clear(Color.White);
graphics.Dispose();
int x = 0;
int y = 0;
foreach (Color color in colors) {
_image.SetPixel(x, y, color); // This can be speeded up by using GH_MemoryBitmap if you want.
y++;
if (y >= V) {
y = 0;
x++;
}
if (x >= U)
break;
}
}
Below, I also have a method that resizes the image (without too much distortion), and I figured I might as well make use of this since I have a graphics object I can use, like so:
private Bitmap ResizeBitmap(Bitmap sourceBMP, int width, int height) {
Bitmap result = new Bitmap(width, height);
using (Graphics g = Graphics.FromImage(result)) {
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
g.DrawImage(sourceBMP, 0, 0, width, height);
g.DrawString("A heatmap.", SystemFonts.DefaultFont, Brushes.Black, 10, 10);
}
return result;
}
Using the above, I was able to overlay text over it, as a starting point. My question is, how do I add a white boarder over the above image (so my text doesn't overlap my graph), and then overlay x and y-axis text onto it?
I guess my specific question really is - how do I render text onto, say, every four columns of my heatmap? In most instances, there are 100 x-axis objects, and like 24 y-axis objects. The y-axis would have the time of the day, while the x-axis has the day of the year. My familiarity with using graphics in C# is very low, so any pointers is very appreciated.

You've to use the DrawString before the graphics.Dispose() and after the Clear().
Graphics graphics = Graphics.FromImage(_image);
graphics.Clear(Color.WhiteSmoke);
graphics.DrawString("your text", SystemFonts.DefaultFont, Brushes.Black, new PointF(0, 0));
graphics.Dispose();
Where the PointF(0, 0) represents the up-left corner of your text placeholder, you've to calculate the text position based on the positions of your heatmap.
UPDATE (alignment)
You can align your text in relation with a virtual rectangle, doing something like:
Graphics graphics = Graphics.FromImage(_image);
graphics.Clear(Color.WhiteSmoke);
StringFormat stringFormat = new StringFormat() { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center };
graphics.DrawString("your text", SystemFonts.DefaultFont, Brushes.Black, new RectangleF(0, 0, 100, 100), stringFormat);
graphics.Dispose();
In this case I've created a virtual box of 100x100 positioned on the top-left corner, and the text is h/v centered relatively to this box.

How Can i Distribute String in rectangle

I want to distribute string in rectangle.
Except each character set position
Rectangle displayRectangle = new Rectangle (new Point(40, 40), new Size (80, 80));
StringFormat format1 = new StringFormat(StringFormatFlags.NoClip);
format1.LineAlignment = StringAlignment.Center;
e.Graphics.DrawRectangle(Pens.Black, displayRectangle);
e.Graphics.DrawString("Showing Format1", this.Font,
Brushes.Black, (RectangleF)displayRectangle, format1);
But, StringFormat Alignment doesn't have distribute alignment. So I want to know a way how to distribute string in rectangle.

For the moment, I'm going to assume you can/will use the Win32 API (e.g., via. P/Invoke). .NET may have a wrapper for the function I'm going to suggest (but then again, it may not -- I'm really not sure). If it does, it'll be up to you to find and use it. Most of what I'm suggesting is more about the basic approach than the function anyway.
You can use GetTextExtentExPointI, which will compute the size of a rectangle necessary to hold a set characters you specify and (importantly) the horizontal position of each character in that rectangle.
So, what you want to do is use this to compute the size of a rectangle and position of each character in that rectangle, with it assuming normal kerning of the characters. Then, you'll divide the width of that rectangle into the width you actually want. This will give you a factor by which each position must increase to get that character to the position you want. You'll then multiply the position it returned for each character by that factor to get your desired position.
Just for example, let's assume it gave you positions of 0, 17, 35 and 44 for the characters with normal spacing. Let's also assume your target rectangle is 1.8 times as wide as the rectangle it computed for normal spacing. You'll take each of those positions and multiply by 1.8 to get the position you want to use for that character, giving 0, 31, 63, and 79 for the "corrected" positions.
Then you'll (obviously enough) go through your string and draw each character at the computed position.

Here's how to do it if you just want to literally distribute the characters evenly across the middle of the display rectangle:
private void Form1_Paint(object sender, PaintEventArgs e)
{
string text = "this is distribute";
Rectangle displayRectangle = new Rectangle(new Point(40, 40), new Size(400, 80));
e.Graphics.DrawRectangle(Pens.Black, displayRectangle);
int step = displayRectangle.Width / text.Length;
SizeF szF = e.Graphics.MeasureString(text, this.Font); // just to get the HEIGHT
int y = (displayRectangle.Y + displayRectangle.Height / 2) - (int)szF.Height / 2;
for (int i = 0; i < text.Length; i++)
{
e.Graphics.DrawString(text.Substring(i, 1), this.Font, Brushes.Black, displayRectangle.X + (i * step), y);
}
}

Here's my stab at #Jerry Coffin's algorithm using .Net managed methods:
private void Form1_Paint(object sender, PaintEventArgs e)
{
string text = "this is distribute";
Rectangle displayRectangle = new Rectangle(new Point(40, 40), new Size(400, 80));
e.Graphics.DrawRectangle(Pens.Black, displayRectangle);
StringFormat format1 = new StringFormat(StringFormatFlags.NoClip);
format1.LineAlignment = StringAlignment.Center;
format1.Alignment = StringAlignment.Near;
// SetMeasurableCharacterRanges() can only handle 32 regions max at a time!
// The below workaround simply measures each character separately:
RectangleF rcF = (RectangleF)displayRectangle;
List<Region> regions = new List<System.Drawing.Region>();
for (int i = 0; i < text.Length; i++)
{
format1.SetMeasurableCharacterRanges(new CharacterRange[] {new CharacterRange(i, 1)});
regions.AddRange(e.Graphics.MeasureCharacterRanges(text, this.Font, rcF, format1));
}
RectangleF minBounds = regions[0].GetBounds(e.Graphics);
RectangleF maxBounds = regions[regions.Count - 1].GetBounds(e.Graphics);
float ratio = (float)displayRectangle.Width / (float)((maxBounds.X + maxBounds.Width) - minBounds.X);
for(int i = 0; i < regions.Count; i++)
{
Region region = regions[i];
RectangleF boundsF = region.GetBounds(e.Graphics);
PointF ptF = new PointF(displayRectangle.X + (int)((boundsF.Left - minBounds.X) * ratio), (int)boundsF.Top);
e.Graphics.DrawString(text.Substring(i, 1), this.Font, Brushes.Black, ptF);
}
}