Canvasによるグラフィック描画 (2/5)

では、コントローラークラスに描画のための処理を作成しましょう。下のリスト欄に簡単なサンプルを挙げておきました。これを実行すると、赤い四角い領域の中に青い線で円が描かれます。

Canvasの描画は、「GraphicsContextの取得」「描画の設定」「描画メソッドの呼び出し」という形で行います。それぞれの手順を追って説明しましょう。


・GraphicsContextの取得

変数 =《Canvas》.getGraphicsContext2D();

GraphicsContextの取得は、Canvasインスタンスの「getGraphicsContext2D」メソッドで行います。これでインスタンスが取得できるので、これを変数などに保管しておき利用します。


・色の設定

《GraphicsContext》.setFill(《Color》);
《GraphicsContext》.setStroke(《Color》);

描画を行う際には、あらかじめ描く図形に関する細かな設定を行っておく必要があります。ここでは、「色」に関する設定だけ用意してあります。「setFill」は、塗りつぶしの内容を設定するもので、「setStroke」は線分の描画内容を設定するものです。

いずれも、引数には「Paint」というインスタンスを指定します。これは、描画のやり方を示すのに使われるものです。決まった色で塗りつぶしたい場合は、Paintのサブクラスである「Color」を使うのが一般的です。

Colorには、主な色の値がクラス変数として用意されています。それらを指定することで、簡単に色を設定できます。その他の色は、

new Color( 赤 , 緑 , 青 )

という形でインスタンスを作成することができます。この辺りは、java.awt.Colorとほぼ同じ感覚ですからなんとなくわかるでしょう。


・描画メソッド
後は、描画メソッドを呼び出して描画を行うだけです。今回は、四角形と楕円の描画を行うメソッドを呼び出していますね。以下の文です。

gc.fillRect(50, 50, 150, 150);
gc.strokeOval(100, 100, 50, 50);

GraphicsContextには、この他にも多数の描画メソッドが用意されています。多くの描画メソッドは、「図形の内部を塗りつぶす」「図形の輪郭線を描くという2種類が用意されています。塗りつぶしは「fill○○」、輪郭線の描画は「stroke○○」といった名前になっています。ここでは「四角形（Rect）を塗りつぶす（fill）」「楕円（Oval）の輪郭を描く（stroke）」という２つの描画を行っているので、それぞれ「fillRect」「strokeOval」というメソッドを呼び出していたのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

package com.tuyano.libro;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;


public class AppController implements Initializable {
    @FXML Canvas canvas;
    GraphicsContext gc;
    
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        gc = canvas.getGraphicsContext2D();
        draw();
    }
    
    void draw(){
        gc.setFill(Color.RED);
        gc.setStroke(Color.BLUE);
        gc.fillRect(50, 50, 150, 150);
        gc.strokeOval(100, 100, 50, 50);
    }
}