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의 거동

좋은 웹페이지 즐겨찾기