processingでテキストを縦横中心にするために調査したこと

テキストを縦横中心に配置するにあたり、調査したことをまとめました。

テキストの表示

Processingでテキストを表示させるためには text() メソッドを使います。
引数には 表示したい文字、x座標、y座標をとります。

text("TEXT", width/2, height/2);

文字揃え

テキストを表示する基準点の設定にはtextAlign()メソッドを使います。
二つの引数をとるときは（横の設定、縦の設定）になります。
デフォルトは左端のベースラインです。

textAlign(CENTER,CENTER);

ただCENTERとしたときに、横は中心に揃いますが縦は中心に揃いません。
というのも、テキストの高さは純粋にテキストのみの高さではないため、CENTERとしたところで位置がずれてしまいます。

テキストの高さ

フォントはベースラインを基準に作成されています。
ベースラインから上の長さはAscent、ベースラインから下の長さはDescentです。

テキストの高さはAscentとDescentの合計なので、textAscent()とtextDescent()メソッドを使って算出します。

注意

フォントを変えてもtextAscent()とtextDescent()でかえってくる値は変化しません。
目に見えて高さは変っていても同じ値が返ってきます。

公式のリファレンスを意訳すると

「フォントのAscentは正しく指定されていないので、手動で数ピクセル動かしてハックしてね。フォントサイズが変わってもいいように、textAscentかtextDescentを良い感じに使ってね。そうすればハックが少なくて良いよ。」

ってことなので、フォントによっては最終の詰めを手動調整する必要があるようです。

文字をキャンバスの縦横中心に配置する

上記を踏まえて作成したのがこちら。
BASELINEから下にはみ出さない文字であれば、縦の中心が取れているように見えます。

void setup() {
  size(400, 200);
  
  textSize(80);
  textAlign(CENTER,TOP);
  
  fill(color(0, 30, 30));
  background(color(230, 230, 230, 255));
  
  noLoop();
  
}

void draw(){

  float ascent = textAscent();
  float descent = textDescent();
  float textHeight = ascent + descent;

  int textPosY = int(height-textHeight)/2;
  text("ping 123", width/2, textPosY);
}

textAlign(CENTER,TOP);にし、テキストのY座標が(キャンバスの高さ -テキストの高さ)/2になるようにしました。
また、textAscent()とtextDescent()の返り値はfloatですが、textの引数はintなので、途中でキャストしています。

#参考
processing reference textAlign
ProcessingにおけるtextAlignの挙動