FAQ JavaFXConsultez toutes les FAQ

Les formes géométriques sont des classes qui héritent de la classe abstraite javafx.scene.shape.Shape. Ces classes se trouvent pour la plupart dans le package javafx.scene.shape. Elles définissent tout un tas de propriétés communes telles que la couleur de remplissage (fill), plusieurs propriétés ayant trait à leur contour (stroke, strokeWidth, strokeType…), etc. qui permettent de dessiner à l’écran des formes géométriques vectorielles. Une forme géométrique est un nœud graphique comme un autre, on peut donc la déplacer, la manipuler, lui faire subir des effets ou des transformations comme n'importe quel autre nœud SceneGraph.

Vous trouvez des formes prêtes à l'emploi de plusieurs types :

• des formes prédéfinies telles que :
  
  • la ligne (Line) ;
  • la ligne brisée (Polyline) ;
  • les splines quadratiques (QuadCurve) ;
  • les splines cubiques (CubicCurve) ;
  • l'arc (Arc) ;
  • le rectangle (Rectangle) ;
  • le cercle (Circle) ;
  • l'ellipse (Ellipse) ;
  • le polygone (Polygon).
    
• une forme à construire : le chemin (Path) ;
• un interpréteur de forme définie par une chaine de caractères suivant la syntaxe SVG (SVGPath) ;
• un nœud capable d'afficher du texte sur une ou plusieurs lignes (Text).
  

La classe Shape dispose de méthodes statiques qui permettent de faire des opérations arithmétiques sur des formes :

• intersect() - crée une forme contenant les parties communes des deux formes d’entrée ;
• subtract() - crée une forme contenant les parties de la première forme passée en paramètre desquelles ont été retirées les parties de la seconde forme passée en paramètre ;
• union() - crée une forme qui est une union des deux formes d’entrée.
  

final Shape shape = Shape.union(rectangle, circle);

Pour tester si un point donné est inclus dans une forme, il faut invoquer la méthode contains() de la forme en lui donnant le point dont question en paramètre. La méthode retourne la valeur true si le test est valide.

Par exemple :

1
2
3
if (rectangle.contains(10, 10)) { 
   [...] 
}

Pour tester si une boite englobante donnée intersecte une forme, il faut invoquer la méthode intersects() de la forme en lui donnant la boite englobante dont il est question en paramètre. La méthode retourne la valeur true si le test est valide.

Par exemple :

1
2
3
if (rectangle.intersects(10, 10, 100, 75)) { 
   [...] 
}

1
2
final Shape intersect = Shape.intersect(shape1, shape2); 
final boolean collisionDetected  = (intersect.getBoundsInLocal().getWidth() != -1);

1
2
final Shape intersect = Shape.intersect(shape1, shape2); 
final boolean collisionDetected  = !intersect.getBoundsInLocal().isEmpty();

Une peinture est un objet qui hérite de la classe abstraite javafx.scene.paint.Paint et qui permet de spécifier une couleur, un gradient ou une texture sur un remplissage ou une bordure. Les peintures sont définies dans le package javafx.scene.paint :

• Color - une couleur unie opaque, semi-transparente ou transparente. Cette classe définit tout un tas de constantes contenant des couleurs nommées, mais il est également possible de créer ses propres couleurs ;
• ImagePattern - une texture créée à partir d'une image et d'une position. La texture se répète de manière à couvrir toute la surface ;
• LinearGradient - un dégradé entre deux (ou plus) couleurs orienté suivant un axe défini entre deux points ;
• RadialGradient - un dégradé entre deux (ou plus) couleurs orienté le long de rayons qui émanent d'un point central et modifié en fonction d'un point et d'une distance de focus.
  

Pour créer un gradient linéaire, il faut créer une instance de la classe javafx.scene.paint.LinearGradient en lui fournissant comme paramètres les deux points définissant le vecteur du dégradé (axe et direction) ainsi qu'une suite de positions relatives pour chacune des couleurs sur cet axe. Les positions sont de type javafx.scene.paint.Stop.

Par exemple :

1
2
3
4
5
final Rectangle rectangle = new Rectangle(50, 50, 150, 100); 
final LinearGradient gradient = new LinearGradient(0, 50, 0, 150, false, CycleMethod.NO_CYCLE,  
        new Stop(0, Color.CYAN),  
        new Stop(1, Color.ROYALBLUE)); 
rectangle.setFill(gradient);

1
2
3
4
5
final Rectangle rectangle = new Rectangle(50, 50, 150, 100); 
final LinearGradient gradient = new LinearGradient(0, 0, 0, 1, true, CycleMethod.NO_CYCLE,  
        new Stop(0, Color.CYAN),  
        new Stop(1, Color.ROYALBLUE)); 
