数字を画像に
さて「数字の画像を動かしてー」という最初の欲望をかなえるときがやってきました。
基本的にはpaintメソッドで定義している描画の部分に手を加えれば良いです。
まあ下準備もちょっとは必要で、まず
private Image digits[] = new Image[11];
と画像を保持するためのインスタンス変数を定義します。
次にinitメソッドで
for (int i = 0; i < 10; i++) {
digits[i] = getImage(getDocumentBase(), "images/pdg/" + i + ".gif");
}
digits[10] = getImage(getDocumentBase(), "images/pdg/C.gif");
とgetImageを用いて画像を読み込みます。getImageの引数は読み込む画像のURLです。ここではアプレットの置かれているURLとそこからの相対位置に分けて指定してます。引数の中にあるgetDocumentBaseというメソッドがアプレットの置かれているURLを返します。
ここではアプレットと画像を下のようなディレクトリに配置することにしました。
+-(アプレットのあるディレクトリ)
|
+-<images>-+-<pdg>-+- 0.gif, 1.gif, 2.gif, 3.gif, 4.gif, 5.gif,
6.gif, 7.gif, 8.gif, 9.gif, C.gif
0.gifというのが数字の0の画像でdigits[0]に保持され、1.gifが1の画像でdigits[1]に・・・となっていてC.gifが“:”の画像でdigits[10]に保持されます。
下準備も終わったのでpaintメソッドで描画部分を変更しましょう。
public void paint(Graphics g) {
int imageWidth = 15;
g.drawImage(digits[currentTime.get(Calendar.HOUR) / 10], 0 * imageWidth, 0, this);
g.drawImage(digits[currentTime.get(Calendar.HOUR) % 10], 1 * imageWidth, 0, this);
g.drawImage(digits[10], 2 * imageWidth, 0, this);
g.drawImage(digits[currentTime.get(Calendar.MINUTE) / 10], 3 * imageWidth, 0, this);
g.drawImage(digits[currentTime.get(Calendar.MINUTE) % 10], 4 * imageWidth, 0, this);
g.drawImage(digits[10], 5 * imageWidth, 0, this);
g.drawImage(digits[currentTime.get(Calendar.SECOND) / 10], 6 * imageWidth, 0, this);
g.drawImage(digits[currentTime.get(Calendar.SECOND) % 10], 7 * imageWidth, 0, this);
}
drawImageメソッドで読み込んだ画像を表示させれば万事OK。
currentTime.get(Calendar.HOUR)でcurrentTimeが保持する時分秒のうち時が取り出せるというのは前に述べた通りです。
currentTime.get(Calendar.HOUR) / 10
で取り出した時を10で割った商を求めてます。これが時の10の位の数字になります。
currentTime.get(Calendar.HOUR) % 10
で時を10で割った余りを求めてます。これが時の1の位の数字になります。分、秒についても同様です。
各画像の左上のx座標を決めるときに画像の幅が必要となるので
int imageWidth = 15;
と画像の幅を変数にいれておいて、drawImageのx座標を定めるところで
3 * imageWidth
のようにして左から順番に画像が表示されるようにしてます。
最終更新日 : 1999年3月13日(土)
midosabu@postpet.so-net.ne.jp