GUIアプリ⑤描画

・HelloWorld
・レイアウト
・ダイアログ
・コンポーネント
・描画(今回)

GUIアプリの連載の続きです。
今回は、描画についてです。
描画は、色や形を設定できるので、学んでいきたいと思います。
マウスを使って、簡単なお絵かきアプリを作ってみたいと思います。

■Javaソース資源

#ファイル名概要修正/新規
1GuiGraphicMouse.javaJFrameクラス新規
2PanelMouse.javaJPanelクラス新規

■作成手順

#作成手順備考
1プロジェクトの作成プロジェクト名:GuiGraphicMouse
2JFrameクラスの作成・メイン
・コンストラクタ
・アクションパフォーマスド
・アジャストメントバリューチェンジド
3Jpanelクラスの作成・コンストラクタ
・パネルクリア
・マウスクリックド
・マウスドラックド
・形の設定(色/サイズ/形(〇または□))
・ペンの設定(色/サイズ)

#1 プロジェクトの作成

#2 JFrameクラスの作成

行数説明
22~23クラス名:GuiGraphicMouse
継承元クラス:JFrame(フレーム)クラス
インターフェイス:ActionListener(アクションリスナー)、AdjustmentLister(アジャストメントリスナー)
26マウス描画用クラスのインスタンス生成になります。
28~34メニュバー(JMenuBar)クラスのインスタンスを生成しています。
「ファイル」メニューに、「初期化」、「閉じる」を設定しています。
メニュバー2(JMenuBar)クラスのインスタンスを生成しています。
「設定」メニューに、「詳細設定」を設定しています。

行数説明
37ペンスクロールバー(JScrollBar)クラスのインスタンスを生成しています。
①引数:JScrollBar.HORIZONTAL(X軸)
②引数:5:初期値
③引数:10:摘みの幅
④引数:0:最小値
⑤引数:110:最大値
38形スクロールバー(JScrollBar)クラスのインスタンスを生成しています。
①引数:JScrollBar.HORIZONTAL(X軸)
②引数:10:初期値
③引数:10:摘みの幅
④引数:0:最小値
⑤引数:110:最大値
40ダイアログ(JDialog)クラスのインスタンス生成になります。
41~43「閉じる」、「ペン色」、「形色」ボタン(JButton)クラスのインスタンスを生成しています。
45~46ラベル1~2(JLabel)クラスのインスタンスを生成しています。
ラベル1に「ペンサイズ:5」、ラベル2に「形サイズ:10」を設定しています。
48~49□・〇ラジオボタン(JRadioButton)クラスのインスタンスを生成しています。
□ラジオボタンに、「形:□」、〇ラジオボタンに、「形:〇」を設定しています。
行数説明
51~52アノテーション:@Override(インターフェイスの抽象クラスの実装メソッド)
メソッド名:adjustmentValueChanged(アジャストメントバリューチェンジド)
引数:AdjustmentEvent e(アジャンストメントイベント)
54アジャンストメントイベントがペンスクロールバーかどうか判別
55ラベル1のテキストに「ペンサイズ:」+ペンスクロールバーの値を設定しています。
57マウス描画(PanelMouse)クラスにペンサイズをペンスクロールバーの値を設定しています。
59アジャンストメントイベントが形スクロールバーかどうか判別
60ラベル2のテキストに「形サイズ:」+形スクロールバーの値を設定しています。
62マウス描画(PanelMouse)クラスに形サイズを形スクロールバーの値を設定しています。

行数説明
66~67アノテーション:@Override(インターフェイスの抽象クラスの実装メソッド)
メソッド名:actionPerfomed(アクションパフォームド)
引数:ActionEvent e(アクションイベント)
69アクションイベントが「初期化」メニューかどうか判別しています。
70マウス描画(PanelMouse)クラスのパネルの初期化を行います。
72アクションイベントが「閉じる」メニューかどうか判別しています。
73アプリを終了します。

