Graphical User Interface 描画する

Size: px

Start display at page:

Download "Graphical User Interface 描画する"

ひとおいなおか
4 years ago
Views:

1 Graphical User Interface 描画するオブジェクト指向プログラミング特論 2016 年度只木進一 : 工学系研究科

2 2 描画の基本 javax.swing.jpanel に描画する paint() または paintcomponent() メソッドを上書きすることによって描画するこの中で描画対象を描く基本的図形要素は準備されているしかし画面の重なりによる再描画の場合最初から書き直すと時間がかかる

3 3 描画の基本 2 ウィンドウの重なりで再描画が必要な場合 repaint() が呼ばれる paint() が呼ばれる再描画に備えて java.awt.image.bufferedimageとしてイメージを生成しておく paint() 内ではimageの描画のみ imageをファイルに保存できる

4 4 shapesample の全体構成 ShapeSampleMain clear draw save ShapeSampleMain clear() initializeimage() drawsamples() repaint() paint() saveimage() BufferedImage 生成背景色で塗りつぶす内容作成描画

5 5 ボタン用 JPanel 描画用 JPanel

6 6 イメージ初期化 BufferedImage のインスタンスを生成する背景で全体を塗りつぶす public void initializeimage() { Dimension dimension = getpreferredsize(); // 空のイメージ生成 image = new BufferedImage(dimension.width, dimension.height, BufferedImage.TYPE_INT_RGB); Graphics2D g = (Graphics2D) image.getgraphics(); g.setcolor(this.getbackground());// 背景色で塗りつぶし g.fillrect(0, 0, dimension.width, dimension.height);

7 7 イメージを作成する public void drawsamples() { initializeimage(); Graphics2D g = (Graphics2D) image.getgraphics(); // 四角形 Rectangle2D.Double rect = new Rectangle2D.Double(50., 50., 100., 100.); g.setcolor(color.green); g.fill(rect); // 楕円 Ellipse2D.Double ellipse = new Ellipse2D.Double(200., 200., 100., 50.); g.setcolor(color.red); g.draw(ellipse); // 直線 g.setcolor(new Color(30, 20, 100)); Line2D.Double line = new Line2D.Double(0., 0., 400., 300.); g.draw(line);

8 8 JPanel にイメージを表示する JPanel を描画 :paint() メソッドここで図を描いていては時間がかかるあらかじめ描いてある image を表示する public void paint(java.awt.graphics g) { if (image == null) {return; // ここでは image を貼り付けるだけ g.drawimage(image, 0, 0, image.getwidth(), image.getheight(), this);

9 9 イメージをファイルに保存する javax.imageio.imageio クラスイメージファイルの操作の関数の集合ファイルからの読み込み BufferdImage read(file file) ファイルへの書き出し write(renderedimage im, String formatname, File output) RenderedImage は BufferedImage が利用しているインターフェース

10 public void saveimage(file file) { if (!filechooser.fileutil.checkwritable(file)) {return; 10 FileOutputStream out = null; try { out = new FileOutputStream(file); catch (FileNotFoundException ex) { filechooser.fileutil.showerror(ex.getmessage()); if (out!= null) { String ext = filechooser.fileutil.getextention(file.getname()); try { javax.imageio.imageio.write(image, ext, out); String message = " イメージを " + file.getname() + " に保存しました "; filechooser.fileutil.showmessage(message); catch (IOException ex) { filechooser.fileutil.showerror(ex.getmessage()); 前回の filechooser.fileutil の応用

11 11 簡単なドローツールマウスで線を描く java.awt.event.mouselistener java.awt.event.mousemotionlistener 線の太さ java.awt.basicstroke 消す背景色で太い線を引く

12 12

13 13 マウスイベントを拾うインターフェイスの実装 java.awt.event.mouselistener java.awt.event.mousemotionlistener 対応するメソッドリスナの設定 addmouselistener(this); addmousemotionlistener(this);

14 14 マウスでの描画の動作マウスボタンを押す mousepressed(mouseevent e) マウスをドラッグする mousedragged(mouseevent e) マウスボタンを離す mousereleased(mouseevent e)

15 15 マウス描画の基本的考え方直前のマウスの位置を変数 point に保存変数 point は java.awt.point のインスタンスマウスドラッグのイベント evt から evt.getx() evt.gety() で座標を取得 Point とマウス位置を結ぶ直線を引くマウス位置を point に保存する

16 16 マウスドラッグ public void mousedragged(mouseevent e) { if (point!= null) { Graphics2D g = (Graphics2D) image.getgraphics(); if (eraser) {// 消しゴムの場合 g.setcolor(this.getbackground()); g.setstroke(eraserstroke); else { g.setcolor(this.getforeground()); g.setstroke(stroke); g.drawline(point.x, point.y, e.getx(), e.gety()); point = new Point(e.getPoint()); repaint();

17 17 マウスボタンを離す public void mousereleased(mouseevent e) { if (point!= null) { Graphics2D g = (Graphics2D) image.getgraphics(); if (eraser) {// 消しゴムの場合 g.setcolor(this.getbackground()); g.setstroke(eraserstroke); else { g.setcolor(this.getforeground()); g.setstroke(stroke); g.drawline(point.x, point.y, e.getx(), e.gety()); point = null; repaint();

18 18 線幅の設定線の設定クラス java.awt.basicstroke 線幅終端処理などを設定する Graphics2D.setStroke() メソッド

19 色の設定 javax.swing.jcolorchooser を使う private void selectcoloractionperformed( java.awt.event.actionevent evt) { java.awt.color newcolor = JColorChooser.

19 19 色の設定 javax.swing.jcolorchooser を使う private void selectcoloractionperformed( java.awt.event.actionevent evt) { java.awt.color newcolor = JColorChooser.showDialog( this, "Choose Foreground Color", getbackground()); drawpanel.setforeground(newcolor);

手書認識グラフ描画 Step2-2 手書認識 : 認識結果を PaintPanel で描画する < 属性付き文字列 AttributedString> 標準出力では分かりにくいうえに認識結果を使えないので認識するごとに PaintPanel に文字を描画することにするここで数式はただの文字列

手書認識グラフ描画 Step2-2 手書認識 : 認識結果を PaintPanel で描画する < 属性付き文字列 AttributedString> 標準出力では分かりにくいうえに認識結果を使えないので認識するごとに PaintPanel に文字を描画することにするここで数式はただの文字列手書認識グラフ描画 Step2-2 手書認識 : 認識結果を PaintPanel で描画する < 属性付き文字列 AttributedString> 標準出力では分かりにくいうえに認識結果を使えないので認識するごとに PaintPanel に文字を描画することにするここで数式はただの文字列ではなく 2 乗などの上付き文字があるこれを描画するのに通常の drawstring を使うと文字の描画位置の取得が大変なので