Graphismes avec Java FX

Après avoir vu comment afficher des images existantes dans un composant visuel de type ImageView, nous allons voir comment dessiner dans un composant de type "Canvas". Le terme Canvas fait allusion à la toile des peintres. Sur un "Canvas", sous JavaFX comme dans de nombreux langages de programmation, on peut réaliser une grande variété de tracés.

Par la même occasion nous allons voir comment créer une animation. Le programme que nous allons écrire sera un chronomètre simple.

Mise en place

Créer un nouveau projet JavaFX / FXML appelé chronometre ( voir procédure ici).

Ouvrir le fichier EchantillonController de ce projet (ou SampleController). Dans la classe EchantillonController, ajouter la ligne

@FXML Canvas fond; 

afin de déclarer un composant de type Canvas.
Il faudra alors ajouter juste après la ligne package application; les lignes

import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;

soit manuellement soit en utilisant l'assistance d'Eclipse (recommandé).

On ne dessine pas directement dans le Canvas, mais dans un objet de type "GraphicsContext". Il faut donc ajouter, juste après la déclaration du Canvas :

GraphicsContext gc;

et réaliser l'importation correspondante.

Le contenu du fichier EchantillonController est alors :

package application;

import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;

public class EchantillonController {
	
	@FXML Canvas fond; 
	GraphicsContext gc;
}

Ouvrir le fichier Echantillon.fxml (ou Sample.fxml) avec SceneBuilder. Dans la partie "Miscellaneous" (divers) de la "library", choisir un "Canvas" et le faire glisser dans la partie "insert CENTER" du BorderPane.

Dans la partie "Inspector" à droite de la fenêtre, déplier la partie "Code" et compléter la ligne fx:id en choisissant le nom "fond".

Dans la partie "Layout" de l'"Inspector",indiquer la même valeur, par exemple 360, dans les lignes "Width" et "Height", de façon à obtenir un Canvas carré.

Enregistrer (File/Save) les changements sous SceneBuilder, et revenir sous Eclipse. Dans le fichier "Main.java", chercher et enlever l'indication ,400,400 afin que la taille de la fenêtre de l'application s'ajuste au contenu au lieu d'être fixée.

En exécutant le fichier "Main" vous devez maintenant obtenir l'affichage d'une fenêtre carrée