行数説明
75アクションイベントが「詳細設定」メニューかどうか判別
76ダイアログのコンテント・ペインをグリッドレイアウト(5行、2列)に設定しています。
78~79ダイアログのコンテント・ペインに「ペン色」、「形色」ボタンを配置しています。
81~84ダイアログのコンテント・ペインに「ペン」・「形」スクロールバー、ラベル1~2を配置しています。
86~90ボタングループ(ButtonGroup)のインスタンスを生成しています。
ボタングループに、「□」・「〇」ラジオボタンを追加しています。
ダイアログのコンテント・ペインに「□」・「〇」ラジオボタンを配置しています。
92ダイアログのコンテント・ペインに「閉じる」ボタンを配置しています。
95~101「閉じる」、「ペン色」、「形色」ボタンのアクションリスナーに登録しています。
「ペン」、「形」スクロールバーのアジャストメントリスナーに登録しています。
「□」・「〇」ラジオボタンのアクションリスナーに登録しています。
103~105ダイアログのタイトルバーを「詳細設定」に設定しています。
ダイアログのサイズを幅300ピクセル、高さ200ピクセルに設定しています。
ダイアログを表示します。
107アクションイベントが「閉じる」ボタンかどうか判別
108ダイアログを閉じます。

行数説明
110アクションイベントが「ペン色」ボタンかどうか判別
111~112色選択ダイアログのタイトルバーを「ペン色を選択してください」に設定して表示をします。
113~114マウス描画(PanelMouse)クラスのペン色を選択した色に設定します。
「ペン色」ボタンの背景色を選択した色に設定します。
116アクションイベントが「形色」ボタンかどうか判別
117~118色選択ダイアログのタイトルバーを「形色を選択してください」に設定して表示をします。
119~120マウス描画(PanelMouse)クラスの形色を選択した色に設定します。
「形色」ボタンの背景色を選択した色に設定します。
122アクションイベントが「□」ラジオボタンかどうか判別
124マウス描画(PanelMouse)クラスの形を「□」に設定します。
126アクションイベントが「〇」ラジオボタンかどうか判別
128マウス描画(PanelMouse)クラスの形を「〇」に設定します。
行数説明
132~135メインメソッド
コンストラクタのみ呼び出しを行っています。

行数説明
137コンストラクタメソッド
139~142「ファイル」メニューに「初期化」、「閉じる」を追加してメニューバーに設定しています。
143~144「初期化」、「閉じる」メニューのアクションリスナーに登録しています。
146~148「設定」メニューに「詳細設定」を追加してメニューバーに追加しています。
149「詳細設定」メニューのアクションリスナーに登録しています。
152フレーム自身のコンテント・ペインにマウス描画(PanelMouse)クラスを配置しています。
155~158フレーム自身のコンテント・ペインの以下の設定をします。
タイトルバー:「マウスによる描画」
画面右上の「×」ボタン押下時にアプリを終了する。
画面サイズの幅300ピクセル、高さ300ピクセルに設定。
画面を表示する。

#3 Jpanelクラスの作成

行数説明
11クラス名:PanelMouse(パネルマウス)
継承元クラス:JPanel(パネルクラス)
インターフェイス:MouseListener(マウスリスナー)、MouseMotionListener(マウスモーションリスナー)
13~14定数int型 形〇(SHAPE_CIRCLE)= 0
定数int型 形□(SHAPE_SQUARE)= 1
15~16Color型 ペン色(penColor)を黒に初期設定
Color型 形色(shapeColor)を青に初期設定
17int型 形(shape)を四角(SHAPE_SQUARE)に初期設定
18~19int型 ペンサイズ(penSize)=5に設定
int型 形サイズ(shapeSize)=10に設定
22~27コンストラクタ
マウスリスナーを登録
マウスモーションリスナーを登録
パネルマウス自身の背景色を白に設定
行数説明
30~34メソッド名:clear(初期化)
パネルのグラフィック(Graphic)を取得
色を白に設定
fillRectメソッド(四角形を描画する)
①引数:0(x座標)
②引数:0(Y座標)
③引数:300(幅ピクセル)
③引数:300(高さピクセル)
36~38メソッド名:setPenColor(ペン色設定)
引数:Color penColor(ペン色)
メンバ変数のペン色に引数のペン色を設定する。
40~42メソッド名:setShapeColor(形色設定)
引数:Color shapeColor(形色)
メンバ変数の形色に引数の形色を設定する。
44~46メソッド名:setShape(形設定)
引数:int shape(形)
メンバ変数の形に引数の形を設定する。
48~50メソッド名:setShapSize(形サイズ設定)
引数:int shapeSize(形サイズ)
メンバ変数の形サイズに引数の形サイズを設定する。
52~54メソッド名:setPenSize(ペンサイズ設定)
引数:int penSize(ペンサイズ)
メンバ変数のペンサイズに引数のペンサイズを設定する。

