ProcessingにおけるtextAlignの挙動

テキストの配置を揃える際はtextAlignを使うのが便利。

textAlign() \ Language (API) \ Processing 1.0 (BETA)

しかしどのオプションを与えたらどのように配置されるのかいつも忘れてしまうので、ひと目で見て分かるように描き出してみた。

まず全くオプションを与えないデフォルトの状態ではこのように配置される。

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

これに対してtextAlignのオプションを変えて変化を見ていく。

水平アラインメント

まずLEFT。

textAlign(LEFT);

これはデフォルトの状態と同じだ。
他の水平アラインメントを見ていこう。

textAlign(CENTER);

textAlign(RIGHT);

垂直アラインメント

水平アラインメントはすべてCENTERにしてある。

textAlign(CENTER, TOP);

textAlign(CENTER, BOTTOM);

textAlign(CENTER, CENTER);

textAlign(CENTER, BASELINE);

とくにBOTTOMとBASELINEの区別がつきづらいようだ（論理的には明らかだが見かけが）。

また、垂直方向のAlignをよく見るとあまり綺麗に揃っていないのが分かる(CENTERに顕著)。
アルファベットの垂直方向の調整はtextAscentとtextDescentを利用して行う必要があるようだけど委細は知らない。

textAscent() \ Language (API) \ Processing 1.0 (BETA)
textDescent() \ Language (API) \ Processing 1.0 (BETA)

おまけ

画像書き出しに使ったコードは以下のとおり。ベッタベタ。

int[] ALIGNS = {LEFT, CENTER, RIGHT};
String[] SALIGNS = {"LEFT", "CENTER", "RIGHT"};
int[] YALIGNS = {TOP, BOTTOM, CENTER, BASELINE};
String[] SYALIGNS = {"YTOP", "YBOTTOM", "YCENTER", "YBASELINE"};

size(200, 200);
background(0);
fill(255);
textSize(24);

stroke(255);
line(0, height/2, width, height/2); 
line(width/2, 0, width/2, height);
text("DEFAULT", width/2, height/2);
saveFrame("DEFAULT.png");

for(int i = 0; i < ALIGNS.length; i++){
  background(0);  
  // 中心線を引く
  stroke(255);
  line(0, height/2, width, height/2); 
  line(width/2, 0, width/2, height);
  
  textAlign(ALIGNS[i]);
  text(SALIGNS[i], width/2, height/2);
  saveFrame(SALIGNS[i]+ ".png");
}

for(int i = 0; i < YALIGNS.length; i++){
  background(0);  
  // 中心線を引く
  stroke(255);
  line(0, height/2, width, height/2); 
  line(width/2, 0, width/2, height);
  
  textAlign(CENTER, YALIGNS[i]);
  text(SYALIGNS[i], width/2, height/2);
  saveFrame(SYALIGNS[i]+".png");
}