文字を揃えるには

◆PROCESSING 逆引きリファレンス

 カテゴリー:文字関連処理

文字を揃えるには

【解説】
PROCESSINGで文字を表示するには text() 命令を使います。text()命令が文字を表示する際に影響を与えるのが、文字のアライメントです。

アライメントとは、「文字の描画原点を何処にするのか」という事です。具体的には textAlign() 命令で原点位置を指定します。

それぞれ
左右位置:LEFT(左)、CENTER(中央)、RIGHT(右)
上下位置:TOP(上)、CENTER(中央)、BASELINE(ベースライン)、BOTTOM(下)
が指定可能です。

【構文】
textAlign(alignX);
textAlign(alignX, alignY);

【パラメータ】
alignX  :  int  : LEFT、CENTER、RIGHT の何れかを指定
alignY  :  int  :TOP、CENTER、BASELINE、BOTTOM の何れかを指定

【戻り値】
void

【注意】
デフォルトのアライメントは textAlign( LEFT, BASELINE ); です。

利用するフォントデータのデザイン(特に日本語の場合)によっては、必ずしも正確に配置できない場合があります。特に上下位置(alignY)は適当だと考えたほうが無難でしょう。

文字を(できるだけ)正確に配置するには、文字のアセント、ディセント、レディング、ベースラインについての知識が必要です。「文字のアセントとディセント」記事を参照してください。

【関連記事】
第2章:文字を表示しよう
文字データを読み込むには
文字を任意の場所に描画するには
文字のアセントとディセント


●左右位置の調整例(LEFT):

画面中央に十字の線を書き、それを基準に文字を配置しています。
左右位置にLEFTを指定してるので、文字の左端が原点になります。その結果、画面中央線にそった位置になっている事に注目してください。

gの文字の下が、少し中央線よりはみでているのは、上下のアライメント初期値がBASELINEとなっている為です。

<出力サンプル>
font_alaiment1

 

●左右位置の調整例(CENTER):

左右位置にCENTERを指定してるので、文字の中央が原点になります。省略した箇所は、前述のサンプルと同じ処理になっています。

先ほどの出力サンプルとの違いに注目してください。

<出力サンプル>
font_alaiment3

 

●左右位置の調整例(RIGHT):

左右位置にRIGHTを指定してるので、文字の右端が原点になります。省略した箇所は、前述のサンプルと同じ処理になっています。

文字列の右側が原点になるので、画面中央に比べて左によった配置になります。

<出力サンプル>
font_alaiment4

 

●上下位置の調整例(TOP):

左右の位置はLEFT(左)に固定して、上下位置をTOP(上)に変更しています。省略した箇所は、前述のサンプルと同じ処理です。

<出力サンプル>
font_alaiment5

 

●上下位置の調整例(CENTER):

左右の位置はLEFT(左)に固定して、上下位置をCENTER(中央)に変更しています。省略した箇所は、前述のサンプルと同じ処理です。

<出力サンプル>
font_alaiment6

 

●上下位置の調整例(BASELINE):

左右の位置はLEFT(左)に固定して、上下位置をBASELINE(ベースライン)に変更しています。省略した箇所は、前述のサンプルと同じ処理です。

一見、下のBOTTOMサンプルとよく似た結果になりますが、アルファベットに注目すると、その違いに気が付かれると思います。

<出力サンプル>
font_alaiment7

 

●上下位置の調整例(BOTTOM):

左右の位置はLEFT(左)に固定して、上下位置をBOTTOM(下)に変更しています。省略した箇所は、前述のサンプルと同じ処理です。

<出力サンプル>
font_alaiment8

 


PROCESSING逆引きリファレンス一覧 へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)