GUI プログラミング第 4 Graph ~ 手書認識と関数グラフ描画 ~ マウスで数式を書いて認識し 関数グラフを描画する < 手書認識とグラフ描画のステップ> ステップ 1_1 フレームの作成 ステップ 1_2 マウスで自由に線を書く ステップ 2-1 手書認識認識結果を標準出力する ステップ 2-2 手書認識認識結果 ( 数式 ) を描画する ステップ 3 認識した数式を元に関数グラフを描画する 発展課題 1 認識結果の第 2 第 3 候補を選べるようにする 発展課題 2 全消去ボタンを作成 -1-
手書認識 グラフ描画 Step1_1 フレームの作成 < 作成手順 > 1.Graph プロジェクトを新規作成パッケージ エクスプローラで右クリック 新規 Java プロジェクトプロジェクト名 Graph 2.recognition パッケージを作成 src フォルダを選択 右クリック 新規 パッケージパッケージ名 recognition 3.graph パッケージを作成 src フォルダを選択 右クリック 新規 パッケージパッケージ名 graph 4.Stroke クラスを作成 recognition パッケージを選択 右クリック 新規 クラスクラス名 Stroke で 完了 5.PaintPanel クラスを作成 JPanel を継承 (extends) MouseListener, MouseMotionListener を実装 (implements) したクラス graph パッケージを選択 右クリック 新規 クラス クラス名 PaintPanel スーパークラスの参照をクリック JPanel とうつと javax.swing の JPanel が出てくるので それを選択して OK インターフェースの追加をクリック MouseListener で出てくるクラスを選択して 追加 MouseMotionListener で出てくるクラスを選択して 追加 OK 完了 ボタンを押下 6.GraphPanel クラスを作成 ステップ 3 で使うクラス graph パッケージを選択 右クリック 新規 クラス クラス名 GraphPanel スーパークラスの参照をクリック JPanel とうつと javax.swing の JPanel が出てくるので それを選択して OK 完了 ボタンを押下 7. フレームを作成後述の <GraphFrame.java の作成手順 > を参照 8. 実行して外観を確認 -2-
<GraphFrame.java の外観 > 今回はパネルや張り付けるコンポーネントの数が多いので あらかじめアウトラインを示しておく アウトラインは パネルやボタン ラベルなどがどのような階層で何につけられているかをツリー構造で見ることができる -3-
<GraphFrame.java の作成手順 > 1. フレームを作成 graph パッケージ選択 右クリック 新規 その他を選択 GUI Forms Swing JFrame を選んで 次へ Class Name は GraphFrame として 完了 2.Jigloo のメッセージが出てきたら OK 3.Look&Feel( プログラムの見た目 ) を設定フレームを選択 右クリック Set Look&Feel Windows を選択 4. レイアウトを設定フレームを選択 右クリック Set Layout BorderLayout を選択 5. フレームのサイズを大きめにするソースの方をみて initgui() の中の下の方にあるサイズ指定部分を編集 setsize(400,300); setsize(600,500); 6. フレームのプレビューに戻り パネルを North に追加上部の Containers 右から 5 番目の JPanel を選び フレームに貼り付ける名前は northpanel Constraints の中の direction に North を選択 7. パネルを South に追加名前は southpanel Constraints の中の direction に South を選択 8. パネルを West に追加名前は westpanel Constraints の中の direction に West を選択 9. パネルを East に追加名前は eastpanel Constraints の中の direction に East を選択 10. SplitPane( 分割されているパネルのようなもの ) を Center に追加上部の Containers 左から 4 番目の JSplitPane を選び フレームに貼り付ける名前は jsplitpane 11. jsplitpane はデフォルトで縦分割なので 横分割にする ボタンが付いて見えるのは気にしなくてよい 下部の GUI Properties タブの中の左側の Properties 一覧から Basic の中の orientation を探し その値としてプルダウンから VERTICAL_SPLIT を選択する 12. 分割位置を設定する Properties 一覧から Expert の中の dividerlocation を探し その値として 200 と入力 13. jsplitpane の top にパネルを追加名前は innerpanel1 Constraints の中の position に top を選択 Layout を Border にする 14. jsplitpane の bottom にパネルを追加名前は innerpanel2 Constraints の中の position に bottom を選択 Layout を Border にする -4-
15. innerpanel1 の East にパネルを追加名前は rightpanel1 Constraints の中の direction に East を選択 Layout の中の vgap を 20 に設定 16. rightpanel1 の横幅を大きくする Properties の Basic の中の preferredsize の幅の数値が 140 前後になるくらい 17. innerpanel2 の East にパネルを追加名前は rightpanel2 Constraints の中の direction に East を選択 Layout の中の vgap を 30 に設定 18. rightpanel2 の横幅を大きくする Properties の Basic の中の preferredsize の幅の数値が 120 前後になるくらい 19. innerpanel2 の North に toppanel の名前でパネルを追加 20. innerpanel2 の South に bottompanel の名前でパネルを追加 21. innerpanel2 の West にラベルを追加 Components から左から 8 番目にある JLabel を選び innerpanel2 内に置く名前は leftlabel Text は y = Constraints の中の direction に West を選択 22. leftlabel のフォントを変更 Properties の Basic の中の font の段の右端をクリック フォントのウィンドウが出てくるのでスタイルを Bold サイズを 20 にする -5-
23. PaintPanel を innerpanel2 の Center に追加 innerpanel2 を選択 ( 下の段のパネル中央をクリック ) 右クリック Add Add Custom Add custom class or layout を選択 PaintPanel と入力して OK 名前を paintpanel とし Constraints の中の direction が Center になっていることを確認して OK 24. rightpanel2 にボタンを 2 つ追加 Components の一番左にある JButton を選んで rightpanel2 に貼り付け 1 つ目 : 名前 recogbutton Text 認識実行 1 つ目 : 名前 erasebutton Text 消去 25. ボタンが押されたときに実行されるメソッドのひな型を作成 recogbutton を選択し Event Name のリスト中の ActionListner を開いて actionperformed を inline に設定する erasebutton にも同じ操作をしておく 26. 消去メソッドをソースで編集 erasebutton = new JButton(); rightpanel2.add(erasebutton); erasebutton.settext("\u6d88\u53bb"); erasebutton.addactionlistener(new ActionListener() { public void actionperformed(actionevent evt) { paintpanel.erase(); } }); 以降はグラフ描画のためのコンポーネントだが まとめてここで作ってしまう 27. rightpanel1 に x 範囲指定のためのコンポーネントを配置 JTextField 名前 xminfield Text -10 JLabel 名前 xrangelabel Text x JTextField 名前 xmaxfield Text 10 28. rightpanel1 に y 範囲指定のためのコンポーネントを配置 JTextField 名前 yminfield Text -10 JLabel 名前 yrangelabel Text y JTextField 名前 ymaxfield Text 10 29. rightpanel1 にグラフ描画ボタンを追加 Components の一番左にある JButton を選んで rightpanel1 に貼り付け名前 graphbutton Text グラフ描画 30. ボタンが押されたときに実行されるメソッドのひな型を作成 graphbutton を選択し Event Name のリスト中の ActionListner を開いて actionperformed を handler method に設定する 31. GraphPanel を innerpanel1 の Center に追加 innerpanel1 を選択 ( 上の段のパネル中央をクリック ) 右クリック Add Add Custom Add custom class or layout を選択 GraphPanel と入力して OK 名前を graphpanel とし Constraints の中の direction が Center になっていることを確認して OK ここまでできたら 実行して外観を確認する -6-