画像を表示する
画像を準備しよう! †
画像を表示させる為には,当然,画像が必要になりますねぇ!!!
プログラムでよく使うのはgifやjpegなどなので,gif画像かjpg画像を作りましょう!!
gif画像の特徴:
- 256色までしか色を扱えない。
- 写真の保存には向かない
- 比較的小さいファイルサイズで保存できる
jpeg画像の特徴:
- 非可逆圧縮(圧縮したら元に戻らない)方式で,非常に高い圧縮率でデータを圧縮し保存する。
- Webページ上に表示する画像などの主要な形式
この2つの他にも,色々な保存形式がありますがこれから先,gifをかjpg画像使っていきます。
プログラムで画像を読み込む †
まず,必要なファイルは,
- htmlファイル
- javaファイル
- classファイル
- 画像ファイル
になります。
「アプレットを動かす」で使用したファイルを使って説明していきます。
htmlファイルの中身
<html> <body> <applet code= "sample.class" width="100" height="200"> </applet> </body> </html>
ここでわからないのは3行目ですよね。(htmlの知識は既にあるものとしています)
<applet code= "sample.class" width="100" height="200">
- この部分では,「sample.java」じゃなくて、javacでコンパイルしてできる「sample.class」の方を指定します。(コンパイルのしかたがわからない方はこちら)
- 「width=""」と「height=""」でJavaアプレットが実行されるウィンドウ領域の指定を行ないます。
- width:幅の指定
- height:高さの指定
- 実行がうまく動かないときはこのhtmlファイルとsample.classが同じフォルダにあるか確認してみてください。
javaファイルの中身
import java.applet.Applet; import java.awt.Graphics; import java.awt.Image; import java.applet.*; import java.awt.*; public class sample extends Applet { Image img[] = new Image[1]; public void init() // 画像の読み込み { img[0] = getImage(getDocumentBase(), "sample.gif"); } public void paint(Graphics g) // 画像表示 { g.drawImage( img[0],1,1, this ); } }
これは,何かのサンプルをいじって作ったものです。
私にも全部はわかりません( ̄∇ ̄*)ゞエヘヘ
まぁ,こう書けばいいんだろう!っという感じですねぇ
- 表示させたい画像を指定しているところは
img[0] = getImage(getDocumentBase(), "sample.gif");
の行です。
sample.gifの代わりに、自分で作ってみた他の画像も試してみてください!
- うまく表示されない場合は、sample.javaとsample.gifのファイルが同じフォルダに入っているか確認
- 画像の表示は
g.drawImage( img[0],1,1, this );
の行でされています。
drawImageの引数の説明を以下に示しておきます。
引数 | 意味 | ここでの例 |
1 | 画像オブジェクトの名前 | img[0] |
2 | 表示する位置のx座標 | 1 |
3 | 表示する位置のx座標 | 1 |
4 | イメージオブザーバ(謎) | this |
はて???
1〜3までは何とかわかりましたけど,4がわかんないですねぇ(ノ_・、)シクシク
ということで,iくらげさんに質問して聞いてみました!!
iくらげさんからお返事ついたぁ〜〜♪
再描画(ブラウザのウィンドウを移動したり、大きさを直したり、他のアプリが前に来たあとでまたブラウザが前に出る、など)が起きる時に、それをうまく扱うためのしくみかな。
Javaアプレットでは、基本的にいつもthisとしておけばいいらしい。By iくらげ
ほぉ。
なるほど。
理解できたようなできないような・・・orz
でもまぁ,基本的にはthisにしておけばいいって覚えればいいんだすね!!
ふむふむ___φ(゚ー゚*)フムフム___φ(。_。*)カキカキ
ここでは画像オブジェクトがimg[0]となっているんですが、画像を1つしか使わない場合には[0]を省いてimgだけでもいいらしいですヽ(  ̄д ̄;)ノ
ちょっとだけ書く量が減りますね。あと,エラー発生確率も低くなりますね!ほんのちょびっとですが。。
img[0] = getImage(getDocumentBase(), "sample.gif"); ↓ ↓ img = getImage(getDocumentBase(), "sample.gif");
g.drawImage( img[0],1,1, this ); ↓ ↓ g.drawImage( img,1,1, this );
となっていいんですねぇ!
へぇ〜。
単にHTMLで画像ファイルを表示するのと、アプレットとの違いは? †
アプレットだと
- 画像を右クリックで保存できなくなります
- 時間によって絵を変えたり、いろいろな処理ができます
- 最初にJavaが起動するまで、表示にちょっと時間がかかります
画像をたくさん表示する †
突然ですが,私はパズルが好きです。
ということで,画像表示もできるようになったことだし,javaプログラミングの練習として,「15パズル」を作ろうと思います!!!!
15パズルとは,4×4マス中でピコピコ数字を順番に並べるやつですよ!あれですよ!!
今はわからなくても,見ればわかるはずです!
頑張って作っていこぅエイエイ (ι´Д`)ノ オー!!
まずは画像を表示しなければ始まりませんね。
よぉし。
画像一枚表示するのはsample.javaを使えばいいんだから,これをまたいじって,複数画像を表示させるぞ!
まずは,15個の画像ファイル(1から15まで書いてある画像)を作りましょう!私はphotoshopで作りました。
こんな感じで。
複数の画像を表示するプログラムの例
import java.applet.Applet; import java.awt.Graphics; import java.awt.Image; import java.applet.*; import java.awt.*; public class puzzle extends Applet { Image img[] = new Image[4]; //sampleでは[1]でしたが,画像が4枚なので,[4]。 //↑ここは書き直し忘れやすいので注意! public void init() // 画像の読み込み { img[0] = getImage(getDocumentBase(), "1.gif"); img[1] = getImage(getDocumentBase(), "2.gif"); img[2] = getImage(getDocumentBase(), "3.gif"); img[3] = getImage(getDocumentBase(), "4.gif"); } public void paint(Graphics g) // 画像表示 { g.drawImage( img[0],0,0, this ); g.drawImage( img[1],50,0, this ); //x軸を変えて画像が g.drawImage( img[2],100,0, this ); //重ならないようにする。 g.drawImage( img[3],150,0, this ); } }
実行結果
sample.htmlをいじって作ってみました!
単純ですね!!
こんなんだとかなり面倒ですよ。あと11回同じ命令を書かなきゃいけないですからね・・・。。。
しかも,数字の場所を移動させるのにもいちいちプログラムを書き直さなければいけませんな。これじゃパズルゲームじゃないですよねぇ!
そこで今度は,配列とfor文を使って、もっと簡単に表示できるようにしてみませう!!!