Handy Graphicsで縁取り文字を描く

Handy Graphicsでは、様々な図形に加え文字を描画する関数が用意されています。しかし、図形においては縁を描画するオプションが用意されているのに対し、文字の描画では縁取りを行うことができません。別に不便ではないので、特に問題になることもないでしょう。

しかし、どうしても縁取り文字を描画したい時があります。例えば、「水曜どうでしょう風」の字幕を作りたい時です。
独特なフォントを使い、黒地に縁が白のあの字幕は誰がみても「水曜どうでしょう」を思い浮かべるでしょう。

あんな字幕が作りたい！そういう欲に駆られたとき、この記事を読んでいただくと満足していただけると思います。

さて、方法ですが原理は単純です。
まず、縁取りしたい色で文字を描画しておきます。このとき、一回しか描くのではなく、多方向にずらしながら複数回描きます。次に、中抜きする色で通常の文字を描画します。以上！

さて、この方法のメリットとデメリットを考えたいと思います。
メリットは、

• 原理が単純で実装も容易
• フォントサイズが小さければ、それなりに綺麗に見える

といったところでしょう。

デメリットは、

• 複数回のフォントの描画が発生する
• 縁を太くすると、綺麗に見せるのが難しくなる

あたりが考えられます。ここで、デメリットの対策について考えてみましょう。

線を太くするときは、ずらし方を工夫すれば綺麗に見せることができるのではないかと思います。
例えば三角関数を使って、円形にずらす、などです。

使用例

利用したフォントはこちら(851チカラヨワク)

コードのサンプル

#include <handy.h>

void drawSuidouText(double x, double y, const char* str) {
  HgSetFontByName("851チカラヨワク", 50);
  HgSetColor(HG_WHITE);
  for (int u = -2; u < 3; u++) {
    for (int v = -2; v < 3; v++) {
      HgText(x + u, y + v, str);
    }
  }
  HgSetColor(HG_BLACK);
  HgText(x, y, str);
}

int main(void) {
  const char* str[] = {
      "オレもう",
      "泣きそうだよ",
      "帰してくれよ",
  };

  HgOpen(600, 600);
  HgSetFillColor(HG_BLUE);
  HgBoxFill(0, 0, 600, 600);

  for (int i = 0; i < 3; i++) {
    drawSuidouText(200, 400 - i * 100, str[i]);
  }

  HgGetChar();
  HgClose();

  return 0;
}