2002
-0921　ver 1.00 発行版

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃.&&&&　****　%%%%.　　JavaScript&Javaで目指そう！基本情報技術者試験　 ┃
┃&&&&&&******%%%%%%　　執筆＆編集　斎藤末広   suehiro@he.mirai.ne.jp 　┃
┃'&┃&''*┃*''%┃%'　　発行　　　　江口昌宏   jmaga@yscon.co.jp　　　　┃
┗━┻━━┻━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

★解除・登録　:http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html

★広告募集　　:http://www2.odn.ne.jp/~egu33/jmaga/jmaga-ad.html

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

　第２８号　2002/09/21

　Canvas(キャンバス) ，画像を扱うGUI部品

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

　プログラムを作成する上での注意事項：
　Windows98SE, SDK(JDK) 1.3.1，IE 5.5 を前提としています。
　拡張子を表示するに設定してください。

------------------------------------------------------------------------
▼ 画像

　アプレットで画像を表示する単純なプログラムを見ましょう。

例 j28-01 xSmpImg01.java 画像表示サンプル
ソース　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpImg01.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpImg01.htm

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3: import java.awt.Image;
  4:
  5: public class xSmpImg01 extends Applet {
  6:
  7:     Image ximg;
  8:
  9:     public void init(){
 10:         ximg = getImage(getDocumentBase(),"img1.gif");
 11:     }
 12:
 13:     public void paint(Graphics xg){
 14:         xg.drawString("Hello, World",5, 25);
 15:         xg.drawOval(5, 25, 100, 100);
 16:         xg.drawImage(ximg, 5, 25, this);
 17:     }
 18: }

　このプログラムは，３つの画像をアプレットに表示しています。"Hello, World"
を画像というのは少し変と感じるかもしれませんが，一つ一つの点として，コン
ピュータが表示しているということで，コンピュータにとっては画像ということに
なります。

　drawString    文字列を画像に変換して表示
　drawOval      指定された値と大きさで，楕円の像を計算して表示
　drawImage     与えられた画像をそのまま表示

は，ともに，Graphics クラスの仕事でした。

------------------------------------------------------------------------
▼ GUI部品 Canvas(キャンバス)を利用

　xSmpImg01.java は，画像をアプレットの表示エリアの位置を指定して，直接
に描いています。直接に描かずに，別のところに描いて，それを貼り付けるいう
方法もあります。そのときに利用するのが，GUI部品のCanvas(キャンバス)クラス
です。
　Canvas(キャンバス)は，もともと，油絵を描くときの，四角の枠に画布を張っ
たものを指します。このキャンバスのように，別々に絵を描いておいて，それを
アプレットの上に置くという感じです。
　GUI部品のCanvas(キャンバス)を利用することで，他のGUI部品と同じように扱え
るというメリットが生まれます。

　"Hello, World"の表示を Canvas(キャンバス)クラスを利用して書き換えてみます。
書き換える前に単純に,"Hello, World"を表示しているプログラムを見ましょう。

例 j15-01 xHelloApplet.java "Hello, Java"表示
ソース　http://www.yscon.co.jp/j/java/jmaga/j15/xHelloApplet.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j15/xHello.htm

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3:
  4: public class xHelloApplet extends Applet {
  5:     public void paint(Graphics xg){
  6:         xg.drawString("Hello, World",100, 120);
  7:     }
  8: }

では，これを Canvas(キャンバス)クラスを利用して書き換えます。

例 j28-02 xSmpGUI14.java Canvas(キャンパス)利用画像表示サンプル
ソース　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpGUI14.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpGUI14.htm

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3: import java.awt.Canvas;
  4: import java.awt.Color; // 着色用(分かり易くするため)
  5:
  6: public class xSmpGUI14 extends Applet {
  7:
  8:     public void init(){
  9:
 10:         // 生成
 11:         xMojiCanvas xmojiCanvas = new xMojiCanvas("Hello, World");
 12:         xmojiCanvas.setSize(100,50);
 13:         xmojiCanvas.setBackground(Color.pink); // 着色(分かり易くするため)
 14:         // 表示
 15:         add(xmojiCanvas);
 16:     }
 17: }
 18:
 19: // Canvasクラスの子クラス定義
 20: class xMojiCanvas extends Canvas {
 21:
 22:    // インスタンス変数
 23:    String istr;
 24:
 25:     // 生成(コンストラクタ)
 26:     public xMojiCanvas(String xstr){
 27:        istr = xstr;
 28:     }
 29:
 30:     // メソッド
 31:     public void paint(Graphics xg){
 32:         xg.drawString(istr ,5, 25);
 33:     }
 34: }