rectangle.setFill(gradient);

Pour créer un gradient radial, il faut créer une instance de la classe javafx.scene.paint.RadialGradient en lui fournissant comme paramètres un angle et une distance de focus, le centre du dégradé et son rayon ainsi qu'une suite de positions relatives pour chacune des couleurs sur ce rayon. Les positions sont de type javafx.scene.paint.Stop.

Par exemple :

1
2
3
4
5
final Rectangle rectangle = new Rectangle(50, 50, 150, 100); 
final RadialGradient gradient = new RadialGradient(0, 0, 125, 100, 50, false, CycleMethod.NO_CYCLE,  
        new Stop(0, Color.CYAN),  
        new Stop(1, Color.ROYALBLUE)); 
rectangle.setFill(gradient);

1
2
3
4
5
final Rectangle rectangle = new Rectangle(50, 50, 150, 100); 
final RadialGradient gradient = new RadialGradient(0, 0, 0.5, 0.5, 0.5, true, CycleMethod.NO_CYCLE,  
        new Stop(0, Color.CYAN),  
        new Stop(1, Color.ROYALBLUE)); 
rectangle.setFill(gradient);

Pour spécifier la peinture de remplissage d'une forme, il faut modifier la valeur de sa propriété fill et lui donner une nouvelle valeur de peinture.

Par exemple :

rectangle.setFill(Color.RED);

Pour spécifier la peinture de bordure d'une forme, il faut modifier la valeur de sa propriété stroke et lui donner une nouvelle valeur de peinture.

Par exemple :

rectangle.setStroke(Color.BLACK);

Un même rectangle positionné sur des coordonnées entières apparait flou lorsqu'on lui rajoute une bordure… Et pourtant… le contour de vos formes géométriques apparait flou, car… leur affichage est correct !



Prenons un rectangle rempli (fill) avec du rouge que nous positionnons sur des coordonnées entières :

1
2
final Rectangle rectangle = new Rectangle(50, 50, 75, 50); 
rectangle.setFill(Color.RED);

rectangle.setStroke(Color.BLACK);

Il existe plusieurs méthodes pour éviter cet effet de flou lors de l'affichage.

Décalage
La méthode la plus simple consiste à décaler les coordonnées de vos formes géométriques de 0.5 pixel. Le trait occupe désormais un pixel plein sur l’écran et donc JavaFX n'a pas besoin d'essayer d'approximer l'affichage.

Par exemple :

final Rectangle rectangle = new Rectangle(50 + 0.5, 50 + 0.5, 75, 50);

rectangle.setStrokeWidth(2);

rectangle.setStrokeType(StrokeType.INSIDE);

• StrokeType.CENTERED - il s'agit du type par défaut, l’épaisseur du trait est également repartie entre l’extérieur et l’intérieur de la forme.
  
  
• StrokeType.INSIDE - le trait est accolé à la frontière de la forme et déborde à l’intérieur de la forme.
  
  
  
  Ici, la bordure recouvre une partie de la couleur de fond. La figure apparait à l'écran avec la même taille que celle définie dans le code.
• StrokeType.OUTSIDE - le trait est accolé à la frontière de la forme et déborde à extérieur de la forme.
  
  
  
  Ici, la figure apparait légèrement plus grande de 2 pixels sur chaque axe. La couleur de fond n'est pas cachée par la bordure.
  

Pour construire un chemin, il faut créer une instance de la classe javafx.scene.shape.Path et peupler sa liste observable elements d'objets qui héritent de la classe abstraite javafx.scene.shape.PathElement.

