プログラミング演習３ 第３回　ミニプロジェクト

ミニプロジェクトについて １週目では丸や三角形などの形状を用いて継承の復習、２週目ではボタンなどのレイアウトや図形の描画などGUIの復習をしました ミニプロジェクトでは、これら２つを組み合わせておえかきツールを作ってみましょう

完成図の例 図形選択パネル メニュー 描画パネル ボタンを選択 -> 選択された図形の描画準備 ボタンを選択 -> 選択された図形の描画準備 描画パネルをクリック -> 選択された図形をクリックされた 座標に描画

ミニプロジェクトの流れ 基本図形クラスの設計 お絵かきツールの作成 複合図形クラスの設計 発展

基本図形クラスの設計

描画クラスの定義 基本的(primitive)な図形と複合的(compound)な図形を分けて考える 描画に必要なメソッドを考え、インターフェースにまとめる 基本的 複合的 必要なこと （メソッド） 実現したいこと （機能）

基本的な図形クラスの設計 Interface Drawable 全ての基本図形がDrawable のメソッドを使える BigSquare BigRectangle SmallRectangle BigIsoscelesTriangle SmallIsoscelesTriangle BigCircle SmallCircle ? IsoscelesTriangle Circle Rectangle Shape Polygon SmallSquare Square Interface Drawable void draw(int x, int y, Graphics g) void setColor(Color c) ・・・ 全ての基本図形がDrawable のメソッドを使える

描画に必要なメソッド 塗りつぶさずに描画 -> draw(int x, int y, Graphics g) 塗りつぶして描画 -> drawfill(int x, int y, Graphics g) 色の設定と取得 -> setColor(Color c), getColor() 塗りつぶすか選択 -> setFilled(Boolean b), getFilled() ボタンに画像を貼る -> getImage() : draw(…), drawfill(…) を場合分け 画像サイズを決定する -> getWidth(), getHeight() drawable[2] = new BigCircle(); drawable[3] = new BigCircle(); drawable[3].setColor(Color.BLUE); drawable[3].setFilled(true); ・・・

BigCircle クラスの実装例 (1/3) (Shape クラス) protected 修飾子はサブクラスのみがアクセス範囲

BigCircle クラスの実装例 (2/3) (Circle クラス)

BigCircle クラスの実装例 (3/3)

お絵かきツールの作成

メニューの作り方 メニューを作るにはJMenuBar,Jmenu,JMenuItemを用いる JMenuBar L JMenu L JMenuItem の構造になっていて、JMenuItemをクリックした時にイベントを発生させたい場合はJButtonと同様にActionListenerに登録し、actionPerformedメソッド内に処理を書く 表示する文字列やショートカットキーの設定 終了を押した時の処理