このプログラムの全体の構造は，

 1- 4 行目の import 部
 6-17 行目の xSmpGUI14 クラスの定義部
19-34 行目の Canvasクラスの子クラスの定義部

　に分かれます。xSmpGUI14 クラスはこのプログラムの中心ですので，メインク
ラスと呼ぶことにします。

　Canvas クラスを利用する主な流れは，

　1 Canvas クラスの子クラス定義
    その中で，
        インスタンス変数定義
        コンストラクタ定義
        print 定義

　2 メインクラス内で，

　生成　Canvas子クラスからインスタンスを new で生成
　表示　add

となります。通常の GUI部品は，２のメインクラス内で，生成，表示とするだけ
でした。

------------------------------------------------------------------------
▼ Canvas(キャンバス)の子クラスのプログラム内の記述位置

　xSmpGUI14.java の Canvas クラスの子クラスをもう一度みましょう。

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3: import java.awt.Canvas;
  4: import java.awt.Color; // 着色用(分かり易くするため)
  5:
  6: public class xSmpGUI14 extends Applet {
  7:
  8:     public void init(){
  9:
 10:         // 生成
 11:         xMojiCanvas xmojiCanvas = new xMojiCanvas("Hello, World");
 12:         xmojiCanvas.setSize(100,50);
 13:         xmojiCanvas.setBackground(Color.pink); // 着色(分かり易くするため)
 14:         // 表示
 15:         add(xmojiCanvas);
 16:     }
 17: }
 18:
 19: // Canvasクラスの子クラス定義
 20: class xMojiCanvas extends Canvas {
 21:
 22:    // インスタンス変数
 23:    String istr;
 24:
 25:     // 生成(コンストラクタ)
 26:     public xMojiCanvas(String xstr){
 27:        istr = xstr;
 28:     }
 29:
 30:     // メソッド
 31:     public void paint(Graphics xg){
 32:         xg.drawString(istr ,5, 25);
 33:     }
 34: }

　20 行目から34 行目までのCanvasクラスの子クラスは，メインクラスの上の，5 行目
に入れることもできます。問題なく動作します。もしそこにいれると

　import 部
　メインクラス部
　Canvasクラスの子クラス部

という並び順から

　import 部
　Canvasクラスの子クラス部
　メインクラス部

　になります。

　また，16 行目と17行目の間にいれることもできます。そうすると

　import 部
　メインクラス部
    内部クラスとしてCanvasクラスの子クラス部定義

となります。メインクラスに内蔵することもできます。

　今回のサンプルでは，プログラムの全体の構造はできるだけ，プログラム上部
で分るように書くという規則を適用して，Ｊマガでは，メインクラスから利用す
るクラスの定義は，メインクラスの下に書くことにしました。

　内蔵(内部クラス)にするかそとに出すかは，独立できるものは独立させるという
規則に従って，外に出しました。これはメリット・デメリットがあります。プロ
グラム上の意味もかわります。

------------------------------------------------------------------------
▼ メインロジック解説

  6: public class xSmpGUI14 extends Applet {
  7:
  8:     public void init(){
  9:
 10:         // 生成
 11:         xMojiCanvas xmojiCanvas = new xMojiCanvas("Hello, World");
 12:         xmojiCanvas.setSize(100,50);
 13:         xmojiCanvas.setBackground(Color.pink); // 着色(分かり易くするため)
 14:         // 表示
 15:         add(xmojiCanvas);
 16:     }
 17: }

