PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

初心者のためのJavaFXプログラミング入門:

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

作成:2015-01-17 10:57
更新:2015-01-17 10:57
■CanvasとGraphicsContext
グラフィックの描画は、AWTでもSwingでも基本的な考え方は同じでしたね。コンポーネントには表示を更新する際に呼び出されるpaintメソッド(あるいはpaintComponent)が用意されており、このメソッドをオーバーライドすれば自動的にそれが呼び出され描画が実行されました。

それぞれのコンポーネントには描画処理を管理するGraphics(あるいはGraphics2D)クラスのインスタンスが組み込まれていて、それがpaintメソッドに引数として渡されます。このGraphicsにある描画用メソッドを呼び出すことで描画が行えました。

が、JavaFXはだいぶ勝手が違います。まず、コントロールには、表示更新時に呼び出されるメソッドなどはありません。――というと、この時点で「えっ? じゃあどうするの?」と頭真っ白になってしまうJavaプログラマも多いかもしれませんね。メソッドがないから、当然Graphicsも渡されません。となると描画の手立てがない……?

いえいえ、それは逆です。つまり、「表示更新の際に呼び出されるメソッドをオーバーライドしないと描画できない」のではなく、「いつでもどこでも、必要なときに描画できるようになった」のです。「このメソッドをオーバーライドして描画処理を書かないとダメ」というしばりがなくなり、どこで描画しても常にそれがコントロールに表示され、勝手に消えたりしなくなっているのです。

グラフィックの描画を行うには、「Canvas」というコントロールが用意されています。AWTにも同名のCanvasクラスがありましたが、あれとは全く別のものです。JavaFX用は、javafx.scene.canvasパッケージに用意されています。

Canvasには、「GraphicsContext」というクラスのインスタンスが組み込まれています。これが、AWT/SwingのGraphicsクラスに相当します。このインスタンスを取得し、そこにあるメソッドを呼び出すことで、Canvasに図形などを描画することができるようになります。

では、実際にやってみましょう。まずはFXMLでCanvasを用意しておきましょう。下のような形でFXMLファイルを用意しました。このFXMLをロードして表示するApplicationクラスは別途用意しておいて下さい。(前回までのものをそのまま使えばOKです)

BorderPanecenter<Canvas>タグを配置しただけのシンプルなものです。<Canvas>には、widthheight属性を用意してあります。これにより、コントロールの大きさが調整されます。



 

※プログラムリストが表示されない場合

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

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.canvas.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.*?>
<BorderPane xmlns="http://javafx.com/javafx" 
    xmlns:fx="http://javafx.com/fxml"
    fx:controller="com.tuyano.libro.AppController">
    <center>
        <Canvas fx:id="canvas" width="300" height="300" />
    </center>
</BorderPane>


 


「初心者のためのJavaFXプログラミング入門」に戻る



※その他のコンテンツ