Javaプログラミング学習サイト ゆるゆるプログラミング

2019/11/10 公開

・画像の描画

等倍で画像を描画する方法を解説します。ここでの等倍は、画像の1ピクセルと描画するディスプレイの1ピクセルの大きさが同じことです。

ここから、画像を描画する方法を説明していきます。

Javaに用意されているGUIライブラリSwingを使って画像を描画します。以下のメソッドを使うと簡単に画像を表示することができます。

Graphics.drawImageメソッド

public abstract boolean drawImage( Image img, int x, int y, ImageObserver observer )
■このグラフィックスコンテキストの座標(x, y)に画像を等倍で描画します。

  パラメータ img : 描画する画像
        x   : グラフィックスコンテキストのx座標
        y   : グラフィックスコンテキストのy座標
        observer : イメージがさらに変換されることが通知されるオブジェクト

  戻り値     イメージピクセルがまだ変更中の場合はfalse、そうでない場合はtrue

ここから、画像を描画する方法をJavaのソースコード例で説明していきます。

GR_Image.java ← クリックしてダウンロードページに移動
001:    import java.awt.*;
002:    import javax.swing.*;
003:    import java.awt.Image;
004:    import java.awt.Toolkit;
005:    
006:    public class GR_Image {
007:    	public static void main(String[] args) {
008:    		JFrame frame = new JFrame();
009:    
010:    		// // タイトル名を設定
011:    		frame.setTitle( "タイトル" );
012:    
013:    		// フレームの大きさを設定
014:    		frame.setSize( 400, 300 );
015:    
016:    		// ”×”ボタンを押した時の処理を設定
017:    		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
018:    
019:    		// フレームにパネルを追加
020:    		MyPanel panel = new MyPanel();
021:    		frame.getContentPane().add( panel );
022:    
023:    		// フレームを表示
024:    		frame.setVisible( true );
025:    	}
026:    }
027:    
028:    
029:    // JPanelを継承したMyPanelを作成
030:    class MyPanel extends JPanel {
031:    	// 画像
032:    	Image img;
033:    
034:    	public MyPanel() {
035:    		// 背景色を黒(black)に設定
036:    		setBackground( Color.black );
037:    
038:    		// 画像の読み込み
039:    		img = Toolkit.getDefaultToolkit().getImage( "./sampleimage004.jpg" );
040:    	}
041:    
042:    
043:    	// 描画
044:    	public void paintComponent( Graphics g ) {
045:    		super.paintComponent( g );
046:    
047:    		// 画像の描画
048:    		g.drawImage( img, 100, 40, this );
049:    	}
050:    }

GR_Image.javaの実行結果

画像の描画

sampleimage004.jpgのサイズは、200x150ピクセルです。その画像の左上のグラフィック座標が(100,40)になるように描画されています。

画像の描画解説

ここでは比較的小さい画像を描画しているのでフレームに収まっていますが、スマートフォンやデジタルカメラなどで撮影したサイズの大きな画像をこのプログラムに指定した場合、フレーム内に写真の左上部分だけが描画されます。

ここからは、このソースコードを上から順番に解説していきます。

001:    import java.awt.*;
002:    import javax.swing.*;
003:    import java.awt.Image;
004:    import java.awt.Toolkit;

Javaのクラスライブラリの中から「java.awt」と「javax.swing」と「java.awt.Image」と「java.awt.Toolkit」というパッケージにあるクラスを、このプログラム内で使うために記述します。

006:    public class GR_Image {

クラス名を、GR_Imageとしています。

007:    	public static void main(String[] args) {

このmainメソッドからプログラムを実行します。

008:    		JFrame frame = new JFrame();

フレームの表示は、JFrameクラスを使います。

010:    		// // タイトル名を設定
011:    		frame.setTitle( "タイトル" );

ウィンドウに表示するタイトルを指定します。この例では、タイトルという文字列を指定しています。

013:    		// フレームの大きさを設定
014:    		frame.setSize( 400, 300 );

フレーム全体のサイズを指定します。この例では、フレーム全体(タイトルバーと縁を含む)のサイズは400x300ピクセルです。

016:    		// ”×”ボタンを押した時の処理を設定
017:    		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

"×"ボタンを押したときの処理を指定します。JFrame.EXIT_ON_CLOSEは、フレームを閉じることを意味しています。

019:    		// フレームにパネルを追加
020:    		MyPanel panel = new MyPanel();
021:    		frame.getContentPane().add( panel );

フレームにパネル(Jpanelクラス)を割り当てます。パネルは、グラフィック表示やボタンなどを乗せられる板のようなものです。ここでは、JPanelクラスを継承したMyPanelクラスを作り、そのクラスの中で画像を描画します。MyPanelクラスのソースは29行目から書いています。

029:    // JPanelを継承したMyPanelを作成
030:    class MyPanel extends JPanel {

JPanelクラスを継承したMyPanelクラスです。

034:    	public MyPanel() {
035:    		// 背景色を黒(black)に設定
036:    		setBackground( Color.black );

パネルの背景色を黒にしています。public MyPanel()は、MyPanelクラスが作られる(実行される)ときに1回だけ呼ばれるメソッドです。public クラス名( 引数 )を書くことで、最初に実行するメソッドを作ることが出来ます。

038:    		// 画像の読み込み
039:    		img = Toolkit.getDefaultToolkit().getImage( "./sampleimage004.jpg" );

Toolkit.getDefaultToolkit().getImageメソッドで画像をImageクラスに読み込んでいます。

Toolkit.getImageメソッド

public abstract Image getImage( String filename )
■指定されたファイルからピクセルデータを取得するイメージを返します。

  パラメータ filename : 画像ファイル名

  戻り値     イメージ(画像)を戻す。

043:    	// 描画
044:    	public void paintComponent( Graphics g ) {
045:    		super.paintComponent( g );

パネルの描画メソッドです。このpublic void paintComponent( Graphics g )メソッドは、パネルの表示が必要なときに呼び出されるメソッドです。メソッド名と引数は、変えないでください。

047:    		// 画像の描画
048:    		g.drawImage( img, 100, 40, this );

ここから画像の描画です。drawImageメソッドに、読み込んだ画像imgと左上隅の座標(100,40)とthisを与えて画像を描画しています。4番目の引数はとりあえずthisを指定してください。

■関連コンテンツ

画像の座標系 画像の座標系について解説
フレームの表示 図形を表示するフレーム(枠)の表示方法について解説
背景色の変更 図形を表示するフレームの背景色の変更方法について解説
ライン描画 ラインを描画する方法解説
画像の座標系 画像の座標系について解説
画素 画素について説明
画像処理とは 画像処理とは何かを解説
画像ファイル形式 画像ファイル形式について解説
光と色の3原色の考え方を解説-画像

光と色の3原色

光の3色(RGB)の混合と、インクの3色(CMY)の混合の考え方を説明しています。

■新着情報

2021.06.18 変数の初期値 変数に値を代入しないで計算
2021.05.28 短針と長針の角度 短針と長針の角度は?
2021.05.19 各位(くらい)を求める 1の位の値は?10の位は?

■広告

 

 

 

 

 

 

 

 

 

Topへ