Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

テキストの表示

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

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

文字揃え

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

textAlign(CENTER,CENTER);

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

テキストの高さ

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

text.png

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

注意

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

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

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

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

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

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

test0002.png

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の挙動

akspect
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away