【Graphics】 テキスト描画と描画サイズ

今回はテキストを描画する方法と描画するテキストのサイズを計算する方法を紹介します。
まずはテキストを描画する方法を説明します。
using (var bitmap = new Bitmap(800, 250))
using (var graphics = Graphics.FromImage(bitmap))
using (var bgBrush = Brushes.White)
using (var textBrush = Brushes.Blue)
using (var font = new Font("メイリオ", 30))
{
    graphics.FillRectangle(bgBrush, graphics.VisibleClipBounds);

    var text = "0123456789:";

    // アンチエイリアス処理を変更してテキストを描画
    graphics.TextRenderingHint = TextRenderingHint.AntiAlias;
    graphics.DrawString(text + "AntiAlias", font, textBrush, 10, 0);

    graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
    graphics.DrawString(text + "AntiAliasGridFit", font, textBrush, 10, 50);

    graphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
    graphics.DrawString(text + "ClearTypeGridFit", font, textBrush, 10, 100);

    graphics.TextRenderingHint = TextRenderingHint.SingleBitPerPixel;
    graphics.DrawString(text + "SingleBitPerPixel", font, textBrush, 10, 150);

    graphics.TextRenderingHint = TextRenderingHint.SingleBitPerPixelGridFit;
    graphics.DrawString(text + "SingleBitPerPixelGridFit", font, textBrush, 10, 200);

    bitmap.Save(filePath, ImageFormat.Png);
}
 このコードを実行すると以下の画像が作成されます。
DrawText1.png
 テキストを描画する際にはDrawStringメソッドを使用します。
 DrawStringメソッドの引数には描画したいテキスト、フォント、文字の色、描画する位置を指定します。
 テキスト描画の場合もアンチエイリアス処理が可能ですが、図形のアンチエイリアスとは別扱いになっています。
 テキスト描画の場合はGraphicsインスタンスのTextRenderingHintプロパティでアンチエイリアス処理の方法を指定します。
 GraphicsインスタンスのTextContrastプロパティもアンチエイリアス処理に関係していますが、大きな違いは出ない様なのでこのサンプルコードでは省略しています。
 テキストのアンチエイリアス処理をしたい場合はTextRenderingHintをAntiAlias、AntiAliasGridFit又はClearTypeGridFitにします。
 次に描画するテキストの描画サイズを取得する方法です。
 テキストの描画サイズを計算するにはGraphicsインスタンスのMeasureStringメソッドを使用します。
using (var bitmap = new Bitmap(290, 90))
using (var graphics = Graphics.FromImage(bitmap))
using (var bgBrush = Brushes.White)
using (var borderPen = new Pen(Brushes.Red, 1))
using (var textBrush = Brushes.Black)
using (var font = new Font("メイリオ", 30))
{
    graphics.FillRectangle(bgBrush, graphics.VisibleClipBounds);

    var text = "0123456789";
    var startX = 10;
    var startY = 10;

    // 文字を描画するために必要なサイズを計算
    var size = graphics.MeasureString(text, font);

    graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
    graphics.DrawString(text, font, textBrush, startX, startY);
    graphics.DrawRectangle(borderPen, startX, startY, size.Width, size.Height);

    bitmap.Save(filePath, ImageFormat.Png);
}
 このコードを実行すると以下の画像が作成されます。
MeasureStringNormal.png
 テキストの描画サイズを計算する場合はMeasureStringメソッドに描画したいテキストと使用するフォント情報を渡します。
 Graphicsインスタンスにテキストが描画されていないくても計算可能です。
 取得したテキスト描画領域を枠線で表示してみるとテキストの前後に余白があります。
 この余白をなくしたい場合はStringFormatを利用します。
using (var bitmap = new Bitmap(290, 90))
using (var graphics = Graphics.FromImage(bitmap))
using (var bgBrush = Brushes.White)
using (var borderPen = new Pen(Brushes.Red, 1))
using (var textBrush = Brushes.Black)
using (var font = new Font("メイリオ", 30))
using (var format = new StringFormat(StringFormat.GenericTypographic))
{
    graphics.FillRectangle(bgBrush, graphics.VisibleClipBounds);

    var text = "0123456789";
    var startX = 10;
    var startY = 10;

    // 文字を描画するために必要なサイズを計算
    var size = graphics.MeasureString(text, font, bitmap.Width, format);
    format.Trimming = StringTrimming.Word;

    graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
    graphics.DrawString(text, font, textBrush, startX, startY, format);
    graphics.DrawRectangle(borderPen, startX, startY, size.Width, size.Height);

    bitmap.Save(filePath, ImageFormat.Png);
}
 このコードを実行すると以下の画像が作成されます。
MeasureStringGenericTypographic.png
 StringFormatは自分で細かく設定することもできますが、特にこだわりがないのであればGenericTypographicを利用する方が簡単です。
 MeasureStringメソッドでサイズ計算時にStringFormatも指定します。
 このとき最大幅も指定する必要があります。
 注意点はDrawStringメソッドでテキスト描画を行う際にもStringFormatを指定する必要があることです。
 StringFormatを指定することで書式に従い余計な余白を作らずにテキストが描画されます。
 
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

カレンダー
08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon