映像・画像系アプリクリエイターの日報

『縁取りでアプリの文字を見やすくしよう』技術フォロー

設計・開発, イベント・セミナー

最初におことわりですが、この記事は本ブログ初！（たぶん）のソフト開発技術トピックです。

しかも、Windows Presentation Foundation(WPF) 限定です。

「なにそれ喰えんの？」という方はスルーして下さい。

さて、先日の tech ed Japan|2010 ライトニングトークでお話させて頂きました、「縁取りでアプリの文字を見やすくしよう」セッションの技術フォローです。

まずは、資料とソースコードから。

セッション資料(xps/pdf)

• 縁取りでアプリの文字を見やすくしよう.xps
• 縁取りでアプリの文字を見やすくしよう.pdf

ソースコード（改良版 OutlineText コントロール）

• TechED2010LT_OutlineTextSample_rev2.0.zip

• 要VisualStudio2010 & .NET Framework4 (WPF)
• ソースコードは自由にお使いいただけますが、その結果や内容につきまして一切責任を負いません。

ということで中身の解説です。

今回の発表は、MSDNで公開されているWPF用コントロール、「OutlineTextControl」をそのまま使うと、ちょっと困ったことが起こりますよ！という内容でした。このサンプルアプリは、その「困ったこと」を再現しながら、対処方法が確認できるものです。発表資料とあわせてご覧下さい。

問題その１：なんかトゲトゲが出る（線の接合設定）

1. アプリ起動後、[境界線の設定]-[接合タイプ]-[OutlineJoin] を [Miter] にします。WPFのデフォルト値は[Miter]です。
2. 文字列に適当な文字（アルファベットのBが出やすいです）を入れる
3. StrokeThickness を、4程度に設定する

上記設定にしてフォントの種類を切り替えると、特定のフォントにおいて、下記の画像のようなトゲトゲが出ます。

（フォントコンボボックスを選択して、カーソルキーの↓を押すと、フォントを順次変えられます）

[OutlineJoin] は、改良版で独自拡張したプロパティです。このプロパティを [Round] や [Bevel] に変更するか、[MiterLimit] を 0 にすれば回避できます。

OutlineJoin の種類によって、見た目が微妙に変わるので試してみて下さい。

このトゲトゲ問題、最初に遭遇したのは GDI+ でした。そして、Direct2Dでも同じような問題が出ます。

要するにバグじゃないのです。通常の図形描画として、無難な初期値が設定されているけどそれが文字には適してないということです。

問題その２：フォントサイズを変更すると見た目の印象が変わる

文字サイズを、[FontSize]で変更した場合と、[Scale]で変更した場合で比較してみてください。

前者は、縁取りサイズが固定のまま文字サイズだけが変わるので、サイズによって縁取りの印象が変わります。後者は、縁取りも含めて文字全体を拡大・縮小するので、デザインスタイルを維持したままサイズ変更できます。

問題その3：細いフォントの塗りつぶしが圧迫される

マニアックな話かと思ったんですが、なぜか会場から拍手を頂いた項目です。

通常の図形描画では、先に境界線を描画してから、残った隙間を塗りつぶしで埋める、という手順で描画します。

これだと、明朝体のような細いフォントで太い縁取りを付けると、塗りつぶしする領域がほとんど無くなってしまいます。

そこで、まず境界線を書いてから、その上に上書きするように塗りつぶしを描画する、という2段階にわけると、縁取りをどんなに太くしても塗りつぶし部分が圧迫されません。

これは、私が独自に拡張した、[OverFill]というプロパティで設定できます。

OverFill = falseの場合: 境界線が太くなると塗りつぶしがなくなります。

OverFill = trueの場合: 境界線が太くても塗りつぶしに影響ありません。

極端に境界線を太くしてもこのとおり！

こんな感じで、いろいろなパラメータをいじって確認して下さい。

縁取り文字コントロール（改）を自分のアプリに組み込む方法

サンプルアプリのソリューションには、以下の二つのプロジェクトがあります。

• OutlineTextControl
  • MSDNのコードを改良したもの。変更点は、"Teched 2010 LT:" で検索して下さい。
• OutlineTextDemo
  • OutlineTextの使い方サンプルとして参考にして下さい。アプリ自体は何の役にも立ちませんw。

この OutlineTextControl というプロジェクトを、まるごとご自身のアプリのソリューションに追加すればOKです。もちろん、ExpressionBlend でも追加できます。

アプリからどうやって使うのかな？と思ったら、OutlineTextDemo を参考にして下さい。

何か、ご質問などありましたらコメント欄へお願いします。

あ〜長かった（汗

Permalink | コメント(0) | トラックバック(0) | 16:08