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); 
    } 
}