描画パネルと図形選択パネルの配置 JPanelを継承したクラスを作り、実行クラス内で呼び出す class MainFrame extends JFrame{ ChoosePanel cp; DrawPanel dp; class ChoosePanel extends JPanel{ } class DrawPanel extends JPanel{

ボタンの作成 イベントを発生させたいコンポーネントに リスナー(ボタンの場合はActionListener)を指定 イベントを発生した時に行う処理を書く ボタンによって処理を変えたい場合はgetSourceやgetActionCommandで場合分け

ボタンに貼る画像の作り方 まず図形クラスで、図形の大きさに合ったBufferedImageを作成しdrawメソッドで描いたものをImageとして返す

ボタンに画像を貼る方法 getImageメソッドで生成した画像は図形によって大きさが異なるので、一定の大きさに縮小してからボタンに貼り付ける

パネルへの配置例 ： private Drawable[] drawable; private Jlabel[] l; private Jbutton[] b; setLayout(new GridLayout(2, 2)); drawable[0] = new BigCircle(); drawable[1] = new SmallIsoscelesTriangle(); for(int i=0; i<drawable.length(); i++) { l[i] = new JLabel(drawable[i].toString(), SwingConstants.CENTER); add(l[i]); img = drawable[i].getImage(); newimg = img.getScaledInstance(imagesize, imagesize, java.awt.Image.SCALE_SMOOTH); b[i] = new JButton(new ImageIcon(newimg)); b[i].addActionListener(this); add(b[i]); } 縦2，横2で配置 レイアウトマネージャーを無効にして絶対座標で指定する方法もあります　http://www.javadrive.jp/tutorial/nulllayout/index1.html

Graphicsクラスによる描画 描画はpaintComponentメソッドで行う 描画には以下のようなメソッドが用意されている 文字列の描画 ：drawstring(表示する文字列,x座標,y座標) 線の描画 ：drawLine(始点のx座標,y座標,終点のx座標,y座標) 四角形の描画 ：drawRect(x座標,y座標,横幅,高さ) 丸の描画 ：drawOval(x座標,y座標,横幅,高さ) 多角形の描画 ：drawPolygon(x座標の配列,y座標の配列,頂点数) 塗りつぶす場合はdraw~をfill~に変える

継承を生かした描画 SmallCircleもBigCircleも大きさが異なるだけで描画する方法は同じなのでCircleクラスに処理をまとめることができる Circleクラス SmallCircleクラスとBigCircleクラスにはdrawメソッドが書かれていないので継承元のCircleクラスのdrawメソッドが呼ばれる SmallCircleクラス BigCircleクラス

クリックしたところに描画する mouseClickメソッド内でクリックした座標を取得し、描画を行う ←２回めの課題の 解答例

図形とクリックした場所の保持 private ArrayList<ShapeObject> shapes=new ArrayList<ShapeObject>(); @Override public void paintComponent(Graphics g) { super.paintComponent(g); for (int i = 0; i < shapes.size(); i++) shapes.get(i).pd.draw(shapes.get(i).p.x,shapes.get(i).p.y, g); } public void mouseClicked(MouseEvent e) { Point p = e.getPoint(); shapes.add(new ShapeObject(currentDrawable, p)); repaint(); : private class ShapeObject { Drawable d; Point p; public ShapeObject(Drawable d, Point p){ this.pd = pd; this.p = p; repaintメソッドで再描画すると、これまでに描画していたものは消えてしまうので、LinkedHashMapやArrayListを使ってこれまでに描画した図形と描画した座標を保持する ←実装例 追加された形状を全て描画 クリックされたら形状と座標を追加 描画する形状と座標を保つクラス

複合図形クラスの定義

基本図形クラスとの違い 共通なメソッドと特有なメソッドを分け、それぞれのインターフェースにまとめる 複合的 基本的 継承 Drawable CompoundDrawable 共通なメソッドと特有なメソッドを分け、それぞれのインターフェースにまとめる draw(int x, int y, Graphics g) drawfill(int x, int y, Graphics g) setColor(Color c) getColor() setFilled(Boolean b) getFilled() getImage() getWidth() getHeight() getParts() setDefaultColor() CompoundDrawable

Treeクラスの指針 課題1で設計したTreeクラスに描画処理を実装する 基本図形と共通のメソッドはP. 9 - 11のBigCircleの実装例を参考する 複合図形はパーツ毎に色が異なるため、drawメソッドではデフォルトカラーを指定するsetDefaultColorメソッドを呼ぶ必要がある drawメソッド drawfillメソッド

発展

複合図形クラスをもっと簡潔に 複合的な図形でも共通の処理を抽象クラスにまとめると便利 継承 継承 他の複合的な形状のクラス スライド7を参考にするとよい

スクロールバーをつける 表示するものが大きすぎてフレームやパネルに収まり切らない場合はスクロールバーをつけると便利です バーを出す条件 ALWAYSに指定したためフレームに収まっていてもスクロールバーが出る AS_NEEDEDと指定し、フレームに収まらなかったためスクロールバーが出た バーを出す条件

ファイルの読込み ファイルを読み込んでキャンバスに張り付けたり、作品を画像ファイルとして保存する ユーザに開くファイルを選んで貰う場合はFileDialogを使う ユーザがファイルを選択した場合、ファイルまでのパスとファイル名を取得できるが、画像として読み込むのか、中のテキストを読み込むのかは自分で実装する必要がある

その他 Ctrl+ZでUndo機能をつける getPartsメソッドを活かした描画の実現 図形を拡大・縮小して描画 描画前にプレビュー 　　　　　　　　　　　　　　　　　　　　　　　　　など

実装の過程 Circleクラスを参考にして四角形や三角形などの基本図形クラスを作る Step1 Circleクラスを参考にして四角形や三角形などの基本図形クラスを作る Step2 お絵かきツールを作成し、メニューバー、描画パネルと図形選択パネルを配置する Step3 図形選択パネルにStep1で作成した図形の画像を貼り付けたボタンを表示する Step4 図形選択パネルのボタンを選んで、描画パネル上でクリックすると、クリックした場所に図形が描画される Step5 複合図形クラスに共通するメソッドをまとめたCompoundDrawableを定義し、Treeクラスを描画する 目標 TreeクラスのようなDrawableを実装するクラスをメンバーに持つ複合図形クラスを３個以上作る 発展1 CompoundFigureクラスを定義し、複合図形クラスに共通する処理をまとめ、Step5で作ったクラスのSuperクラスとする 発展2 おえかきツールにオリジナルの機能を追加する（Undoとかキャプチャとか）