基本グラフィックス


  1. 目的
    基本図形のグラフィックスとアニメーション表示を紹介します

  2. 手法
    1. チェックボックスの利用
      ここでは、チェックボックスを利用します。getState()メソッドで、チェックボックスの状態(ture/false)を取得できます。
       checkbox1.getState()

    2. pait()メソッド
      描画が必要な場合、アプレットの標準メソッドであるpaint()が呼び出されます。 
       void paint (Graphics g)
      もし、なければ、この関数を追加します。引き渡されるgを用いて、グラフィックスメソッドを実行できます。
      また、再描画を実行するにはrepaintを実行します。
       void repaint()

    3. 基本図形の描画
      以下のようなグラフィックス関数が利用できます
       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 c1=new Color(100, 100, 100);
      で色を定め、
       graphics.setColor(c1);
      で、以下のグラフィックスで使用する色を変更します。(100, 100, 100)は、0から255までの数値で色を定めます。

    5. ウインドウのサイズ
       getSize().width
      でこのウインドウのサイズ(幅)を取得できます。このメソッドは init() 終了後に実行する必要があります。高さは
       getSize().height)
      で取得します。

    6. スレッド
      スレッドを利用して一定時間間隔で再描画して、アニメーションを行います。

    7. ちらつき防止対策
      1. 初めての人
        初めての人はこの部分は読み飛ばして下さい。

      2. ちらつき
        塗りつぶしの円を描くとき、ちらつきがでる場合があります。
        これを防止するにはダブルバッファの手法を用います。

      3. Imageクラス
        ダブルバッファを行うには、画像を表示画面とは異なる場所に描き、画面のレフレッシュに同期して描き直します。
        まず、startメソッドで、Imageクラスを作成し、graphicsを取得します。この操作は、initで行うと失敗します(タイミングが早すぎる)。start()で実行します。
         Image image1;
          image1 = createImage(this.getSize().width ,this.getSize().height);
         offgraphics = image1.getGraphics();

      4. 描画
        描画は、次のように、offgraphicsに対して行います。
         offgraphics.fillOval(100-loop_index/2, 100-loop_index/2, loop_index, loop_index);
        このoffgraphicsは自動消去されないので、先頭でクリアする必要があります。
         offgraphics.clearRect(0,0,this.getSize().width ,this.getSize().height);
        最後にこの画面を正規のグラフィックスに送ります
         g.drawImage(image1,0,0,this); 

      5. 同期
        同期をとるため、updateを指定します。可能ならここでclipRect(5,5,95,95);等で描画範囲を指定します。
        public void update(Graphics g) {
         paint(g);
        }

  3. プロジェクト
    1. レイアウト
      画面右にチェックボックスを作成し、名前に描画する図形の名前を設定します。doubleはダブルバッファ表示を設定するボタンです。



    2. 関数
      1. 描画、再描画を行う
        1. 初めての人に
          offgraphics;を利用しない場合
           if(checkbox5.getState()){
             graphics = offgraphics;
            }
          は省略して下さい。

        2. paint()
           描画処理を行います。checkbox5.getState()がtrueのとき、ダブルバッファで描画します。チェックボタンをチェックして、trueであれば対応する図形を描画します。スレッドで、loop_indexを変更し、描画位置を変更することで、アニメーションの効果を実現してます。

             public void paint (Graphics g)
             {
               Graphics graphics=g;
               //ダブルバッファ処理をする
             if(checkbox5.getState()){
                 graphics = offgraphics;
               }
            //全体を消去
               graphics.clearRect(0,0,this.getSize().width ,this.getSize().height);
               Color c1=new Color(100, 100, 100);
               Color c2=new Color(10, 50, 50);
          
             //表示位置やサイズを指定するパラメータを設定
               loop_index +=2;
               if(loop_index >= 200) loop_index = 5;
               graphics.setColor(new Color(100, 100, 100));
          
             //各図形を表示
               if(checkbox1.getState())
                 graphics.drawRect(100-loop_index/2, 100-loop_index/2, loop_index, loop_index);
               if(checkbox2.getState()){
                 graphics.setColor(c1);
                 graphics.fillOval(100-loop_index/2, 100-loop_index/2, loop_index, loop_index);
                 graphics.setColor(c2);
               }
               if(checkbox3.getState())
                 graphics.drawLine(10, loop_index, 200, loop_index);
          
               if(checkbox4.getState())
                 graphics.drawString("Java AWT draw",70, loop_index);
               if(checkbox5.getState()){
                 g.drawImage(image1,0,0,this);
               }
             }
            
        3. update()
          ちらつき防止のため、update()で再描画をしていします。
          public void update(Graphics g) {
          paint(g);
          }

      2. グラフィックスの作成
        ダブルバッファを行うには、startメソッドでoffgraphicsを定義します。他の参考書などで、よく init メソッドでこの処理をしていますが、最近の実行環境では失敗します。start()はinit()実行後、アプレットから自動的に呼び出されるメソッドです。
          public void start() {
            image1 = createImage(this.getSize().width ,this.getSize().height);
            offgraphics = image1.getGraphics();
            System.out.println("image size="+image1.getWidth(this));
          }

    3. スレッド
      1. スレッドの定義、起動
        スレッドを利用するには、まず、先頭のApplet宣言に、implements Runnableを付加します。

         public class threadDraw extends Applet implements Runnable

        次に、先頭で
         Thread thread1;
        thread1を作成し、アプレットのstart()メソッドで、スレッドを起動します。先のグラフィックス処理を含めたstart メソッド は次のようになります。offgraphicsを利用しない場合、thread1に関する最後の2行のみが必要です。
          public void start() {
            image1 = createImage(this.getSize().width ,this.getSize().height);
            offgraphics = image1.getGraphics();
            System.out.println("image size="+image1.getWidth(this));
            thread1 = new Thread(this);
            thread1.start();
          }

      2. スレッドの実行
        20m秒毎に休止するスレッドを執行するメソッド run を定義します。sleep(20)で休止時間を設定しています。try..catch は例外処理で、Jbuilderで利用するときは必須です。

        public void run()
        {
        while(goFlag){
         repaint();
         try {Thread.sleep(20);}
        catch(InterruptedException e) {}
        }
        }

      3. アニメーション
        スレッドは本体のアプレットクラスのメソッドとは別の実行され、ここでは20m秒間隔で、本体の再描画(repaint)を行います。repaintでは、実行するたびに、loop_index +=2; で、loop_indexの値を変更するため、びょうがの度に、図形の位置や大きさが変化します。

  4. 実行
    図形のボタンをクリックします。複数の図形の選択が可能です。Doubleをチェックすると、ダブルバッファ機能が有効になり、画面のちらつきがなくなります。





  5. ダウンロード
    このプロジェクトをダウンロードできます。
    次の行をクリックして、draw.exeファイルを適当なフォルダに保存します。
    ダウンロード開始
    このファイルは自己解凍型の圧縮ファイルです。このファイルを実行すると指定したフォルダに必要なファイルが生成されます。

トップに戻る