　ここは，コマンドボタンなどのGUI部品を利用するときと同じです。この下で
定義してある，xMojiCamvasクラスの分身(インスタンス)を作り出して，それを
xmojiCanvas としてます。クラスのときは，Moji でインスタンスときは，moji
と小文字にしています。一般的にインスタンスは，小文字で始めます。

 12:         xmojiCanvas.setSize(100,50);

　キャンパスのサイズを決めています。

 13:         xmojiCanvas.setBackground(Color.pink); // 着色(分かり易くするため)

　キャンパスを表示したときに，分かり易いように，ピンクをつけました。

　xSmpGUI14 アプレットには，paint が必要ありません。ここも今までのGUI部品
を利用したときと同じです。

　レイアウトに関してはなにも指定していませんので，自動的に，中央からGUI
部品が配置されます。

------------------------------------------------------------------------
▼ Canvas(キャンバス)の子クラス解説

 19: // Canvasクラスの子クラス定義
 20: class xMojiCanvas extends Canvas {
 21:
 22:    // インスタンス変数
 23:    String istr;
 24:
 25:     // 生成(コンストラクタ)
 26:     public xMojiCanvas(String xstr){
 27:        istr = xstr;
 28:     }
 29:
 30:     // メソッド
 31:     public void paint(Graphics xg){
 32:         xg.drawString(istr ,5, 25);
 33:     }

　20 行目の

 20: class xMojiCanvas extends Canvas {

　で，xMojiCanvas を，Canvasクラスを親として，それを継承した子クラス
として定義します。Camvas クラスはこのように一度，子クラスを定義して間接的に
利用します。

　xMojiCanvas が利用される場合は，さらに，分身(インスタンス)を生成してか
ら利用されます。そのインスタンスが利用する変数ということで，

 22:    // インスタンス変数
 23:    String lstr;

を定義して，

 11:         xMojiCanvas xmojiCanvas = new xMojiCanvas("Hello, World");

と実行されますので，この"Hello, World"を受け取り，保管しておく，変数とし
istr を使っています。インスタンス変数ということで，x の変わりに，i で始
まる変数名にしました。

 25:     // 生成(コンストラクタ)
 26:     public xMojiCanvas(String xstr){
 27:        istr = xstr;
 28:     }

　これは，11 行目で，new されたときに実行されます。

 30:     // メソッド
 31:     public void paint(Graphics xg){
 32:         xg.drawString(istr ,5, 25);
 33:     }

　表示されるときに paint メソッドが実行されます。これは，アプレットと同
じです。

------------------------------------------------------------------------
▼ 各種のイメージを表示

　最初に例としてみた，３つの画像表示のプログラムをCanvasを使って表示させ
てみましょう。

まず，最初の例は

例 j28-01 xSmpImg01.java 画像表示サンプル
ソース　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpImg01.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpImg01.htm

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3: import java.awt.Image;
  4:
  5: public class xSmpImg01 extends Applet {
  6:
  7:     Image ximg;
  8:
  9:     public void init(){
 10:         ximg = getImage(getDocumentBase(),"img1.gif");
 11:     }
 12:
 13:     public void paint(Graphics xg){
 14:         xg.drawString("Hello, World",5, 25);
 15:         xg.drawOval(5, 25, 100, 100);
 16:         xg.drawImage(ximg, 5, 25, this);
 17:     }
 18: }

では，これを，Canvasクラスを利用して書き直します。

例 j28-03 xSmpGUI15.java Canvas(キャンパス)利用画像表示サンプル その２
ソース　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpGUI15.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j28/xSmpGUI15.htm

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3: import java.awt.Image;
  4: import java.awt.Canvas;
  5: import java.awt.Color; // 着色用(分かり易くするため)
  6:
  7: public class xSmpGUI15 extends Applet {
  8:
  9:     public void init(){
 10:
 11:         // 生成
 12:         xMojiCanvas xmojiCanvas = new xMojiCanvas("Hello, World");
 13:         xmojiCanvas.setSize(100,50);
 14:         xmojiCanvas.setBackground(Color.pink); // 着色
 15:
 16:         xOvalCanvas xovalCanvas = new xOvalCanvas(5, 25, 100, 100);
 17:         xovalCanvas.setSize(100,100);
 18:         xovalCanvas.setBackground(Color.yellow); // 着色
 19:
 20:         Image ximg = getImage(getDocumentBase(),"img1.gif");;
 21:         xImgCanvas ximgCanvas =   new xImgCanvas(ximg, 5, 25);
 22:         ximgCanvas.setSize(100,100);
 23:         ximgCanvas.setBackground(Color.red); // 着色
 24:
 25:         // 表示
 26:         add(xmojiCanvas);
 27:         add(xovalCanvas);
 28:         add(ximgCanvas);
 29:     }
 30: }
 31:
 32: // 文字列表示用キャンバス
 33: class xMojiCanvas extends Canvas {
 34:
 35:     // インスタンス変数
 36:     String istr;
 37:
 38:     // 生成(コンストラクタ)
 39:     public xMojiCanvas(String xstr){
 40:         istr = xstr;
 41:     }
 42:
 43:     // メソッド
 44:     public void paint(Graphics xg){
 45:         xg.drawString(istr ,5, 25);
 46:     }
 47: }
 48:
 49: // 楕円表示用キャンバス
 50: class xOvalCanvas extends Canvas {
 51:
 52:     int ix,iy,iwidth,iheight;
 53:
 54:     public xOvalCanvas(int x, int y, int width, int height){
 55:         ix = x;
 56:         iy = y;
 57:         iwidth = width;
 58:         iheight = height;
 59:     }
 60:
 61:     public void paint(Graphics xg){
 62:         xg.drawOval(ix, iy, iwidth, iheight);
 63:     }
 64: }
 65:
 66: // 画像ファイル表示用キャンパス
 67: class xImgCanvas extends Canvas {
 68:
 69:     Image iimg;
 70:     int ix, iy;
 71:
 72:     public xImgCanvas(Image ximg, int x, int y){
 73:         iimg = ximg;
 74:         ix = x;
 75:         iy = y;
 76:     }
 77:
 78:     public void paint(Graphics xg){
 79:         xg.drawImage(iimg, ix, iy, this);
 80:     }
 81: }

------------------------------------------------------------------------
▼ 練習問題

練習１

　xSmpGUI14.java と　xSmpGUI14.htm をコピーして，それぞれ，xRenGUI14.java
と，xRenGUI14.htm とします。setSize，setBackground を Canvas クラスの子ク
ス内で定義しなさい。

練習２

　xSmpGUI15.java と　xSmpGUI15.htm をコピーして，それぞれ，xRenGUI15.java
と，xRenGUI15.htm とします。

　前号で勉強した，GridLayout(グリッドレイアウト)を使って，レイアウトを指
定します。

------------------------------------------------------------------------
▼ 次号の予定

　次号は，オブジェクト指向復習 を扱います。

　感想は，斎藤まで，suehiro@he.mirai.ne.jp
　広告等のお問い合わせ：jmaga@yscon.co.jp

------------------------------------------------------------------------
▼ 誤字・脱字等の修正，プログラムの修正など，以下の場所で確認できます。

Jmaga情報
　http://www.yscon.co.jp/j/java/jmaga/
登録・削除および広告の案内
　http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html

------------------------------------------------------------------------
▼ 著作権について

　このメールマガジンで公開しているプログラムソースは，著作権を当方スタッ
フが所有しますが，商用を含めて，再利用，改変，発表を制限しません。
　本文に関しては，斎藤末広が著作権を所有します。再利用に関しては，承諾を
必要とします。

広告募集 http://www2.odn.ne.jp/~egu33/jmaga/jmaga-ad.html

------------------------------------------------------------------------
▼アンケート（以下を返信してください）

　この号のＪマガに対するご意見をお待ちしてます。ぜひ，ご返信下さい。

内容のレベルは

１　難しいのでもっと簡単にしてほしい
２　ちょうどよい
３　もっと難しくてもよい

その他ご要望