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

Presentation on theme: "プログラミング演習３ 第４回　ミニプロジェクト."— Presentation transcript:

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

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

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

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

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

6 複合図形クラスの定義

7 基本図形クラスとの違い 共通なメソッドと特有なメソッドを分け、それぞれのインターフェースにまとめる 複合的 基本的 継承 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

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

9 Tree クラスの実装例 (1/2)

10 Tree クラスの実装例 (2/2)

11 発展

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

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

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

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

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