Graphics/2021/ex12

グラフィックス基礎及び実習 2021年度 第12回 実習と宿題 †[edit]

実習課題A 締切: 当日13:30 †[edit]

以下のことをやって，作ったソースファイルを moodle の該当の場所へ提出してください． ファイル名の間違いに注意

1. 講義資料/授業動画の説明にしたがって，MouseEventSample.java （改造版）をつくる
2. それをコピーして MouseEvent.java というソースファイルをつくる（クラス名 MouseEvent）
3. ウィンドウタイトルを MouseEvent に修正
4. lab1の領域でマウスカーソルがドラッグ（ボタンを押したまま移動）されたら，lab2 に自分の学籍番号と氏名をつなげた文字列を表示するように修正
   • 字が途切れるのが気になるひとは，lab1の表示幅を広げる設定をしてもよい
5. コンパイル＆実行して動作確認する
6. MouseEvent.java を提出する

実習課題B 締切: 当日16:00 †[edit]

以下のことをやって，作ったソースファイルを moodle の該当の場所へ提出してください． ファイル名の間違いに注意．

Step1 †[edit]

Graphics チームから以下の２つのクラスファイルをダウンロードして，自分の Graphics20XY フォルダに置く．ファイルの配布場所については，Graphics チームの「ch05. 全般的な質問用」チャネルの「実習用のファイル等の配布場所」という記事を参照してください．

• DoraPaneSample.class
• G12DoraSample.class

Step2 †[edit]

G12DoraSample を実行して動作をよく観察しよう

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

これはいったい誰でしょう？ (1) ドラエモン (2) トラえもん (3) ドラ之もん (4) どらえもん (5) どらエモソ

Step3 †[edit]

G12DoraSample の一部機能を実現したクラス G12Dora を作ろう

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

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);
    }
}

Step4 †[edit]

G12Dora を修正して，G12DoraSample と同じ動作をさせようDoraPaneSample クラスはそのまま使ったらよいです．このクラスと同じものを自分で作るのは，次回の課題です．

以下に示す DoraPaneSample クラスのAPI仕様 を参考にしよう． ただし，このAPI仕様に示されたすべての項目を使用すること．

ヒント:

1. イベントハンドラは，dora に対して設定すればよい
2. クリック時のカーソルのXY座標を取得して鼻の領域内かどうか判定すればよいわけだが，その判定は自分でやる必要はない．API仕様を確認しよう

   if (ほげ.onNose(X, Y)) ...  // ↓の例のように true や false と比較する条件式を書いてたら減点します （正しく動作するけど冗長で，
                                              // onNose の戻り値の型や boolean 型について理解が十分でない可能性が高いので）．
                                             // 減点となる例:  if (true == ほげ.onNose(X, Y))

3. プログラム中に "ばいばい" とか自分で書かない．API仕様を確認しよう

   注: API仕様によると，これらのメッセージを表すクラス変数は公開されており，かつ値を変更することが可能なので，G12Dora で自分の好みの文字列を代入して遊べます．ただ，それだとチェックが大変なので，この課題では変更しないでね．

Step5 †[edit]

提出しよう

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

DoraPaneSample のAPI仕様 †[edit]

javafx.scene.layout.Pane のサブクラス

• コンストラクタ

  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の円とその内部．

宿題 †[edit]

次回授業までに必ずやっておくこと

次回の授業の資料（PDFや動画）等は こちら からどうぞ．

1. 講義資料を入手．紙でほしい方は各自で印刷してください．

   キャンパス内各所に設置されたプリンタで印刷することもできます．くわしくは「ポータル > 情報環境 > マニュアル > 印刷利用マニュアル」参照．

2. 授業動画を視聴する

   学内の実習室等に設置の PC ではスピーカから音が出ませんので，イヤフォン/ヘッドフォンを用意する必要あり

3. 講義資料・授業動画に出てくるプログラムを実際に作って実行してみる

実習課題S(omake) 締切: 次回実習時間終了時 †[edit]

これはおまけ課題です．やらなくても減点になりません．やったら加点かも

（moodle の「おまけ課題」のところに，「自由課題」というのを書いときました．よかったら見てね）

DoraFukuSample.jar をダウンロードして実行してみよう（Graphicsチームの方にも置いてあります）． これと同じ動作をするプログラムを作ろう．次のように考えたらよい．

1. Shape クラスのサブクラスを使って Dora の図を描くプログラムを作る
2. 右目を表す楕円オブジェクトに対してイベントハンドラを設定する
3. その他の図形オブジェクトに対しても同様にイベントハンドラを設定する

コメントを付けて，どの部分が何を描いてるかよく分かるようにしてね．