JavaFX - Formes 2D

Dans le chapitre précédent, nous avons vu l'application de base de JavaFX, où nous avons appris à créer une fenêtre vide et à dessiner une ligne sur un plan XY de JavaFX. En plus de la ligne, nous pouvons également dessiner plusieurs autres formes 2D.

Forme 2D

En général, une forme 2D est une figure géométrique qui peut être dessinée sur le plan XY, il s'agit notamment d'une ligne, d'un rectangle, d'un cercle, etc.

En utilisant la bibliothèque JavaFX, vous pouvez dessiner -

• Formes prédéfinies telles que ligne, rectangle, cercle, ellipse, polygone, polyligne, courbe cubique, quadruple courbe, arc.

• Éléments de chemin tels que l'élément de chemin MoveTO, ligne, ligne horizontale, ligne verticale, courbe cubique, courbe quadratique, arc.

• En plus de ceux-ci, vous pouvez également dessiner une forme 2D en analysant le chemin SVG.

Chacune des formes 2D mentionnées ci-dessus est représentée par une classe et toutes ces classes appartiennent au package javafx.scene.shape. La classe nomméeShape est la classe de base de toutes les formes bidimensionnelles de JavaFX.

Créer une forme 2D

Pour créer un graphique, vous devez -

• Instanciez la classe respective de la forme requise.
• Définissez les propriétés de la forme.
• Ajoutez l'objet forme au groupe.

Instanciation de la classe respective

Pour créer une forme à 2 dimensions, vous devez tout d'abord instancier sa classe respective.

Par exemple, si vous souhaitez créer une ligne, vous devez instancier la classe nommée Line comme suit -

Line line = new Line();

Définition des propriétés de la forme

Après avoir instancié la classe, vous devez définir les propriétés de la forme à l'aide des méthodes setter.

Par exemple, pour dessiner une ligne, vous devez transmettre ses coordonnées x et y du point de départ et du point final de la ligne. Vous pouvez spécifier ces valeurs en utilisant leurs méthodes de réglage respectives comme suit -

//Setting the Properties of the Line 
line.setStartX(150.0f); 
line.setStartY(140.0f);         
line.setEndX(450.0f); 
line.setEndY(140.0f);

Ajout de l'objet Shape au groupe

Enfin, vous devez ajouter l'objet de la forme au groupe en le passant comme paramètre du constructeur comme indiqué ci-dessous.

//Creating a Group object  
Group root = new Group(line);

Le tableau suivant vous donne la liste des différentes formes (classes) fournies par JavaFX.

S. Non	Forme et description
1	Ligne Une ligne est une structure géométrique joignant deux points. leLine classe du package javafx.scene.shape représente une ligne dans le plan XY.
2	Rectangle En général, un rectangle est un polygone à quatre côtés qui a deux paires de côtés parallèles et simultanés avec tous les angles intérieurs comme angles droits. Dans JavaFX, un Rectangle est représenté par une classe nomméeRectangle. Cette classe appartient au packagejavafx.scene.shape.
3	Rectangle arrondi Dans JavaFX, vous pouvez dessiner un rectangle avec des arêtes vives ou avec des arêtes arquées et celui avec des arêtes arquées est connu comme un rectangle arrondi.
4	Cercle Un cercle est une ligne formant une boucle fermée, chaque point sur lequel est une distance fixe d'un point central. Dans JavaFX, un cercle est représenté par une classe nomméeCircle. Cette classe appartient au packagejavafx.scene.shape.
5	Ellipse Une ellipse est définie par deux points, chacun appelé un focus. Si un point de l'ellipse est pris, la somme des distances aux points AF est constante. La taille de l'ellipse est déterminée par la somme de ces deux distances. Dans JavaFX, une ellipse est représentée par une classe nommée Ellipse. Cette classe appartient au packagejavafx.scene.shape.
6	Polygone Une forme fermée formée par un certain nombre de segments de ligne coplanaires connectés bout à bout. Dans JavaFX, un polygone est représenté par une classe nomméePolygon. Cette classe appartient au packagejavafx.scene.shape.
sept	Polyligne Une polyligne est identique à un polygone sauf qu'une polyligne n'est pas fermée à la fin. Ou, ligne continue composée d'un ou plusieurs segments de ligne. Dans JavaFX, une polyligne est représentée par une classe nomméePolygon. Cette classe appartient au packagejavafx.scene.shape.
8	Courbe cubique Une courbe cubique est une courbe paramétrique de Bézier dans le plan XY est une courbe de degré 3. En JavaFX, une courbe cubique est représentée par une classe nommée CubicCurve. Cette classe appartient au packagejavafx.scene.shape.
9	QuadCurve Une courbe quadratique est une courbe paramétrique de Bézier dans le plan XY est une courbe de degré 2. Dans JavaFX, une QuadCurve est représentée par une classe nommée QuadCurve. Cette classe appartient au packagejavafx.scene.shape.
dix	Arc Un arc fait partie d'une courbe. Dans JavaFX, un arc est représenté par une classe nomméeArc. Cette classe appartient au package -javafx.scene.shape. Types d'arc En plus de cela, nous pouvons dessiner trois types d'arc Open, Chord, Round.
11	SVGPath En JavaFX, nous pouvons construire des images en analysant les chemins SVG. Ces formes sont représentées par la classe nomméeSVGPath. Cette classe appartient au packagejavafx.scene.shape. Cette classe a une propriété nomméecontentde type de données String. Cela représente la chaîne codée SVG Path, à partir de laquelle l'image doit être dessinée.

