1. Technology

Tutorial Four - Examples of Displaying Text

By

With an overview of GDI+ Overview of GDI+ in tutorial one, and having seen how to get the Graphics object that we need in the tutorial two, in this tutorial I'll be showing how to draw text on a graphic's surface in C#. First a little background..

Fonts

Windows changed all that and True Type Fonts (developed by Apple in the late 1980s) were a fantastic innovation that replaced hand tuned bitmap fonts. They are part of Windows and Mac while Linux uses an open version called FreeType.

.NET supports Fonts through the Font tyope and FontCollections and FontFamilies. An application can include its own fonts as a PrivateFontCollection that is installed temporarily, and either installs new fonts or a version of an existing Font such as Ariel.

What is a Font?

We think of a font as a collection of letters, digits etc all in the same style (known as Typeface). In .NET fonts are grouped into Families. On my PC, I have Arial, Arial Black, Arial Narrow and Arial Unicode MS. Each of these is a Font Family. A Font is a family member with a specified size, style, and units.

This code lists all the FontFamilies on a PC. You can use the FontFamily Name to create a Font. Just drop a button a form name it to btnListFamily then double click it to get the even handler below (btnListFamily_Click) then add the function OutputFontsFamiliies and the call to it.


private void OutputFontsFamilies()
{
    using (var sw = new StreamWriter(@"flist.txt"))
    {
    foreach (var aFamily in FontFamily.Families)
    {
      sw.WriteLine(aFamily.Name) ;
    }

  sw.Close() ;
    }
}

private void btnListFamily_Click(object sender, EventArgs e)
{
    OutputFontsFamilies() ;
}

On my system the file flist.txt has 158 families from Aharoni, Algerian, Andalus through to Windings 3.

This code uses a Font Family to create a Font then calls the Graphics objects DrawString() method to output the text in red. Remember from previous tutorials that the brush dtermines the color and shading of the text.

var bm = new Bitmap(pb.Size.Width,pb.Size.Height) ;
var redbrush = new SolidBrush(Color.Red) ;
var afontFamily = new FontFamily("Arial Narrow") ;
var font = new Font(afontFamily,15,GraphicsUnit.Point) ;

var g = Graphics.FromImage(bm) ;
g.DrawString("Some Text",font,redbrush,20,20) ;
pb.Image = bm;

The two lines with the FontFamily can be replaced by this one line if you aren't using many fonts.

var font2 = new Font("Arial Narrow",15,GraphicsUnit.Point);

Outputting Text

In the old days of GDI you just used g.DrawText but now with GDI+ you have the alternative g.DrawString that I used in the example above.

Myself I use the GDI+ DrawString but there is a TextRenderer class in the System.Windows.Forms namespace that has a DrawText() method with a number of overloads. This is for drawing onto forms should you wish.

DrawString

There are four overloads of Graphics.DrawString(), two with StringFormat parameters and two without. One includes a Rectangle so you can confine the text to that rectangle.

StringFormatFlags lets you specify Right to Left text or vertical, as well as controlling line wrapping and other attributes.

This example displays a short phrase vertically and backwards vertically. It shows mixing StringFormatFlags (which are bits so need to be ored together). The first format string displays Look at Me from top to bottom. The second one ors in DirectionRightToLeft which would display it in the same orientation as before but further to the right.

Using an Array to reverse the phrase means it displays backwards from bottom to top.

var rect = new Rectangle(40, 40, 100, 100);
var format = new StringFormat(StringFormatFlags.DirectionVertical ) ;
const string s = "Look at Me";
g.DrawString(s,font,redbrush,rect,format) ;
format = new StringFormat(StringFormatFlags.DirectionVertical | StringFormatFlags.DirectionRightToLeft) ;
var rev = s.ToCharArray() ;
Array.Reverse(rev) ;
g.DrawString(new string(rev),font,redbrush,rect,format) ;

If you reduce the 100,100 to 80,80 in the line that starts var rect then the text wraps as well as bringing the columns closer.

There's not a lot more to say about text. The graphics object has properties that let you affect the anti-aliasing and contrast but that's it for text.

That completes this tutorial. In the next one, I'll look at the System.Drawing.Drawing2D, using regions etc.

  1. About.com
  2. Technology
  3. C / C++ / C#
  4. C# / C Sharp
  5. Learn C Sharp
  6. Gdi+ Graphics in C# Tutorial Four

©2014 About.com. All rights reserved.