• MoveTo - déplace l'origine du trait sur les coordonnées spécifiées pour commencer un nouveau sous-chemin ;
• ClosePath - ferme le sous-chemin actuel en traçant une ligne droite depuis les coordonnées actuelles vers les coordonnées du MoveTo le plus récent ;
• LineTo - trace une ligne droite depuis les coordonnées actuelles vers les coordonnées spécifiées ;
• HLineTo - trace une ligne horizontale depuis les coordonnées actuelles jusqu’à la distance spécifiée ;
• VLineTo - trace une ligne verticale depuis les coordonnées actuelles jusqu’à la distance spécifiée ;
• ArcTo - trace un arc depuis les coordonnées actuelles vers les coordonnées spécifiées avec le rayon spécifié.
• QuadCurveTo - trace une quadratique de Bézier depuis les coordonnées actuelles vers les coordonnées spécifiées avec le point de contrôle spécifié ;
• CubicCurveTo - trace une spline cubique de Bézier depuis les coordonnées actuelles vers les coordonnées spécifiées avec les deux points de contrôle spécifiés.
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class Main extends Application { 
  
    @Override 
    public void start(final Stage primaryStage) { 
        final Path path = new Path(); 
        path.getElements().setAll( 
                new MoveTo(50, 50), 
                new LineTo(100, 50), 
                new LineTo(150, 150), 
                new QuadCurveTo(150, 100, 250, 200), 
                new CubicCurveTo(0, 250, 400, 0, 300, 250)); 
        final Pane root = new Pane(path); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Test de chemin"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}

Pour créer un chemin utilisant la syntaxe SVG, il faut instancier un objet de type javafx.scene.shape.SVGPath et modifier sa propriété content pour lui donner une valeur contenant le descriptif d'un chemin en utilisant la syntaxe SVG.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class Main extends Application { 
  
    @Override 
    public void start(final Stage primaryStage) { 
        final SVGPath svg = new SVGPath(); 
        svg.setContent("m 24.243661,89.88827 c 0,0 117.177699,-66.164991 158.593949,-26.769042 C 224.25387,102.51518 76.266517,119.68777 " 
+ "76.266517,119.68777 L 162.12948,206.56089 250.51783,140.3959 61.114229,180.802 123.74369,259.08882 279.30718,245.95684 212.13203,123.72838 " 
+ "c 0,0 98.48988,-77.276669 58.08378,-91.923881 -40.40611,-14.647212 -81.31728,-35.8604153 -73.74114,12.121831 7.57614,47.982246 -16.16244,83.33758 " 
+ "-37.37564,83.84266"); 
        svg.setFill(null); 
        svg.setStroke(Color.TEAL); 
        final Pane root = new Pane(svg); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Test de chemin SVG"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}

Il existe plusieurs moyens d'afficher du texte, le plus simple est d'utiliser la classe javafx.scene.text.Text, un bloc de texte. Cette classe est un nœud, cet objet peut donc être placé dans une scène et manipulé comme n'importe quel autre nœud.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class Main extends Application { 
  
    @Override 
    public void start(Stage primaryStage) { 
        final Text text = new Text("Salut le monde !"); 
        text.setLayoutX(100); 
        text.setLayoutY(100); 
        text.setFill(Color.BLUE); 
        final Pane root = new Pane(); 
        root.getChildren().setAll(text); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Test sur l'opacité"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}

text.setTextOrigin(VPos.TOP);

final Text text = new Text("Ceci est un texte\nmulti-ligne");

1
2
3
4
final Text text = new Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis a arcu et blandit. " 
+ "Etiam pulvinar gravida mi at feugiat. Donec blandit luctus massa ac blandit. Nulla quis consequat augue. Donec malesuada malesuada " 
+ "mauris, eget euismod mi elementum at."); 
text.setWrappingWidth(200);

Pour spécifier la police de caractères, il est possible de modifier la valeur de la propriété font d'un objet Text en lui donnant une valeur de type javafx.scene.text.Font.

Une police peut être créée directement en initialisant ses différents champs de manière similaire au code suivant :

final Font arial20Font = new Font("Arial", 20);

final Font times30BoldItalicFont = Font.font("Times New Roman", FontWeight.BOLD, FontPosture.ITALIC, 30);

text.setFont(times30BoldItalicFont);

Pour effectuer une découpe, il faut modifier la valeur de la propriété clip d'un nœud et lui donner comme valeur un autre nœud qui servira de forme de découpe.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class D2Clip extends Application { 
  
    @Override 
    public void start(Stage primaryStage) { 
        final Rectangle rectangle = new Rectangle(50, 50, 150, 100); 
        rectangle.setFill(Color.RED); 
        final Circle clip = new Circle(100, 100, 50); 
        rectangle.setClip(clip); 
        final Pane root = new Pane(); 
        root.getChildren().setAll(rectangle); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Test de découpe"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}

Pour faire un masque de transparence, il faut procéder comme pour une découpe. Cependant, ici, la transparence de la couleur de remplissage joue un rôle important : outre la forme de la découpe, la transparence va également indiquer si notre objet est visible ou pas.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class Main extends Application { 
  
    @Override 
    public void start(Stage primaryStage) { 
        final Rectangle rectangle = new Rectangle(50, 50, 150, 100); 
        rectangle.setFill(Color.RED); 
        final Circle clip = new Circle(100, 100, 50); 
        clip.setFill(new LinearGradient(0, 0, 0, 1, true, CycleMethod.NO_CYCLE,  
                new Stop(0, Color.BLACK),  
                new Stop(1, Color.TRANSPARENT))); 
        rectangle.setClip(clip); 
        final Pane root = new Pane(); 
        root.getChildren().setAll(rectangle); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Test de masque"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}