Graphismes avec Java FX

Quelques commandes pour dessiner sur un canevas

Options de peinture (paint)

gc.setStroke(peinture) 

et

gs.setFill(peinture) 

modifient couleur et motif utilisés pour les opérations de tracé (méthodes contenant "stroke" et de remplissage (méthodes contenant "fill".

Le paramètre peinture peut être soit
• une couleur, en utilisant le type Color
• un motif
• un dégradé linéaire ou circulaire

Couleur

Quelques exemples d'utilisation de Color ont été donnés ici , voir aussi ici pour une présentation de toutes les façons possibles de créer une couleur, et de toutes les couleurs prédéfinies
Sous Eclipse, en commençant à taper "gc.setFill(Color. " les suggestions qui apparaissent permettent de se passer d'autre documentation!

Motif

Une image chargée à partir d'un fichier peut être utilisée pour peindre ou tracer: : un exemple a été donné ici .
La façon dont l'image utilisée habille le dessin peut être ajustée en utilisant davantage de paramètres.

gc.setFill(new ImagePattern(image,x,y,l,h,proportionnel)); 

Le paramètre "image" est de type Image (voir les exemples ci-dessous, utilisant l'image suivante, dont la taille d'origine est 113 x 113 pixels, issue d'un fichier appelé "arcenciel.jpg") :
Le paramètre "proportionnel" est un booléen et sa valeur conditionne l'interprétation des paramètres x,y,l et h (qui sont de type double).

Si "proportionnel" est vrai (true) la taille de l'image utilisée comme motif est ajustée à la taille de ce qui est dessiné.
Les x,y, l et h doivent être compris entre 0 et 1 inclus. x et y désignent le décalage relatif du motif par-rapport au dessin, et l et h sa taille relative par-rapport au dessin.
Par exemple

Image motif=new Image("images/arcenciel.jpg");
gc.setFill(new ImagePattern(motif,0,0,1,1,true));
gc.fillRect(330,100,150,75);
gc.fillRect(480,175,75,100);
gc.fillRect(350,180,80,40); 

donne le résultat ci-dessous : L'image est ajustée aux dimensions de chacun des rectangles, pour couvrir 100% de leur surface horizontalement et verticalement.

tandis que

Image motif=new Image("images/arcenciel.jpg");
gc.setFill(new ImagePattern(motif,0.2,0,0.6,1,true));
gc.fillRect(330,100,150,75);
gc.fillRect(480,175,75,100);
gc.fillRect(350,180,80,40); 

donne le résultat ci-dessous : L'image est ajustée verticalement comme précédemment, mais horizontalement elle est ajustée pour couvrir 6/10 (l vaut 0.6) de la largeur, et décalée pour commencer à 2/10 (x vaut 0.2) de la largeur)

Si "proportionnel" est faux (false) alors x,y,l et h indiquent les valeurs en pixel des décalages et des dimensions de l'image utilisée comme motif.
Exemple

Image motif=new Image("images/arcenciel.jpg");
gc.setFill(new ImagePattern(motif,0,0,30,20,false));
gc.fillRect(330,100,150,75);
gc.fillRect(480,175,75,100);
gc.fillRect(350,180,80,40); 

donnant La taille du motif est maintenant indépendante de celle de ce qui est dessiné.

Dégradés (gradients)

Les gradients permettent d'obtenir des dégradés entre plusieurs couleurs.

Gradient linéaire

Exemple de construction d'un gradient "linéaire", c'est à dire tel que les couleurs varient dans une seule direction :

 
Stop[] etapes = { new Stop(0, Color.YELLOW), new Stop(0.5, Color.GREEN),new Stop(1,Color.NAVY)};
LinearGradient lg = new LinearGradient(0, 0, 1,0, true, CycleMethod.NO_CYCLE, etapes);

La syntaxe est

LinearGradient(xdebut, ydebut,xfin,yfin, proportionnel, repetition, etapes)

"etapes" est un tableau (plus exactement, une liste) d'éléments de type "Stop", de taille quelconque. Chaque élément de ce tableau est défini par sa position relative le long du gradient et sa couleur.
Dans l'exemple donné, le gradient commence par la couleur jaune (position relative 0), passe par la couleur verte (position relative 0,5) et finit par la couleur bleu foncé (position relative 1).

Le paramètre "repetition" peut prendre les trois valeurs CycleMethod.NO_CYCLE,CycleMethod.REPEAT,CycleMethod.REFLECT, signifiant respectivement que le dégradé n'est parcouru qu'une fois, est parcouru de manière répétée ou bien parcouru alternativement dans un sens et dans l'autre.

Si le paramètre "proportionnel" est vrai, l'étendue du gradient est ajustée en fonction de la forme qu'il recouvre. xdebut,ydebut, xfin et yfin, valant entre 0 et 1, désignent alors la positions relatives du début et de la fin du gradient.
Si "proportionnel" est faux, alors xdebut,ydebut, xfin et yfin sont les coordonnées absolues, en pixels, du début et de la fin du gradient.

Exemple d'utilisation d'un gradient proportionnel

Stop[] etapes = { new Stop(0, Color.YELLOW), new Stop(0.5, Color.GREEN),new Stop(1,Color.NAVY)};
LinearGradient lg = new LinearGradient(0,0,1,0, true, CycleMethod.NO_CYCLE, etapes);
gc.setFill(lg);
gc.fillRect(330,100,150,75);
gc.fillRect(480,175,75,100);
gc.fillRect(350,180,80,40); 

donnant

Exemple d'utilisation d'un gradient non proportionnel

Stop[] etapes = { new Stop(0, Color.YELLOW), new Stop(0.5, Color.GREEN),new Stop(1,Color.NAVY)};
LinearGradient lg = new LinearGradient(330,0,555,0, false, CycleMethod.NO_CYCLE, etapes);
gc.setFill(lg);
gc.fillRect(330,100,150,75);
gc.fillRect(480,175,75,100);
gc.fillRect(350,180,80,40); 

donnant

Gradient radial

Un gradient radial se déploie dans toutes les directions, à l'intérieur d'un cercle.

RadialGradient rg=new RadialGradient(angle,decalage,x, y,rayon,proportionnel,repetition,etapes);

Les paramètres proportionnel, repetition et etapes sont les mêmes que pour le gradient linéaire.

x et y sont les coordonnées du centre du cercle formé par le gradient.
Le point à partir duquel le gradient commence par sa première couleur, est décalé de "decalage" par-rapport au centre, dans la direction donnée par "angle".

Exemple d'utilisation d'un gradient radial

 
Stop[] etapes = { new Stop(0, Color.YELLOW), new Stop(0.5, Color.GREEN),new Stop(1,Color.NAVY)};
RadialGradient rg=new RadialGradient(-45,0.25,0.5, 0.5,0.8,true, CycleMethod.NO_CYCLE,etapes);
gc.setFill(rg);
gc.fillRect(330,100,150,75);
gc.fillRect(480,175,75,100);
gc.fillRect(350,180,80,40);

qui donne