processing에서 텍스트를 가로 및 세로 중심으로 만들기 위해 조사한 것

4815 단어 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는 올바르게 지정되어 있지 않으므로, 수동으로 몇 픽셀 움직여 해킹해 주세요. 괜찮아."

라고 하는 것이므로, 폰트에 따라서는 최종의 채우기를 수동 조정할 필요가 있는 것 같습니다.

문자를 캔버스의 가로/가로 중심에 배치



상기를 근거로 작성한 것이 이쪽.
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의 거동

좋은 웹페이지 즐겨찾기