forme JavaFX redimensionne dynamiquement

Question

je dois avoir un AnchorPane avec une course autour qui redimensionne lorsque la scène est redimensionnée, permettez-moi de mettre des images pour me expliquer mieux:

i est parvenu en à l'aide d'un rectangle avec remplissage couleur blanche et Alpha = 0 (la transparence), ceci est mon fichier FXML:

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.shape.*?> 
<?import java.lang.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.layout.AnchorPane?> 


<AnchorPane prefHeight="671.0" prefWidth="644.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 
    <children> 
    <Rectangle fill="#ffffff00" height="671.0" layoutX="91.0" layoutY="69.0" stroke="RED" strokeType="INSIDE" strokeWidth="10.0" width="644.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> 
</children> 
</AnchorPane> 

quand je fais la scène plus je veux le rectangle pour redimensionner et adapter toujours exactement la taille de la AnchorPane

mais il ne fonctionne pas comme ça, à la place je me retrouve avec ceci:

il existe un moyen de lier la zone du rectangle à la zone du AnchorPane dans lequel le rectangle est ? ou je le fais mal en utilisant une forme pour cela et il y a un moyen plus efficace de réaliser ce dont j'ai besoin?

Une dernière chose! Je dois pouvoir changer la couleur de ce trait autour de l'AnchorPane! Merci beaucoup, si vous avez besoin de plus d'informations sur mon code ou si mon explication est trop mauvaise laissez-moi savoir et je vais améliorer ma question!

Answer 1

Pour obtenir ce que vous voulez que la façon dont vous décrivez le faire, vous pouvez utiliser un controller class et lier la taille du rectangle à la taille de la fenêtre:

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.shape.*?> 
<?import java.lang.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.layout.AnchorPane?> 


<AnchorPane prefHeight="671.0" prefWidth="644.0" fx:controller="com.mycompany.myproject.Controller" fx:id="root" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 
    <children> 
     <Rectangle fx:id="border" fill="#ffffff00" height="671.0" layoutX="91.0" layoutY="69.0" stroke="RED" strokeType="INSIDE" strokeWidth="10.0" width="644.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> 
    </children> 
</AnchorPane> 

puis

package com.mycompany.myproject ; 

import javafx.fxml.FXML ; 
import javafx.scene.shape.Rectangle ; 
import javafx.scene.layout.AnchorPane ; 

public class Controller { 

    @FXML 
    private AnchorPane root ; 
    @FXML 
    private Rectangle border ; 

    public void initialize() { 
     border.widthProperty().bind(root.widthProperty()); 
     border.heightProperty().bind(border.heightProperty()); 
    } 

} 

Vous pouvez changer la couleur du rectangle dans le contrôleur simplement en appelant border.setStroke(...);.

---

L'utilisation d'un Rectangle n'est peut-être pas la meilleure solution. Vous pouvez omettre entièrement le rectangle et utiliser CSS pour styliser le volet d'ancrage lui-même. Le CSS dont vous avez besoin est

-fx-background-color: red, -fx-color ; 
-fx-background-insets: 0, 10 ; 

Vous pouvez définir ce directement sur le volet d'ancrage:

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.shape.*?> 
<?import java.lang.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.layout.AnchorPane?> 


<AnchorPane prefHeight="671.0" prefWidth="644.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" 
    style="-fx-background-color: red, -fx-color ; -fx-background-insets: 0, 10 ;"> 

</AnchorPane> 

mais il est sans doute préférable de le mettre dans une feuille de style externe:

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.shape.*?> 
<?import java.lang.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.layout.AnchorPane?> 


<AnchorPane prefHeight="671.0" prefWidth="644.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 

</AnchorPane> 

et puis dans votre classe principale:

Parent root = FXMLLoader.load(getClass().getResource("path/to/fxml")); 
Scene scene = new Scene(root); 
scene.getStylesheets().add("my-stylesheet.css"); 
// ... 

avec mon-stylesheet.css contenant:

.root { 
    -fx-background-color: red, -fx-color ; 
    -fx-background-insets: 0, 10 ; 
} 

Enfin, si vous utilisez une feuille de style comme celui-ci, vous pouvez changer la couleur de bordure dynamique à l'aide d'un looked-up color.Modifier la feuille de style:

.root { 
    my-border-color: red ; 
    -fx-background-color: my-border-color, -fx-color ; 
    -fx-background-insets: 0, 10 ; 
} 

et vous pouvez changer la frontière à tout moment en appelant

root.setStyle("my-border-color: green;") 

où root est une référence dans le volet d'ancrage.

SSCCE

Voici un exemple complet utilisant la dernière technique:

DynamicBorderColor.fxml:

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.layout.AnchorPane?> 
<?import javafx.scene.control.Button?> 

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller" fx:id="root" minWidth="600" minHeight="600"> 
    <Button text="Change Color" onAction="#changeColor" AnchorPane.topAnchor="20" AnchorPane.leftAnchor="20"/> 
</AnchorPane> 

Controller.java:

import javafx.fxml.FXML; 
import javafx.scene.layout.AnchorPane; 

public class Controller { 

    private int colorIndex ; 
    private String[] colors = {"red", "orange", "yellow", "green", "blue", "indigo", "violet"} ; 

    @FXML 
    private AnchorPane root ; 

    @FXML 
    private void changeColor() { 
     colorIndex = (colorIndex + 1) % colors.length ; 
     root.setStyle("border-color: "+colors[colorIndex]+";"); 
    } 
} 

DynamicBorderColor.java (classe d'application principale):

import java.io.IOException; 

import javafx.application.Application; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class DynamicBorderColor extends Application { 

    @Override 
    public void start(Stage primaryStage) throws IOException { 
     Scene scene = new Scene(FXMLLoader.load(getClass().getResource("DynamicBorderColor.fxml"))); 
     scene.getStylesheets().add("my-stylesheet.css"); 

     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

my-stylesheet.css:

.root { 
    border-color: red ; 
    -fx-background-color: border-color, -fx-base ; 
    -fx-background-insets: 0, 10 ; 
} 

Début:

Redimensionner:

Pr ess touche plusieurs fois: