GButtonに画像を表示するには(G4P)

◆PROCESSING 逆引きリファレンス

 カテゴリー:GUI

GButtonに画像を表示するには(G4P)

【解説】

PROCESSINGにGUI用のライブラリであるG4Pを追加する事で、(種類は多くないですが)簡単にGUI部品を表示する事ができるようになります。

G4Pのインストールについては「GUIを扱う準備をする(G4P)」記事を参照してください。

より詳しく知りたい方は、下記公式サイト様などを参照して下さい。

G4Pで扱えるボタンには

  • 普通のボタン(GButton)
  • 画像ボタン(GImageButton)
  • トグルボタン(GImageToggleButton)

の3種類があります。

普通のボタン(GButton)とは、マウスでクリックする一般的なボタンの事で、文字と、それを囲む枠でボタンを表現したものです。

GButtonには、文字だけではなく画像を貼り付けることが可能です。画像を貼り付けることで、ボタンの印象がかなり変わります。

GButtonに画像を貼り付けるには、GButtonがもつ setIcon メソッドを利用します。※

※正確には、GButtonが継承している GTextIconBase クラスのメソッドです。

貼り付けた画像の位置を変更したい場合は、setIconAlign メソッドを利用します。また、ボタンとラベルの位置関係を変更したい場合は、setIconPos メソッドを利用します。

 

【構文】

画像を貼り付ける

void  gButton . setIcon (  PImage  img , int  tiles, GAlign  pos , GAlign horz,  GAlign vert ) ;
void  gButton . setIcon (  String  fname, int  tiles, GAlign  pos,  GAlign horz,  GAlign vert ) ;
void  gButton . setIcon (  GIcon  icon,  GAlign  pos,  GAlign horz,  GAlign vert ) ;

img     : PImage 変数
fname:画像ファイル名
icon    : GAnimIcon またはGIcon 変数
tiles    : 表示する画像の分割数(1以上の数値)
pos     : 画像とラベルの位置関係。GAlign.NORTH, SOUTH, EAST, WEST
horz   : 画像の左右位置。GAlign.LEFT, CENTER, RIGHT
vert    : 画像の上下位置。GAlign.TOP, MIDDLE, BOTTO

画像とラベルの位置関係を変更する

void  gButton . setIconPos ( GAlign  pos  ) ;

pos     : 画像とラベルの位置関係。GAlign.NORTH, SOUTH, EAST, WEST

画像の位置を変更する

void  gButton . setIconAlign ( GAlign horz  ,  GAlign  vert  ) ;

horz   : 画像の左右位置。GAlign.LEFT, CENTER, RIGHT
vert    : 画像の上下位置。GAlign.TOP, MIDDLE, BOTTO

 

【注意】

画像分割数について

画像を貼り付ける  setIcon  命令に与える tiles について、少し補足が必要ですね。これは「画像が、何枚の絵から出来ているか」を示しています。

1枚物の絵を貼り付けるなら、tilesは1にします。2枚の絵からできているなら、tilesは2にします。

(画像URL:illust-AC 様:アルパッカさん、文字:IPA 独立行政法人 情報処理推進機構 様:IPAフォント

上の右側の絵は、同じサイズの絵が2枚、横並びで出来ています。tiles を2にして画像を貼り付けると、この左半分(左1/2)の絵が表示されます。

なぜこんな指定があるかというと、ボタンの上にマウスカーソルをのせた時、残りの画像が表示されるので、簡単なアニメーション効果が得られるためです。

(画像URL:illust-AC 様:アルパッカさん、文字:IPA 独立行政法人 情報処理推進機構 様:IPAフォント

上図ではボタンの上にマウスカーソルを乗せた時、画像の右半分が表示されています。左右で少し異なる絵にしておくと、簡易的なパタパタアニメになる訳です。

ちなみに横3枚からなる画像を tiles = 3 で貼り付けると、最後の3枚目はボタンを押している瞬間に表示されます。

(画像URL:illust-AC 様:アルパッカさん、文字:IPA 独立行政法人 情報処理推進機構 様:IPAフォント

画像とラベルの位置関係について

ポジション( setIconPos )で指定する、画像とラベルの位置関係は以下のようになります。

(画像URL:illust-AC 様:アルパッカさん、文字:IPA 独立行政法人 情報処理推進機構 様:IPAフォント

デフォルトでは、画像を貼り付ける位置はラベルの右側( EAST )になります。ラベルから見て東側(右側)という事ですね。

画像の位置について

setIconAlign で指定する位置は、「ポジション( setIconPos )で指定した上下左右の中で、どの位置にするか」という事です。

setIconPos で画像を WEST や EAST に配置した場合、setIconAlign の LEFT、CENTER、RIGHTの指定は効果がありませんので、注意してください。

以下はポジションがEAST指定で、画像の位置をTOP、MIDDLE、BOTTOM と変化させた様子です。

(画像URL:illust-AC 様:アルパッカさん、文字:IPA 独立行政法人 情報処理推進機構 様:IPAフォント

また setIconPos で画像をNORTH や SOUTH に配置すると、setIconAlign の TOP、MIDDLE、BOTTOM の指定は効果がありません。

以下はNORTH指定状態で、画像の位置を LEFT、CENTER、RIGHTと変化させた様子です。

(画像URL:illust-AC 様:アルパッカさん、文字:IPA 独立行政法人 情報処理推進機構 様:IPAフォント

 

【関連記事】

 


サンプルプログラム

画像を右寄せで貼り付ける例:

setIcon でアイコン画像をセットしています。ポジションにWESTを指定しているので、ラベルの左側(西)に画像が表示されます。

Fontには、IPA 独立行政法人 情報処理推進機構 様が公開しているIPAフォント を利用しています。

<出力サンプル>

(画像URL:illust-AC 様:アルパッカさん)

 

画像セット後に位置を変更する例:

アイコン画像をセットした後で、ポジションとアライメントを変更しています。

ポジションに下(SOUTH)を指定しているので、アライメントの上下位置指定は効果がありません。なので setIconAlign の第二引数には null を指定しています。

Fontには、IPA 独立行政法人 情報処理推進機構 様が公開しているIPAフォント を利用しています。

<出力サンプル>

(画像URL:illust-AC 様:アルパッカさん)

 


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

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