Graphismes avec Java FX

Quelques commandes pour dessiner sur un canevas

Pour pouvoir dessiner sur le canevas il faut adresser les commandes au "contexte graphique" du canevas,, récupéré par la méthode getGraphicsContext2D.

En clair les commandes de dessin doivent être précédées d'une ligne de type :

 
GraphicsContext gc=nom_du_canevas.getGraphicsContext2D();

(voir l'exemple du chronomètre pour plus de détails).

Dans les explications suivants, chaque commande graphique commence par "gc." pour préciser le fait qu'on dessine dans un contexte graphique qu'on a choisi d'appeler gc.

Les coordonnées (x,y) passées en paramètres aux méthodes de dessin sont toujours de type double.

Par défaut l'origine (0,0) est en haut à gauche (mais on peut la positionner ailleurs en utilisant la commande translate comme montré ici )

Formes de base

Les méthodes permettant de tracer les formes de base se partagent en deux catégories : celles qui commencent par "stroke" et celles qui commencent par "fill".

Celles qui commencent par "stroke" permettent de tracer le contour de la forme, celles qui commencent par "fill" en remplissent l'intérieur.

Les formes de base disponibles sont
• la ligne droite
• le rectangle
• le rectangle à coins arrondis
• l'ellipse (ovale)
• l'arc d'ellipse
• la ligne brisée et le polygone

Tracé d'une ligne droite

entre les points (x1,y1) et (x2,y2) , x1,y1,x2,y2 étant de type double

 gc.strokeLine(x1,y1,x2,y2)

Tracé d'un rectangle :

 gc.strokeRect(x,y,l,h)

ou

 gc.fillRect(x,y,l,h)

x et y sont les coordonnées du point supérieur gauche, l est la largeur et h la hauteur. h et l sont de type double.

La méthode

 gc.clearRect(x,y,l,h) 

prend les mêmes paramètres que strokeRect et fillRect. Elle efface le contenu du canevas contenu dans le rectangle défini.

Tracé d'un rectangle à coins arrondis

 
gc.strokeRoundRect(x,y,l,h,lc,lh)

et

 
gc.fillRoundRect(x,y,l,h,lc,lh)

Les paramètres x,y,l,h ont la même signification que dans la méthode strokeRect. Les paramètres lc et lh sont de type double et désignent respectivement la largeur et la hauteur de la ligne courbe utilisée pour fermer les angles.

Tracé d'une ellipse :

 gc.strokeOval(x,y,l,h)

ou

 gc.fillOval(x,y,l,h)

L'ellipse est inscrite ans un rectangle dont x et y sont les coordonnées du point supérieur gauche, l la largeur et h la hauteur. h et l sont de type double.

Tracé d'un arc d'ellipse

 gc.strokeArc(x,y,l,h,depart,angle,fermeture)

ou

 gc.fillArc(x,y,l,h,depart,angle,fermeture)

Les paramètres x,y,l,h décrivent l'ellipse à laquelle appartient l'arc, de la même manière que dans la méthode strokeOval.
L'arc est tracé à partir de la position "depart", avec une amplitude angulaire "angle".
"depart" et "angle" sont de type double, exprimés en degrés, l'origine et le sens positif sont ceux du cercle trigonométrique.
Le paramètre "fermeture" peut prendre l'une des trois valeurs suivantes : ArcType.OPEN (pas de fermeture), ArcType.CHORD (fermeture par une ligne droite), ArcType.ROUND (fermeture passant par le centre de l'ellipse, en "part de tarte")

Exemple : les lignes

gc.fillOval(280, 250, 200, 100);
gc.strokeArc(280, 250, 200, 100, 0, 60, ArcType.OPEN);
gc.strokeArc(280, 250, 200, 100, 70,40 , ArcType.ROUND);
gc.strokeArc(280, 250, 200, 100, 155,50 , ArcType.CHORD);

donnent le résultat suivant :

Tracés d'une ligne brisée et d'un polygone de forme quelconque

gc.strokePolyline(tx,ty,npoints)

permet de tracer une ligne quelconque passant par les points indiqués. les paramètres tx et ty sont des tableaux contenant respectivement, au format double, les abscisses et les ordonnées des points par lesquels doit passer la ligne.
Le paramètre npoints est un entier indiquant le nombre de points utilisés pour tracer la ligne. Ce paramètre doit être inférieur ou égal à la taille des tableaux tx et ty (ou à la taille du plus petit des deux s'il se trouve qu'ils n'ont pas la même)

Exemple :

 	
double[] x={150,180,180,200,250,300,250,200};
double[] y={100,50,100,150,130,170,180,200};
gc.strokePolyline(x,y,8);

donne .

 gc.strokePolygon(tx,ty,npoints)

et

 gc.fillPolygon(tx,ty,npoints)

fonctionnent de manière similaire, mais en fermant la ligne entre le premier et le dernier point, pour obtenir un polygone.

Exemple :

 
double[] x={150,180,180,200,250,300,250,200};
double[] y={100,50,100,150,130,170,180,200};
gc.fillPolygon(x,y,8);
gc.strokePolygon(x,y,8);
gc.setLineWidth(5);
gc.strokePolyline(x,y,5);

donne
Dans cet exemple le polygone est tracé et rempli en utilisant les mêmes tableaux de coordonnées.
Après modification de l'épaisseur de trait, les mêmes tableaux de coordonnées sont également utilisés pour tracer une ligne brisée, mais en n'utilisant qu'une partie des points.