Menu

Hot 15 Update

2017-10-20 2017-10-19 2017-09-25 2017-09-23 2017-07-23 2017-05-20 2017-04-08 2017-03-23 2017-03-21 2017-03-05 2017-01-13

About


現在のオンライン:3
本日:1
昨日:8
2005.04.01からのアクセス数:30861
2009.01.18からのアクセス数:
topJava教室 ≫ 画像を表示する 更新: 2017.03.23 (211d)

画像を表示する

Java教室
アプレットを動かす<<もくじ>>たくさんの画像を並べる

画像を準備しよう!

画像を表示させる為には,当然,画像が必要になりますねぇ!!!

プログラムでよく使うのはgifやjpegなどなので,gif画像かjpg画像を作りましょう!!
gif画像の特徴

jpeg画像の特徴

この2つの他にも,色々な保存形式がありますがこれから先,gifをかjpg画像使っていきます。



プログラムで画像を読み込む

まず,必要なファイルは,

になります。

アプレットを動かす」で使用したファイルを使って説明していきます。


htmlファイルの中身

<html>
<body>
<applet code= "sample.class" width="100" height="200">
</applet>
</body>
</html>

ここでわからないのは3行目ですよね。(htmlの知識は既にあるものとしています)

<applet code= "sample.class" width="100" height="200">


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の代わりに、自分で作ってみた他の画像も試してみてください!

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プログラミングの練習として,「15パズル」を作ろうと思います!!!!
15パズルとは,4×4マス中でピコピコ数字を順番に並べるやつですよ!あれですよ!!
今はわからなくても,見ればわかるはずです!
頑張って作っていこぅエイエイ (ι´Д`)ノ オー!!

まずは画像を表示しなければ始まりませんね。
よぉし。
画像一枚表示するのはsample.javaを使えばいいんだから,これをまたいじって,複数画像を表示させるぞ!

まずは,15個の画像ファイル(1から15まで書いてある画像)を作りましょう!私はphotoshopで作りました。
1.gif こんな感じで。


複数の画像を表示するプログラムの例

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 );
    }
}


実行結果

puzzle1.gif


sample.htmlをいじって作ってみました!
単純ですね!!
こんなんだとかなり面倒ですよ。あと11回同じ命令を書かなきゃいけないですからね・・・。。。
しかも,数字の場所を移動させるのにもいちいちプログラムを書き直さなければいけませんな。これじゃパズルゲームじゃないですよねぇ!



そこで今度は,配列とfor文を使って、もっと簡単に表示できるようにしてみませう!!!



このページは…

選択肢 投票
参考になった 28  

アプレットを動かす<<もくじ>>たくさんの画像を並べる

添付ファイル: file1.gif 1858件 [詳細] filepuzzle1.gif 2396件 [詳細] filepuzzle1.java 597件 [詳細] filepuzzle1.html 670件 [詳細]


topJava教室 ≫ 画像を表示する