Develop Reference

Draw text to image change bug [duplicate]

This question already has answers here:
Drawing aligned strings by formatting double values
(3 answers)
How to draw a table using System.Drawing
(1 answer)
Graphics.DrawString() & leading padding spaces for Proportional Font
(1 answer)
How to create control that draws a table in panel
(1 answer)
Closed 1 year ago.
I want to create program that draws text on image. For that purpose I used this method:
private static Image DrawText(String text, Font font, Color textColor, Color backColor)
{
//first, create a dummy bitmap just to get a graphics object
Image img = new Bitmap(1, 1);
Graphics drawing = Graphics.FromImage(img);
//measure the string to see how big the image needs to be
SizeF textSize = drawing.MeasureString(text, font);
//free up the dummy image and old graphics object
img.Dispose();
drawing.Dispose();
//create a new image of the right size
img = new Bitmap((int)textSize.Width, (int)textSize.Height);
drawing = Graphics.FromImage(img);
//paint the background
drawing.Clear(backColor);
//create a brush for the text
Brush textBrush = new SolidBrush(textColor);
drawing.DrawString(text, font, textBrush, 0, 0);
drawing.Save();
textBrush.Dispose();
drawing.Dispose();
return img;
}
My problem is that I want to draw table in the image, so the table should look like:
I used this library for drawing table
And code looks like this method from above
var table = new ConsoleTable("one", "two", "three")
.AddRow("random text';", "random text", "random text")
.Configure(o => o.NumberAlignment = Alignment.Left)
.ToString();
DrawText(table, new Font("Verdana", 20), Color.Black, Color.White);
And i got this kind of image
Rows are really changed and it doesn't look like table above. I think method DrawText changed something but I don't know what exactly it is? So I need help. Sorry for my bad English

If you don't need Verdana (which isn't a monospaced font), you should be able to fix this by slightly altering your call to DrawText like so:
DrawText(table, new Font(FontFamily.GenericMonospace, 20), Color.Black, Color.White);
I'm not actually super familiar with working with fonts, so using FontFamily.GenericMonospace is sort of my best guess. You should be able to use others though. Wikipedia has a list of them.

How can i change in Graphics DrawString the text font size?

I'm using this method to draw the text on form1:
private bool DrawText(bool draw, string texttodraw)
{
Graphics g = this.CreateGraphics();
SizeF size = g.MeasureString(texttodraw, SystemFonts.DefaultFont,14);
g.DrawString(texttodraw, Font, Brushes.Red, pictureBox1.Location.X + (pictureBox1.Width / 2) - (size.Width / 2),
pictureBox1.Location.Y - 30);
return draw;
}
I tried to set Width to 14 on the SizeF size lline but it didn't change the dize and the only thing it did is moving a bit the text from it's location .
How can i change the font size of the text, and also to keep the perspective(if this is the right word to use) of the text location ?
This is how it look like when not using the Width 14 at all the text is in the center above the pictureBox1. I want that when i change the text size it will be kept to be in the center like it is now.
The text is in Red and it's in hebrew in this case.

Try using a bigger font:
using (Font bigFont = new Font(SystemFonts.DefaultFont.FontFamily, 14, FontStyle.Regular)) {
SizeF size = g.MeasureString(texttodraw, bigFont, 14);
g.DrawString(texttodraw, bigFont, Brushes.Red, pictureBox1.Location.X + (pictureBox1.Width / 2) - (size.Width / 2),
pictureBox1.Location.Y - 30);
}
Do avoid using CreateGraphics, it's only a temporary drawing that will get erased by overlapping windows or minimizing the form. It will also cause flicker. Use the graphics object from the paint event and invalidate the control to update the painting.
Also, do favor using TextRenderer.DrawText and TextRenderer.MeasureText for your text renderings. DrawString should primarily be used for printing to paper.

I think the best way is to use StringFormat object to center-align the text either horizontally or vertically or both using the 5th overload of Graphics.DrawString() funciton:
You need to provide a Rectangle objet and alignment is done with respect to this object.
StringFormat sf=new StringFormat();
sf.LineAlignment = StringAlignment.Center;//center-align vertically
sf.Alignment = StringAlignment.Center; //center-align horizontally