行数説明
55~56アノテーション:@Override(インターフェイス抽象メソッドのオーバーライド)
メソッド名:mouseDragged(マウスドラッグ)
引数:MouseEvent e(マウスイベント)
58パネル自身のグラフィック(Graphics)を取得しています。
60グラフィック(Graphics)に、ペン色(penColor)を設定しています。
62fillOval(円を描く)
①引数:e.getX()-penSize/2(X座標:マウスのX座標-ペンサイズ/2)
②引数:e.getY()-penSize/2(Y座標:マウスのY座標-ペンサイズ/2)
③引数:penSize(幅:ペンサイズ)
④引数:penSize(高さ:ペンサイズ)

行数説明
71~72アノテーション:@Override(インターフェイス抽象メソッドのオーバーライド)
メソッド名:mouseClick(マウスクリック)
引数:MouseEvent e(マウスイベント)
74パネル自身のグラフィック(Graphics)を取得しています。
76グラフィック(Graphics)に、ペン形(shapeColor)を設定しています。
77~80形(shape)が円(SHAPE_SQUARE)の場合
fillRect(四角を描く)
①引数:e.getX()-shapeSize/2(X座標:マウスのX座標-形サイズ/2)
②引数:e.getY()-shapeSize/2(Y座標:マウスのY座標-形サイズ/2)
③引数:penSize(幅:ペンサイズ)
④引数:penSize(高さ:ペンサイズ)
81~84形(shape)が円(SHAPE_CIRCLE)の場合
fillOval(円を描く)
①引数:e.getX()-shapeSize/2(X座標:マウスのX座標-形サイズ/2)
②引数:e.getY()-shapeSize/2(Y座標:マウスのY座標-形サイズ/2)
③引数:penSize(幅:ペンサイズ)
④引数:penSize(高さ:ペンサイズ)

ここまでくれば、準備完了です。実際に動かかしてみましょう。

■実行

「設定」メニューから「詳細設定」メニューを選択します。

詳細設定ダイアログを表示します。

ペンの色、形の色、ペンサイズ、形サイズ、自由に変えて描いてみてください。

Javaをペンサイズ:10ピクセルで書きました。独学をペンサイズ:5ピクセルで書きました。

四角と円は形30ピクセルで描画しています。

☆まとめ☆ 今回は、描画について学びました。
描画は、パネル(JPanel)クラスで行います。
マウスのイベントについても学びました。
たくさん、絵を描いて遊んでみてください。

コピーペース用にソースを記載します。

GuiGraphicMouse.java

package app;

import java.awt.Color;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.AdjustmentEvent;
import java.awt.event.AdjustmentListener;

import javax.swing.ButtonGroup;
import javax.swing.JButton;
import javax.swing.JColorChooser;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JRadioButton;
import javax.swing.JScrollBar;

