BLOG.CSHARPHELPER.COM: Draw smooth text, shapes, and images in C#
Draw smooth text, shapes, and images in C#
When drawing, C# sometimes favors speed over quality. If you look closely at the picture shown here, you'll see that the text, image, and ellipse on the left all have bumpy pieces. In contrast the text, image, and ellipse on the right are smooth. The difference is even greater on the full-sized form.
The example program uses the following code to draw its text, images, and ellipses.
// Draw text, shapes, and pictures smoothly and not smoothly.
private void Form1_Paint(object sender, PaintEventArgs e)
{
int x, y;
using (Font the_font = new Font("Times New Roman", 16))
{
// Draw without smoothing.
e.Graphics.TextRenderingHint =
System.Drawing.Text.TextRenderingHint.SingleBitPerPixelGridFit;
x = 10;
y = 10;
e.Graphics.DrawString("Without Smoothing", the_font, Brushes.Blue, x, y);
y += 25;
e.Graphics.DrawImage(Properties.Resources.Smiley100x100,
x, y, 50, 50);
y += 60;
e.Graphics.DrawEllipse(Pens.Red, x, y, 100, 50);
// Draw with smoothing.
e.Graphics.SmoothingMode =
System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
e.Graphics.TextRenderingHint =
System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
e.Graphics.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.High;
x = 200;
y = 10;
e.Graphics.DrawString("With Smoothing", the_font, Brushes.Blue, x, y);
y += 25;
e.Graphics.DrawImage(Properties.Resources.Smiley100x100,
x, y, 50, 50);
y += 60;
e.Graphics.DrawEllipse(Pens.Red, x, y, 100, 50);
}
}
By default, the Graphics object uses high-quality text rendering so for many programs you don't need to change the TextRenderingHint property. This example initially sets the Graphics object's TextRenderingHint property to SingleBitPerPixelGridFit so you can see what lower quality text looks like, but you wouldn't do that in a real program. By default the Graphics object draws images and shapes at a lower quality, however, so you may want to change the other drawing properties described shortly.
After setting TextRenderingHint, the program draws some text, and image that is scaled to half its original size, and an ellipse. The results are shown on the left of the picture.
Next the program sets the Graphics object's smoothing properties. SmoothingMode determines how smoothly shapes such as lines and ellipses are drawn, TextRenderingHint determines how smoothly text is drawn, and InterpolationMode determines how smoothly images are drawn when they are resized. (You can experiment with the code to see the effects of the other values that these properties can take.)
After setting these properties, the program again draws text, a resized image, and an ellipse. This time the results are smooth.
There is a small performance penalty for drawing smoothly, but the difference is so small that you won't notice it in most programs. You will probably only see a difference in programs that draw a huge number of shapes or images. In that case you can consider removing the smoothing to save time.
Comments