private void printDocument_PrintPage(object sender, System.Drawing.Printing.PrintPageEventArgs e)
{
Font drawFont = new Font("Arial Black", 9);
e.Graphics.DrawString(nic.Text, drawFont, Brushes.Maroon, 174, 12);

Panel displays scaled images

I am using this code to draw a scrollable panel on win form. The ImageBox is 512x512 and image I am using is 1024x768 (added as resource):
imageBox1.Image = Properties.Resources.test;
Unfortunately, it seems like image is scaled for some reasons - I cannot scroll to it's border. If I use 512x512 image, it doesn't fit the ImageBox, it seems cropped. Any ideas what is going on here?
using System;
using System.Drawing;
using System.Windows.Forms;
class ImageBox : Panel {
public ImageBox() {
this.AutoScroll = true;
this.DoubleBuffered = true;
}
private Image mImage;
public Image Image {
get { return mImage; }
set {
mImage = value;
if (mImage != null) this.AutoScrollMinSize = mImage.Size;
else this.AutoScrollMinSize = new Size(0, 0);
this.Invalidate();
}
}
protected override void OnPaint(PaintEventArgs e) {
e.Graphics.TranslateTransform(this.AutoScrollPosition.X, this.AutoScrollPosition.Y);
if (mImage != null) e.Graphics.DrawImage(mImage, 0, 0);
base.OnPaint(e);
}
}

It is an issue with the resolution of the image, it is less than the resolution of your display. Pretty unusual.
There is more than one workaround for this. #TaW's approach works but favors the monitor resolution. You'll get a sharper image but it will not be close to the image size as originally recorded. The other approach is to keep the physical size, like DrawImage() does, and adjust the scrollbars accordingly. Change the Image property setter to:
set {
mImage = value;
if (value == null) this.AutoScrollMinSize = new Size(0, 0);
else {
var size = value.Size;
using (var gr = this.CreateGraphics()) {
size.Width = (int)(size.Width * gr.DpiX / value.HorizontalResolution);
size.Height = (int)(size.Height * gr.DpiY / value.VerticalResolution);
}
this.AutoScrollMinSize = size;
}
this.Invalidate();
}
Picking the "right" approach is not so obvious, you probably ought to consider adding another property so you can change it as needed.

DrawImage has many variants and it is well worth checking them all out carefully. You have chosen the wrong one for your purpose. Look at the doc at MSDN:
Graphics.DrawImage Method (Image, Int32, Int32)
...
Draws the specified image, using its original physical size,
at the location specified by a coordinate pair.
At first glance this sounds good. 'Physical size' - isn't that pixels? But read on at MSDN:
Remarks
An Image stores a value for pixel width and a value for horizontal resolution
(dots per inch). The physical width, measured in inches, of an image is
the pixel width divided by the horizontal resolution. For example,
an image with a pixel width of 216 and a horizontal resolution of 72 dots
per inch has a physical width of 3 inches. Similar remarks apply to pixel
height and physical height.
The DrawImage method draws an image using its physical size, so the image will
have its correct size in inches regardless of the resolution (dots per inch)
of the display device. For example, suppose an image has a pixel width of 216
and a horizontal resolution of 72 dots per inch. If you call DrawImage to
draw that image on a device that has a resolution of 96 dots per inch,
the pixel width of the rendered image will be (216/72)*96 = 288.
Ouch, that's not about pixels after all! It is about displays and the resolution the image has embedded in it..This is good if you want to get the image e.g. printed right on all printers.
But you want the pixels of the image to match the pixels of the display. You could adapt the resolution of the image to your screen; but that wouldn't work for a different screen. So this DrawImage call will not work for you..
So you should, quite simply, use the number of pixels your image has and feed them into the right DrawImage call:
e.Graphics.DrawImage(mImage, 0, 0, mImage.Width, mImage.Height);
Now it will not distort the image but put one image pixel onto one screen pixel..
Edit: Note: I had misquoted MSDN in my OP; now the right (but wrong for your purpose) method call is quoted in the first part..

Bitmap Text Background and HorizontalAlignment

I am overlaying text to a bitmap as shown below, I need to be able to set a background colour behind the text and also set the HorizontalAlignment (i.e left/right/centre), can anyone advise me how this can be done. Also note the text size can vary.
Thanks.
Bitmap frameBitmap = new Bitmap(streamFrameWidth, streamFrameHeight,
streamFrameWidth * 3,
System.Drawing.Imaging.PixelFormat.Format24bppRgb, pFrame);
using (Graphics g = Graphics.FromImage(frameBitmap))
{
// Create font and brush.
Font drawFont = new Font("Arial", 12, FontStyle.Bold);
SolidBrush drawBrush = new SolidBrush(Color.Black);
// Create point for upper-left corner of drawing.
PointF drawPoint = new PointF(10.0F, 40.0F);
//HorizontalAlignment.
// draw the text
g.DrawString(overlayText, drawFont, drawBrush, drawPoint);
}

You can control the alignment of the drawn text by using the StringFormat parameter of the DrawString method.
Example
MSDN

You probably need TextRenderer.MeasureText.
It returns the size of the text to be displayed. Combining the size of the text with the size of the Bitmap, you can work out the appropriate location of the text based upon the required HorizontalAlignment.
Once you know the bounds (size and location) of the text, you can simply paint a color to those bounds to implement a background colour before drawing the text on top.

TextRenderer.DrawText in Bitmap vs OnPaintBackground

If I use TextRenderer.DrawText() using the Graphics object provided in the OnPaintBackground my text looks perfect. If I create my own Bitmap and use the Graphics object obtained from my Bitmap my text looks terrible. It looks like it is anti-aliasing the text using black, not the bitmap's background color. I can avoid this problem if I use Graphics.DrawString(), but this method has horrible kerning problems. What should I do? How can I get TextRenderer.DrawText() to anti-alias properly using the Bitmap's contents?
Looks terrible:
Bitmap bmp = new Bitmap(100, 100, PixelFormat.Format32bppArgb);
using (Graphics g = Graphics.FromImage(bmp))
{
g.Clear(Color.Red);
TextFormatFlags tf = TextFormatFlags.Left;
TextRenderer.DrawText(g, #"C:\Development\Testing\blag", font, clip, Color.White,
Color.Transparent, tf);
}
Looks good, but I want to render this onto a bitmap, NOT onto the control's surface:
protected override void OnPaintBackground(PaintEventArgs e)
{
e.Graphics.Clear(Color.Red);
TextFormatFlags tf = TextFormatFlags.Left;
TextRenderer.DrawText(e.Graphics, #"C:\Development\Testing\blag", font, clip,
Color.White, Color.Transparent, tf);
}
What is the difference?

The answer is not to use TextRenderer. TextRenderer is a wrapper for the GDI (not GDI+) implementation of text rendering, which has lots of features, but doesn't interoperate well with in-memory DCs as you have discovered.
Use Graphics.DrawString & Graphics.MeasureString, but remember to pass it StringFormat.GenericTypographic to get accurate size and positioning.
The reason TextRenderer was introduced initially was that GDI+ didn't support all the complex scripts that GDI's Uniscribe engine did. Over time however GDI+ support for complex scripts has been expanded, and these days there aren't any good reasons left to use TextRenderer (it's not even the faster of the two anymore, in fact quite the opposite it appears).
Really, though, unless you are running into serious, measurable performance issues just use Graphics.DrawString.

