グラフィックスの基礎

  1. グラフィックス
    アプレットのウインドウには、グラフィックス関数を用いて、文字、直線、楕円、などが描画出来ます。ここでは、基本的なグラフィックスメソッドの利用法を紹介します。また、ボタンを利用し、ボタンを押したらランダムな位置に文字表示を行うイベント処理を行います。

  2. 描画メソッド
    1. paint()メソッド
      描画には、
       public void paint (Graphics g){..}
      メソッドを利用します。これはアプレットの標準メソッドで、描画が必要になると呼び出されます。引数の g が描画用クラスで、gを利用して、グラフィックスメソッドを呼び出すことができます。

    2. 座標系
      ウインドウの座標は、左上が原点(0,0)です。座標の単位は画素(ピクセル)です。y座標が大きくなると位置は下方向に移動します。ウインドウのサイズは、
       getWidth()、getHeight()
      メソッドで取得できます。

    3. 基本図形の描画メソッド
      以下のようなグラフィックス関数が利用できます。gをGraphicsオブジェクトとして以下のようなメソッドが利用できます。
      これ以外にも、多くのグラフィックスメソッドが提供されています。

       g.drawRect(x,y,w,h);
         矩形を表示します。(x,y)が座標、w,hは幅と高さです。

       g.fillRect(x,y,w,h);
        塗りつぶし矩形

       g.drawOval(x,y,w,h);
        楕円を描画します。
        矩形に接する楕円を描画します。

       g.fillOval(x,y,w,h);
         塗りつぶし楕円

       g.drawLine(x1, y1, x2, y2);
        2点を結ぶ直線を描画します

       g.drawString("Java AWT draw",x, y);
        文字列を描画します。
        開始位置を(x,y)で、文字列を先頭の引数で指定します。


    4. 描画する色は、Colorクラスで設定します。色は(r,g,b)で、赤、緑、青、の順に、0..255に範囲で指定します。(255,0,0)は明るい赤、(0,0,0)は黒、(255,255,0)は黄色になります。newでカラーオブジェクトを生成し同時に色を設定し、それをc2で参照します。setColorを色を設定します。以後、変更するまで、この色で描画を行います。
        Color c2=new Color(100, 100, 200);  g.setColor(c2);

    5. 描画例
      では、簡単な描画例を紹介します。最初に描画色を青みがかった明るい灰色に設定します。次に、ウインドウの枠から5画素内側に塗りつぶしをする矩形を表示します。次に色を変更した後、(20,40)から横70縦30の塗りつぶしの楕円を表示、その隣に同じサイズの線画の楕円を描きます。
       その後、直線を繰返し描画して格子を描きます。最初は横線6本、その後で縦線を11本表示します。
        public void paint (Graphics g){
      
         Color c1=new Color(100, 200, 100);
         g.setColor(c1);
         //矩形
          g.drawRect(5,5,getWidth()-10,getHeight()-10);
      
         //色変更
          Color c2=new Color(100, 100, 200);
          g.setColor(c2);
          //楕円
          g.setColor(c2);
        g.fillOval(20,40,70,30);
          g.drawOval(120,40,70,30);
          
      
          //格子の表示
          int i;
          g.setColor(new Color(100,100,250));
          for( i=0;i<=5;i++){
             g.drawLine(20,100+10*i,220,100+10*i);
          }
          for( i=0;i<=10;i++){
            g.drawLine(20+20*i,100,20+20*i,150);
          }
        }

    6. ボタンの定義
       ボタンは GUI の部品の一つで、マウスでクリックすることで、あらかじめ設定したメソッドを呼び出すことができます。JBuilderを利用すると、配置やメソッドの対応付けを GUI 環境で設定できますが、ここでは、JDKでのプログラムによる設定法を紹介します。
       ボタンを利用するには、Buttonクラスを利用し、まず、次のようにbutton1を生成します。
       private Button button1 = new Button();
      次に、button1に対し、setLabel("hello")でボタンの名前(ラベル)を指定し、setBounds(new Rectangle(126, 256, 75, 27))でボタンの位置とサイズを指定します。Rectangleは矩形のクラスで、126, 256 が左上の座標、 75, 27 がその幅と高さを定めます。
       次に、this.setLayout(null); で、配置手法を手動(自動レイアウトを利用しない)とし、this.add(button1, null); で、button1 をアプレットに追加します。ここで、thisは自分自身(アプレット)を指定します。
       途中の button1.addActionListener(..) は、button1が押されたとき呼び出すメソッド:button1_actionPerformed(e);を指定します。java.awt.event.ActionListener()はイベント制御を行うアクションリスナクラスで、actionPerformed はアクションが実行された(この場合ボタンが押されたとき)実行されるメソッドです。
       この設定法は少し理解しにくいと思いますが、button1_actionPerformed(e);関数を独立に定義できるので、プログラムの構成はわかりやすくなります。
          private Button button1 = new Button();
      
          private void jbInit() throws Exception {
          button1.setLabel("hello");
          button1.setBounds(new Rectangle(126, 256, 75, 27));
      
          button1.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(ActionEvent e) {
              button1_actionPerformed(e);
            }});
      
          this.setLayout(null);
          this.add(button1, null);
        }

    7. エラー処理
      実際のプログラムでは、button1の定義をアプレットのクラス宣言の直後に、jbinit() を アプレットの初期設定を行う標準メソッド:init() の中で、呼び出します。このinit()で、jbinitメソッドを、try..catch の構文の中で呼び出しています。これは、実行時のエラー処理で、tryの内部で発生したエラーは catch で中で処理できます。エラーの内容は Exception(例外)クラスのeとして渡されます。ここでは、e.printStackTrace();でエラーが起きたときのスタックの状態を表示します。

          try {
            jbInit();
          }
          catch(Exception e) {
            e.printStackTrace();
          }

    8. ボタンイベント処理
       グラフィックスクラスは、
       Graphics g=getGraphics();
      でも取得できます。
      以下は、ボタンを押すたびに、ランダムな位置に "hello"を描画します。Math.random()は0..1の範囲の乱数を生成するメソッドです。
        void button1_actionPerformed(ActionEvent e) {
          int xp,yp;
          Graphics g=getGraphics();
          xp=(int)(Math.random()*200);
          yp=(int)(Math.random()*100)+150;
          g.drawString("hello",xp,yp);
        }

    9. 再描画
      paint()以外での描画は、推奨できません。隠れたウインドウが現れる場合、システムは再描画のためにpaint()メソッドを呼び出します。paint() 以外での描画は再表示されません。実行例で確認して下さい。

    10. 実行
      実行すると、明るい青で塗りつぶされた背景に楕円と格子が表示されます。また、ボタンを押すと、ランダムな位置に文字が表示されます。このウインドウを隠したのち、再度、表に出すと、文字は再現しません。



  3. ダウンロード
    このプロジェクトをダウンロードできます。次の行をクリックして、intro.exeファイルを適当なフォルダに保存します。JDK版はjavaソースとアプレットを呼び出すhtmlを含みます。

     ダウンロード開始(JBuilder)
     ダウンロード開始(JDK)

    このファイルは自己解凍型の圧縮ファイルです。

  4. 演習
     (メディアプログラミングの学生さんへ)
    グラフィックスを用いて、何かを描いてください。そのソースと実行結果の絵のハードコピーをA4の報告書にまとめて提出してください。