トップ > Tech > CSharp > Graphicsでフチ文字を描画する

Graphicsでフチ文字を描画する

C#, .NET の GDI+ で下記のような縁取りをした文字、いわゆるフチ文字を描画する方法をまとめておく。

概要

基本的には GraphicsPath に文字列の形のパスを描画し、そのパスを用いてフチと塗りつぶしを描画するといった手順である。

▲ ▼

ソースコード

特筆点は下記の通り。

5～12 行目は描画前の準備である。14 行目以降が今回の主題。
GraphicsPath のインスタンスを生成し、AddString で文字列のパスを追加する。
GraphicsPath.AddString は Graphics.DrawString と引数が異なる。
- 引数は (文字列, フォントファミリー, スタイル, フォントサイズ, レイアウト枠, StringFormat) といった感じである。
- フォントファミリー：描画フォントの Font.FontFamily を渡せばよい。
- スタイル：描画フォントの Font.Style を int にキャストして渡す必要がある。
- フォントサイズ：Font.Size を渡すとサイズが違う。メソッドのコメントにも“フォントの高さ”とあるので、Font.Height を渡す。
g.DrawPath でフチを描き、最後に g.FillPath で中の色を塗る。
- 何重ものフチをつけたい場合は、この g.DrawPath のさらに前に g.DrawPath を行う。これを繰り返す。
- g.DrawPath に使う Pen の太さ（Width）は表示時には半分になる（半分塗りつぶされる）ため、表示したい太さの倍を指定する。
- Pen の LineJoin は LineJoin.Round にすると丸っこくなってキレイ。変更して試してみるとよい。

// OnPaint 内を想定。g は Graphics のインスタンス。
// OnPaint 以外なら CreateGraphics などで生成する。
 
// レイアウト枠
Rectangle r = this.ClientRectangle;
r.Inflate(-10, -10); // ちょっと小さい枠内にレイアウト
// 文字列位置の設定
StringFormat sf = new StringFormat();
sf.LineAlignment = StringAlignment.Far; // 画面下部（垂直方向位置）
sf.Alignment = StringAlignment.Center; // 画面中央（水平方向位置）
// アンチエイリアス
g.SmoothingMode = SmoothingMode.HighQuality;
// パスを作成
GraphicsPath path = new GraphicsPath();
path.AddString("Text!", this.Font.FontFamily,
 (int)this.Font.Style, this.Font.Height, r, sf); // 文字列のパスを追加
// フチを描く
Pen p = new Pen(Color.White, 5.0f);
p.LineJoin = LineJoin.Round;
g.DrawPath(p, path);
// 塗りつぶす
g.FillPath(Brushes.Black, path);
// 後始末
p.Dispose();
path.Dispose();