public class GuiGraphicMouse extends JFrame
      implements ActionListener, AdjustmentListener {

  //マウス描画用クラスのインスタンス生成
  PanelMouse panelMouse = new PanelMouse();
  //メニュー
  JMenuBar jmenuBar = new JMenuBar();
  JMenu jmenu = new JMenu("ファイル");
  JMenuItem jmenuClear = new JMenuItem("初期化");
  JMenuItem jmenuClose = new JMenuItem("閉じる");
  JMenuBar jmenuBar2 = new JMenuBar();
  JMenu jmenuSet = new JMenu("設定");
  JMenuItem jmenuDetailSet = new JMenuItem("詳細設定");

  //スクロールバー
  JScrollBar jScrollBarPen = new JScrollBar(JScrollBar.HORIZONTAL,5,10,0,110);
  JScrollBar jScrollBarShape = new JScrollBar(JScrollBar.HORIZONTAL,10,10,0,110);
  //ダイアログ
  JDialog jDialog = new JDialog();
  JButton jButtonClose = new JButton("閉じる");
  JButton jButtonPenColor = new JButton("ペン色");
  JButton jButtonShapeColor = new JButton("形色");
  //ラベル
  JLabel jLabel1 = new JLabel("ペンサイズ:5",JLabel.CENTER);
  JLabel jLabel2 = new JLabel("形サイズ:10",JLabel.CENTER);
  //ラジオボタン
  JRadioButton jRadiobtnSquare = new JRadioButton("形:□",true);
  JRadioButton jRadiobtnCircle = new JRadioButton("形:〇");
  
  @Override
  public void adjustmentValueChanged(AdjustmentEvent e) {
    // TODO 自動生成されたメソッド・スタブ
    if(e.getSource()==jScrollBarPen) {
      jLabel1.setText("ペンサイズ:"+String.valueOf(jScrollBarPen.getValue()));
      //スクロールバーの設定
      panelMouse.setPenSize(jScrollBarPen.getValue());
    }
    else if(e.getSource()==jScrollBarShape) {
      jLabel2.setText("形サイズ:"+String.valueOf(jScrollBarShape.getValue()));
      //スクロールバーの設定
      panelMouse.setShapeSize(jScrollBarShape.getValue());
    }
  }

  @Override
  public void actionPerformed(ActionEvent e) {
    // TODO 自動生成されたメソッド・スタブ
    if(e.getSource()==jmenuClear) {
      panelMouse.clear();
    }
    else if(e.getSource()==jmenuClose) {
      System.exit(0);
    }
    else if(e.getSource()==jmenuDetailSet) {
      jDialog.getContentPane().setLayout(new GridLayout(5,2));
      //ペン色・形色ボタン設定
      jDialog.getContentPane().add(jButtonPenColor);
      jDialog.getContentPane().add(jButtonShapeColor);
      //ペン・形サイズのスクロールバー設定
      jDialog.getContentPane().add(jScrollBarPen);
      jDialog.getContentPane().add(jScrollBarShape);
      jDialog.getContentPane().add(jLabel1);
      jDialog.getContentPane().add(jLabel2);
      //ラジオボタン設定
      ButtonGroup btnGrp = new ButtonGroup();
      btnGrp.add(jRadiobtnSquare);
      btnGrp.add(jRadiobtnCircle);
      jDialog.getContentPane().add(jRadiobtnSquare);
      jDialog.getContentPane().add(jRadiobtnCircle);
      //閉じるボタン設定      
      jDialog.getContentPane().add(jButtonClose);
      
      //アクションリスナー登録
      jButtonClose.addActionListener(this);
      jButtonPenColor.addActionListener(this);
      jButtonShapeColor.addActionListener(this);
      jScrollBarPen.addAdjustmentListener(this);
      jScrollBarShape.addAdjustmentListener(this);
      jRadiobtnSquare.addActionListener(this);
      jRadiobtnCircle.addActionListener(this);
      
      jDialog.setTitle("詳細設定");
      jDialog.setSize(300,200);
      jDialog.setVisible(true);
    }
    else if(e.getSource() == jButtonClose) {
      jDialog.setVisible(false);
    }
    else if(e.getSource() == jButtonPenColor) {
      Color newColor = JColorChooser.showDialog(
          this, "ペン色を選択してください", getForeground());
      panelMouse.setPenColor(newColor);
      jButtonPenColor.setBackground(newColor);
    }
    else if(e.getSource() == jButtonShapeColor) {
      Color newColor = JColorChooser.showDialog(
          this, "形色を選択してください", getForeground());
      panelMouse.setShapeColor(newColor);
      jButtonShapeColor.setBackground(newColor);
    }  
    else if(e.getSource() == jRadiobtnSquare) {
      //ラジオボタンの設定
      panelMouse.setShape(panelMouse.SHAPE_SQUARE);
    }
    else if(e.getSource() == jRadiobtnCircle) {
      //ラジオボタンの設定
      panelMouse.setShape(panelMouse.SHAPE_CIRCLE);        
    }
  }

  public static void main(String[] args) {
    // TODO 自動生成されたメソッド・スタブ
    new GuiGraphicMouse();
  }
  
  GuiGraphicMouse(){
    //メニューの設定
    jmenu.add(jmenuClear);
    jmenu.add(jmenuClose);
    jmenuBar.add(jmenu);
    setJMenuBar(jmenuBar);
    jmenuClear.addActionListener(this);
    jmenuClose.addActionListener(this);
    
    jmenuSet.add(jmenuDetailSet);
    jmenuBar2.add(jmenuSet);
    getJMenuBar().add(jmenuBar2);    
    jmenuDetailSet.addActionListener(this);

    //パネルの配置
    getContentPane().add(panelMouse);
    
    //フレーム自身設定
    setTitle("マウスによる描画");
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setSize(300,300);
    setVisible(true);
  }

}

