情報処理科(情報処理・IT・コンピュータ 専門学校)

その情熱、実現させよう。



北海道 2年制 技術と資格を備えた情報技術者になる 情報処理科

第14回 画像を表示する

2009年02月21日 第14回 画像を表示する

作品紹介シリーズで少し間が開いてしまいましたが、第14回では画像の表示をしてみます。

iアプリで使える画像ファイルは gif が基本です。jpeg も使え機種は多いので、gif でも jpeg でもどちらでもよいでしょうけどね。最近だと BMP も扱える機種があるみたいです。

準備
 最も簡単な方法は、プロジェクトの res フォルダに入れること。ひとつ気をつけることはサイズです。機種により動作可能な iアプリ のサイズが違っていて、このフォルダに画像を入れるとアプリのサイズに含まれます。ただし、最近の機種では扱えるサイズがずいぶん大きくなったので、古い機種を考えないなら問題ないです。

画像の読み込み
 今回は、以前に作ったタイトル画面のカーソルに画像を使ってみましょう。
まずは、カーソル画像を保持するための変数宣言
 

 Image cur;

これは、Canvas全体で使いますので、Canvas直下に宣言。

読み込みは try … catch 句で括ります。

  try {
    MediaImage curImg = MediaManager.getImage("resource:///cur.gif");
    curImg.use();
    cur = curImg.getImage();
  }catch(Exception e) { }

失敗しても、スルーするというやる気の無い例外処理でも、無いといけません。
これは、最初に1回だけの準備でよいので、Canvasのコンストラクタ内に書きます。

 cur.gif は res に入れたファイル名、さらにサブフォルダに入れた場合はフォルダ名から指定します。
 curImg は読み込み直後のメディアイメージ保持用。まだ、内部では画像としては使えません。
  curImg.use(); で使用可能であることを宣言します。この段階でメモリが必要になります。あんまり沢山の画像は一度には使用可能にできません。使用不可に戻す場合は、unuse() を使います。
 curImg.getImage(); で利用可能なメディアイメージから、表示できるイメージを取り出します。

画像の描画
準備ができたたら、描画しましょう。
paint(Graphics g) の中であれば、

  g.drawImage(cur, 100,100);

とすれば、100,100の位置に画像を表示します。
ただし、文字の場合と画像の場合では表示位置が違います。

     文字の場合は、文字の下のベースライン。
     画像の場合は、左上の角。

になります。タイトル2

この違いを反映させておきましょう。


 

コンストラクタのコード

   MainCanvas() {
        setSoftLabel(SOFT_KEY_1, "END");
        setBackground(Graphics.getColorOfName(Graphics.BLUE));
        
        try {
        MediaImage curImg = MediaManager.getImage("resource:///cur.gif");
        curImg.use();
            cur = curImg.getImage();
        }catch(Exception e) {}
    }

paintのコード

    public void paint(Graphics g) {
     
     int y=0;
     
        g.lock();
        g.clearRect(0, 0, Display.getWidth(), Display.getHeight());
        g.setColor(Graphics.getColorOfName(Graphics.WHITE));
        g.drawString("タイトル画面", 80, 50);
        g.drawString("メニュー1", 100, 130);
        g.drawString("メニュー2", 100, 150);
        g.drawString("メニュー3", 100, 170);
        
        if( sel==0 ) 
         y = 120;         
        if( sel==1 ) 
         y = 140;         
        if( sel==2 ) 
         y = 160;    
        
        g.drawImage(cur,85,y);
        g.unlock(true);
    }

 

n-08695340 at 9:0 | コメント(0) | トラックバック(0) | この記事のURL | |

コメントする

名前
 
  絵文字