![[PukiWiki]](image/blackuni3-80x80.png "[PukiWiki]")
#author("2019-07-12T16:07:47+09:00","default:takataka","takataka") #author("2019-07-12T16:08:16+09:00","default:takataka","takataka") *グラフィックス基礎及び実習 2019年度 第13回 [#e9701092] #contents //&color(#ff0000){工事中}; **お知らせ [#notice] &color(red){''次回の実習のページはすでに公開しています''};（[[Graphics/2019/ex14]]）．早めにとりかかることをおすすめします． **課題A(self) 完成目標: 今回の実習終了まで [#kadaiA] 前回講義資料のプログラム ShapeSample.java を作って動作確認しよう． ShapeSample.java は[[こちら>https://gist.github.com/takatakamanbou/20a153ac9a6467270d5e5e0145e41e34]] 動作確認できたら，次のようにいじってみよう．何がどうなっているかよく考えながら実行すること． + 23,24行目の left と right を入れ替えてみよう． -- &color(white,blue){check}; drawRectangles メソッドの中身は一切書き換えてないですね．そのとき，2つの矩形の表示場所は，描画対象の Pane オブジェクトに対して一定ですね． -- &color(white,blue){check}; ということは，Rectangleコンストラクタの引数などで使う座標系は，この Pane オブジェクトの''ローカル座標系''ですね． -- &color(white,blue){check}; 一方，root のローカル座標系で見たら，修正前後で矩形の位置は変化してますね． + 36行目の Rectangle コンストラクタの引数を次のように変えてみよう． Rectangle rect1 = new Rectangle(20, 30, 140, 160); -- &color(white,blue){check}; rect1 と rect2 の重なり方を観察しよう． + 46行目の addAll の引数を次のように変えてみよう． p.getChildren().addAll(rect2, rect1); -- &color(white,blue){check}; rect1 と rect2 の重なり方を観察しよう． + ''46行目を元に戻してから''，49行目の rect2 を rect1 に変えてみよう（50, 51行目のrect2はそのまま） -- &color(white,blue){check}; どこをクリックすると rect2 の色が変わるかよく観察しよう． -- &color(white,blue){check}; rect2 内部はどう？ 結果からすると，rect1 内部でも上に別のオブジェクトが重なってたら「当たり判定」されないようですね． **課題B(self) 完成目標: 今回の実習終了まで [#kadaiB] 講義資料を読み，そこに載っているプログラム CanvasSample.java を作って動作確認しよう． CanvasSample.java は[[こちら>https://gist.github.com/takatakamanbou/70ad58bc2c73a34cba3fbee14fb0a2b9]] 動作確認できたら，次のようにいじってみよう．何がどうなっているかよく考えながら実行すること． + 23-25行目の canvas1, canvas2, canvas3 を適当に入れ替えてみよう． -- &color(white,blue){check}; ShapeSample の場合と同様のことが言えますね．この場合，GraphicsContext の描画メソッドで使う座標系は，GraphicsContext を取得した Canvas オブジェクトのローカル座標系ですね． + 47行目を50行目と51行目の間に移動させてみよう． -- &color(white,blue){check}; 2つの図形の重なり方を観察しよう． + 60行目の setOnMouseDragged を setOnMouseMoved に変えてみよう． -- &color(white,blue){check}; Dragged でも Moved でも，カーソルを速く移動させると●がとびとびに描かれますね． **課題C(TA) 締切: 次回実習開始直後 [#kadaiC] ***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]] にするとか． + G13Dora.java に書き足して，G12Dora のようにイベント処理するものにしよう． *** Step2 仕上げよう [#v3a4aee7] + [[前回課題CのDoraPaneSampleのAPI>Graphics/2019/ex12#DoraPaneSample]] を参考に，DoraPane.java に必要なものを追加しよう．onNose メソッドについては，自分の Dora の鼻の位置に合わせるようにしよう． + G12Dora で DoraPaneSample を使っているところを DoraPane に変更して，ちゃんと動くことを確認しよう． ***Step3 悪い教員に唆されて青春の無駄遣いをしてしまったTAのみなさん [#c1a7fce4] の成果を見ます？ - [[2017年度TAのみなさん>Graphics:G11Dora-ta2017.png]] - [[2018年度TAのみなさん>Graphics:G12Dora-ta2018.png]] - 大学院楽しいよ **課題S(omake) [#kadaiS] 今回出題のおまけ課題はありません．今までやってないのをどうぞ．[[Graphics/2019/ex12#kadaiS]] ぜひ．