PanelMouse.java

package app;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;

import javax.swing.JPanel;

public class PanelMouse extends JPanel implements MouseListener, MouseMotionListener {

  public final int SHAPE_CIRCLE = 0;
  public final int SHAPE_SQUARE = 1;
  private Color penColor=Color.black;
  private Color shapeColor=Color.blue;
  private int shape = SHAPE_SQUARE;
  private int penSize = 5;
  private int shapeSize = 10;
  
  //コンストラクタ
  public PanelMouse() {
    // TODO 自動生成されたコンストラクター・スタブ
    addMouseListener(this);
    addMouseMotionListener(this);
    setBackground(Color.WHITE);
  }
  
  //パネルクリア
  public void clear() {
    Graphics g = getGraphics();
    g.setColor(Color.WHITE);
    g.fillRect(0, 0, 300, 300);
  }
  //ペン色の設定
  public void setPenColor(Color penColor) {
    this.penColor=penColor;
  }
  //形色の設定
  public void setShapeColor(Color shapeColor) {
    this.shapeColor=shapeColor;
  }
  //形の設定
  public void setShape(int shape) {
    this.shape = shape;
  }
  //形のサイズ設定
  public void setShapeSize(int shapeSize) {
    this.shapeSize = shapeSize;
  }
  //ペンのサイズ設定
  public void setPenSize(int penSize) {
    this.penSize = penSize;
  }
  @Override
  public void mouseDragged(MouseEvent e) {
    // TODO 自動生成されたメソッド・スタブ
    Graphics g = getGraphics();
    //ペン色の設定
    g.setColor(penColor);
    //マウスの中心にペンの描画
    g.fillOval(e.getX()-penSize/2, e.getY()-penSize/2, penSize, penSize);
  }

  @Override
  public void mouseMoved(MouseEvent e) {
    // TODO 自動生成されたメソッド・スタブ

  }

  @Override
  public void mouseClicked(MouseEvent e) {
    // TODO 自動生成されたメソッド・スタブ
    Graphics g = getGraphics();
    //形色の設定
    g.setColor(shapeColor);
    if(shape == SHAPE_SQUARE) {
      //マウスの中心に四角形の描画
      g.fillRect(e.getX()-shapeSize/2, e.getY()-shapeSize/2, shapeSize, shapeSize);
    }
    else if(shape == SHAPE_CIRCLE){
      //マウスの中心に円の描画
      g.fillOval(e.getX()-shapeSize/2, e.getY()-shapeSize/2, shapeSize, shapeSize);
    }
  }

  @Override
  public void mousePressed(MouseEvent e) {
    // TODO 自動生成されたメソッド・スタブ

  }

  @Override
  public void mouseReleased(MouseEvent e) {
    // TODO 自動生成されたメソッド・スタブ

  }

  @Override
  public void mouseEntered(MouseEvent e) {
    // TODO 自動生成されたメソッド・スタブ

  }

  @Override
  public void mouseExited(MouseEvent e) {
    // TODO 自動生成されたメソッド・スタブ

  }

}

Follow me!