Canvasによるグラフィック描画 (1/5)
作成:2015-01-17 10:57
更新: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です)
BorderPaneのcenterに<Canvas>タグを配置しただけのシンプルなものです。<Canvas>には、widthとheight属性を用意してあります。これにより、コントロールの大きさが調整されます。
それぞれのコンポーネントには描画処理を管理する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です)
BorderPaneのcenterに<Canvas>タグを配置しただけのシンプルなものです。<Canvas>には、widthとheight属性を用意してあります。これにより、コントロールの大きさが調整されます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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>
※関連コンテンツ