Dessiner plus de formes via la classe de chemin

Dans la section précédente, nous avons vu comment dessiner des formes simples prédéfinies en instanciant des classes et en définissant des paramètres respectifs.

Mais, seules ces formes prédéfinies ne sont pas suffisantes pour créer des formes plus complexes autres que les primitives fournies par le javafx.shape package.

Par exemple, si vous souhaitez dessiner un élément graphique comme indiqué dans le diagramme suivant, vous ne pouvez pas vous fier à ces formes simples.

La classe de chemin

Pour dessiner de telles structures complexes, JavaFX fournit une classe nommée Path. Cette classe représente le contour géométrique d'une forme.

Il est attaché à une liste observable qui contient divers Path Elements tels que moveTo, LineTo, HlineTo, VlineTo, ArcTo, QuadCurveTo, CubicCurveTo.

Lors de l'instanciation, cette classe construit un chemin basé sur les éléments de chemin donnés.

Vous pouvez passer les éléments path à cette classe tout en l'instanciant comme suit:

Path myshape = new Path(pathElement1, pathElement2, pathElement3);

Ou, vous pouvez obtenir la liste observable et ajouter tous les éléments de chemin en utilisant addAll() méthode comme suit -

Path myshape = new Path(); 
myshape.getElements().addAll(pathElement1, pathElement2, pathElement3);

Vous pouvez également ajouter des éléments individuellement en utilisant la méthode add () comme -

Path myshape = new Path(); 
myshape.getElements().add(pathElement1);

L'élément Move to Path

L'élément Path MoveToest utilisé pour déplacer la position actuelle du chemin vers un point spécifié. Il est généralement utilisé pour définir le point de départ d'une forme dessinée à l'aide des éléments de chemin.

Il est représenté par une classe nommée LineTo du forfait javafx.scene.shape. Il a 2 propriétés du double type de données à savoir -

• X - La coordonnée x du point vers lequel une ligne doit être tracée à partir de la position actuelle.

• Y - La coordonnée y du point vers lequel une ligne doit être tracée à partir de la position actuelle.

Vous pouvez créer un élément de déplacement vers le chemin en instanciant la classe MoveTo et en passant les coordonnées x, y du nouveau point comme suit -

MoveTo moveTo = new MoveTo(x, y);

Si vous ne transmettez aucune valeur au constructeur, le nouveau point sera défini sur (0,0).

Vous pouvez également définir des valeurs sur les coordonnées x, y, en utilisant leurs méthodes de réglage respectives comme suit -

setX(value); 
setY(value);

Exemple - Dessin d'un chemin complexe

Dans cet exemple, nous montrerons comment dessiner la forme suivante en utilisant le Path, MoveTo et Line Des classes.

Enregistrez ce code dans un fichier avec le nom ComplexShape.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.LineTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
         
