Graphics/2020/ex13 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Graphics/2020/ex13 へ行く。
• Graphics/2020/ex13 の差分を削除

#author("2020-07-09T17:58:54+09:00","default:takataka","takataka")
#author("2020-07-09T17:59:04+09:00","default:takataka","takataka")
*グラフィックス基礎及び実習 2020年度 第13回 [#e9701092]
 
#contents
 
//&color(#ff0000){''工事中''};　


**ex13 課題A [#kadaiA]

//&color(Red){''工事中''};

''提出期限: 0703金 18:30''

*** Step0 準備 [#q674c80a]

Graphics20XYフォルダ／ディレクトリで作業しているひとと，gr2020 プロジェクトで作業してるひと，それぞれでやるべきことが違います．

''Graphics2020フォルダ／ディレクトリで作業してるひとは''

[[DoraPaneSample.class>Graphics:DoraPaneSample.class]]  [[G12DoraSample.class>Graphics:G12DoraSample.class]]

上記リンク先の2つクラスファイルをダウンロードして Graphics2020 に置き，G12DoraSample を実行してみなさい．

''gr2020プロジェクトで作業してるひとは''
[[G12DoraSample.jar>Graphics:G12DoraSample.jar]]

上記 jar ファイルをダウンロードして gr2020/lib に置き，実行してみなさい．
jar ファイルの実行の仕方については，[[Graphics/2020/ex12#kadaiA]] を参考に

***Step1 観察 [#hea170c4]

G12DoraSample の動作をよく観察しよう
+ アプリケーションウィンドウへ／からマウスカーソルが入る／出るとどうなる？
+ より正確には，どの領域へのカーソルの出入りでイベントが起こってそう？
+ 上記の領域内でクリックするとどうなる？
+ クリックする位置によって違いはないだろうか？

&color(blue){&size(8){ これはいったい誰でしょう？ (1) ドラエモン (2) トラえもん (3) ドラ之もん (4) どらえもん (5) どらエモソ};};
***Step2 G12Dora ver.1 [#v122eb43]

G12DoraSample と同じことをするクラス G12Dora を作ろう（ver.1）

まずは，以下をそのまま作って動かしてみよう．
このプログラムは，DoraPaneSample クラスを利用している．
DoraPaneSample クラスは後述のように Pane のサブクラスであり，Label や Button といったオブジェクトと同様のGUIコンポーネントとして扱える．

- Graphics2020フォルダ／ディレクトリで作業してるひとは，いつもの場所に作ればおけ（Step0 でそこに DoraPaneSample.class 置いてるはず）．
- gr2020 プロジェクトで作業してるひとは，以下を src/ に作ってふつうに Run するだけでおけ．lib/G12DoraSample.jar に含まれている DoraSample.class を勝手に使ってくれる．

#pre{{
import javafx.application.Application;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
//import javafx.event.*;

public class G12Dora extends Application {

    @Override
    public void start(Stage pstage) {
        DoraPaneSample dora = new DoraPaneSample();
        Label label = new Label();
        BorderPane root = new BorderPane();
        root.setCenter(dora);
        root.setBottom(label);
        Scene scene = new Scene(root);
        pstage.setScene(scene);
        pstage.setTitle("G12Dora");
        pstage.sizeToScene();
        pstage.show();
    }
    
    public static void main(String[] args) {
	    launch(args);
    }
}
}}

***Step3 G12Dora ver.2 [#j9a257c4]

G12DoraSample と同じことをするクラス G12Dora を作ろう（ver.2）

G12Dora を修正して，G12DoraSample と同じ動作をさせよう．
以下に示す [[DoraPaneSample クラスのAPI仕様>#DoraPaneSample]] を参考にすればよい．
ただし，このAPI仕様に示されたすべての項目を使用すること．

ヒント:
+ イベントハンドラは，dora に対して設定すればよい
+ クリック時のカーソルのXY座標を取得して鼻の領域内かどうか判定すればよいわけだが，その判定は自分でやる必要はない．API仕様を確認しよう
 if (ほげ.onNose(X, Y)) ...
+ プログラム中に "ばいばい" とか自分で書かない．API仕様を確認しよう

***Step4 提出 [#n8b7443a]

提出しよう

完成した G12Dora.java をこの科目の Moodle コース上の当該の場所へ提出してください．このファイルは締切後に半自動的に処理します．コンパイルエラーになる，ファイル名が違う，といったことのないように注意すること．''ファイル名の間違い（大文字小文字も）に注意''．

***DoraPaneSample のAPI仕様 [#DoraPaneSample]
''[[javafx.scene.layout.Pane>https://docs.oracle.com/javase/jp/8/javafx/api/javafx/scene/layout/Pane.html]] のサブクラス''
- ''コンストラクタ'' 
>
:DoraPaneSample()| 「Dora」が描かれた Pane のインスタンスを生成．大きさは300x300．背景は白色．
<
- ''メソッド''  
>
:boolean onNose(double x, double y)| 座標 (x, y) が「Dora」の鼻の領域内（注）だったら true, さもなくば false．
<
- ''フィールド''  
>
:String mEntered| "ぼくどらちゃん"
:String mClicked|"どらやき食べたい"
:String mOnNose|"いたい！いたい！"
:String mExited|"ばいばい"
<

注: DoraPaneSampleでは，鼻の領域は (150, 150) を中心とする半径15の円とその内部．
**ex13 課題B [#kadaiB]

//&color(Red){''工事中''};

%%''提出期限: 0710金 4講時開始後少し経ったら''（正確な時間は近日中にお知らせします）%%~
''提出期限: 0710金 15:50''
→ ''提出期限: 0710金 15:50''


***Step1 Doraを描く [#g9529a1f]

+ 次の内容のソースファイル DoraPane.java を作ろう．
#pre{{
import javafx.scene.layout.*;
import javafx.scene.canvas.*;
import javafx.scene.paint.*;

public class DoraPane extends Pane{

    public DoraPane(){
	Canvas canvas = new Canvas(300, 300);
	this.getChildren().add(canvas);
        this.setStyle("-fx-background-color: white;");
	this.draw(canvas);
    }

    private void draw(Canvas c){
        // 今はまだ空っぽ
    }
}
}}
+ 次の内容のソースファイル G13Dora.java を作ろう．
#pre{{
import javafx.application.Application;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;

public class G13Dora extends Application {
    @Override
    public void start(Stage pstage) {
	DoraPane dora = new DoraPane();
	BorderPane root = new BorderPane();
	root.setCenter(dora);
	Scene scene = new Scene(root);
	pstage.setScene(scene);
	pstage.setTitle("G13Dora");
	pstage.sizeToScene();
	pstage.show();
    }
    public static void main(String[] args) {
	launch(args);
    }
}
}}
+ G13Dora.java をコンパイルして G13Dora を実行しよう．この時点では 300x300 の真っ白なキャンバスが描かれるはずである．
+ draw メソッドの中身を書いて，Doraを描こう．ただし，
-- ソースには，どこがどの部分を描いているのか分かるように，コメントをたくさんつけること．
-- ''Dora は DoraPaneSample のものより簡略化しないこと．頭部は角が丸い矩形として描くこと．''これらの条件を守れば好きにカスタマイズしてよい．口やらひげやら描くとか，妹の方にするとか，[[きれいなジャイアン>https://www.google.co.jp/search?q=%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AA%E3%82%B8%E3%83%A3%E3%82%A4%E3%82%A2%E3%83%B3&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwj9_dugtILcAhWBvrwKHTflDY8QsAQIJg&biw=1595&bih=1755]] にするとか． 
-- ''顔の部品を描く順序に注意しよう．特に，目の部分''
*** Step2 仕上げよう [#v3a4aee7]

+ [[課題AのDoraPaneSampleのAPI>#DoraPaneSample]] を参考に，DoraPane.java に必要なものを追加しよう．onNose メソッドについては，自分の Dora の鼻の位置に合わせるようにしよう．
+ G12Dora で DoraPaneSample を使っているところを DoraPane に変更して，ちゃんと動くことを確認しよう．

***Step3 提出しよう [#n8b7443a]

完成した DoraPane.java （のみ）をこの科目の Moodle コース上の当該の場所へ提出してください．このファイルは締切後に半自動的に処理します．コンパイルエラーになる，ファイル名が違う，といったことのないように注意すること．''ファイル名の間違い（大文字小文字も）に注意''．

*** 悪い教員に唆されて青春の無駄遣いをしてしまったTAのみなさん [#c1a7fce4]

の成果を見ます？

- [[2017年度TAのみなさん>Graphics:G11Dora-ta2017.png]]
- [[2018年度TAのみなさん>Graphics:G12Dora-ta2018.png]]
- 大学院楽しいよ


**ex13 課題S(omake)  [#kadaiS]

//&color(#ff0000){''工事中''};　

期限: 0710金23:59．これはおまけ課題です．やらなくても減点になりません．やったら加点かも


[[DoraFukuSample.jar>Graphics:DoraFukuSample.jar]]

上記リンク先の jar ファイルをダウンロードして，実行してみよう．
これと同じ動作をするプログラムを作ろう．次のように考えたらよい．
+ Shape クラスのサブクラスを使って Dora の図を描くプログラムを作る
+ 右目を表す楕円オブジェクトに対してイベントハンドラを設定する
+ その他の図形オブジェクトに対しても同様にイベントハンドラを設定する