数字を画像に

さて「数字の画像を動かしてー」という最初の欲望をかなえるときがやってきました。

現在の時刻はです。

基本的には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が保持する時分秒のうち時が取り出せるというのは前に述べた通りです。