public class ComplexShape extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Creating a Path 
      Path path = new Path(); 
       
      //Moving to the starting point 
      MoveTo moveTo = new MoveTo(108, 71); 
        
      //Creating 1st line 
      LineTo line1 = new LineTo(321, 161);  
       
      //Creating 2nd line 
      LineTo line2 = new LineTo(126,232);       
       
      //Creating 3rd line 
      LineTo line3 = new LineTo(232,52);  
       
      //Creating 4th line 
      LineTo line4 = new LineTo(269, 250);   
       
      //Creating 4th line 
      LineTo line5 = new LineTo(108, 71);  
       
      //Adding all the elements to the path 
      path.getElements().add(moveTo); 
      path.getElements().addAll(line1, line2, line3, line4, line5);        
         
      //Creating a Group object  
      Group root = new Group(path); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing an arc through a path");
      
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show();         
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compilez et exécutez le fichier java enregistré à partir de l'invite de commande à l'aide des commandes suivantes.

javac ComplexShape.java 
java ComplexShape

Lors de l'exécution, le programme ci-dessus génère une fenêtre JavaFX affichant un arc, qui est dessiné de la position actuelle au point spécifié comme indiqué ci-dessous.

Voici les différents éléments de chemin (classes) fournis par JavaFX. Ces classes existent dans le packagejavafx.shape. Toutes ces classes héritent de la classePathElement.

S. Non	Forme et description
1	LineTo L'élément path lineest utilisé pour tracer une ligne droite vers un point aux coordonnées spécifiées à partir de la position actuelle. Il est représenté par une classe nomméeLineTo. Cette classe appartient au packagejavafx.scene.shape.
2	HlineTo L'élément path HLineToest utilisé pour tracer une ligne horizontale vers un point aux coordonnées spécifiées à partir de la position actuelle. Il est représenté par une classe nomméeHLineTo. Cette classe appartient au packagejavafx.scene.shape.
3	VLineTo L'élément path vertical lineest utilisé pour tracer une ligne verticale vers un point aux coordonnées spécifiées à partir de la position actuelle. Il est représenté par une classe nomméeVLineTo. Cette classe appartient au packagejavafx.scene.shape.
4	QuadCurveTo La courbe quadratique de l'élément de chemin est utilisée pour dessiner quadratic curveà un point aux coordonnées spécifiées à partir de la position actuelle. Il est représenté par une classe nomméeQuadraticCurveTo. Cette classe appartient au packagejavafx.scene.shape.
5	CubicCurveTo L'élément path cubic curveest utilisé pour dessiner une courbe cubique vers un point dans les coordonnées spécifiées à partir de la position actuelle. Il est représenté par une classe nomméeCubicCurveTo. Cette classe appartient au packagejavafx.scene.shape.
6	ArcTo L'élément path Arcest utilisé pour dessiner un arc vers un point aux coordonnées spécifiées à partir de la position actuelle. Il est représenté par une classe nomméeArcTo. Cette classe appartient au packagejavafx.scene.shape.

Propriétés des objets 2D

Pour tous les objets bidimensionnels, vous pouvez définir diverses propriétés telles que le remplissage, le trait, le StrokeType, etc. La section suivante traite de diverses propriétés des objets 2D.

• Type de course
• Largeur du trait
• Remplissage de trait
• Stroke
• Ligne de course
• Limite d'onglet de course
• Casquette Stroke Line
• Smooth

Opérations sur des objets 2D

Si nous ajoutons plusieurs formes à un groupe, la première forme est chevauchée par la seconde comme indiqué ci-dessous.

En plus des transformations (faire pivoter, redimensionner, traduire, etc.), des transitions (animations), vous pouvez également effectuer trois opérations sur des objets 2D à savoir - Union, Subtraction et Intersection.

S. Non	Description d'opération
1	Opération syndicale Cette opération prend deux formes ou plus comme entrées et renvoie la zone qu'elles occupent.
2	Opération d'intersection Cette opération prend deux formes ou plus comme entrées et renvoie la zone d'intersection entre elles.
3	Opération de soustraction Cette opération prend deux formes ou plus en entrée. Ensuite, il renvoie la zone de la première forme en excluant la zone chevauchée par la seconde.