I believe the problem is that the clear type text rendering doesn't work if the background is transparent. A few possible solutions.
Option 1. Fill the background of your bitmap with a color.
If you do this (as Tim Robinson did above in his code example by using g.Clear(Color.Red)) clear type will do the right thing. But your bitmap won't be completely transparent which might not be acceptable. If you use Graphics.MeasureText, you can fill just the rectangle around your text, if you like.
Option 2. Set TextRenderingHint = TextRenderingHintAntiAliasGridFit
This appears to turn off clear type. The text will be rendered at a lower quality than clear type on a background, but much better than the mess clear type on no background creates.
Option 3. Fill the text rectangle with white, draw the text and then find all the non-text pixels and put them back to transparent.
using (Bitmap bmp = new Bitmap(someWidth, someHeight))
{
using (Graphics g = Graphics.FromImage(bmp))
{
// figure out where our text will go
Point textPoint = new Point(someX, someY);
Size textSize = g.MeasureString(someText, someFont).ToSize();
Rectangle textRect = new Rectangle(textPoint, textSize);
// fill that rect with white
g.FillRectangle(Brushes.White, textRect);
// draw the text
g.DrawString(someText, someFont, Brushes.Black, textPoint);
// set any pure white pixels back to transparent
for (int x = textRect.Left; x <= textRect.Left + textRect.Width; x++)
{
for (int y = textRect.Top; y <= textRect.Top + textRect.Height; y++)
{
Color c = bmp.GetPixel(x, y);
if (c.A == 255 && c.R == 255 && c.G == 255 && c.B == 255)
{
bmp.SetPixel(x, y, Color.Transparent);
}
}
}
}
}
I know, it's a horrible hack, but it appears to work.

The answer is to use a BuffersGraphicsContext. This is the same system that .NET uses internally when you set the ControlStyles.OptimizedDoubleBuffer style on a control.
See http://msdn.microsoft.com/en-us/library/b367a457.aspx for more information about double buffering in .NET.

Another possible solution: Draw the whole thing to the screen, bitmap with text on top, and then write some code to 'screen capture' that portion of the screen. Not practical in all cases but you're right, DrawString creates weird text and DrawText onto a bitmap looks horrible.

If your bitmap is not the same size as your display area, it might just be a resizing issue, where .NET scales the bitmap to the display size and you get funny looking text.
Can you test with a bitmap created at the same size as your display area?

Can you post the smallest program that suffers from this problem? I can't reproduce it like this -- the antialiasing looks fine:
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;
public class Program
{
public static void Main()
{
Bitmap bmp = new Bitmap(100, 100, PixelFormat.Format32bppArgb);
using (Font font = new Font("Arial", 10, GraphicsUnit.Point))
using (Graphics g = Graphics.FromImage(bmp))
{
Rectangle clip = Rectangle.FromLTRB(0, 0, 100, 100);
g.Clear(Color.Red);
TextFormatFlags tf = TextFormatFlags.Left;
TextRenderer.DrawText(g, #"C:\Development\Testing\blag", font, clip, Color.White, Color.Transparent, tf);
}
Form form = new Form();
form.BackgroundImage = bmp;
Application.Run(form);
}
}