Comment centrer une vue Image dans un volet d’ancrage ?

Question

J'utilise Scene Builder pour créer mon interface graphique et j'affiche Images lorsque les utilisateurs sélectionnent des éléments dans une liste.Le Images sont de tailles différentes et lorsqu'un Image qui est plus petite que le volet dans lequel elle se trouve, l'image s'affiche en haut à gauche du volet.Comment puis-je procéder pour obtenir le ImageView et/ou Image à afficher au centre du Pane?

J'ai parcouru les API javafx imageview et image, mais je n'ai pas trouvé grand-chose sur le centrage du ImageViewdans un Pane.Je n'ai rien vu non plus dans le générateur de scènes.Habituellement, dans le générateur de scène, s'il existe un moyen de centrer un nœud, il y aura une option de centrage.

Answer 1

Dans n'importe quel type de volet, il est désormais possible de définir l'alignement de l'image dans une position spécifique.pour cela, vous pouvez utiliser try HBox

lorsque vous insérez un Image dans le HBox, initialement, il est affiché comme ci-dessous.

définissez maintenant la propriété d'alignement du HBox

changez maintenant l'alignement au centre et voyez le résultat

J'espère que ça marche pour toi

Il est également possible de le faire par programmation dans un Pane via obtenir une image

essaye ça

AnchorPane anchorPane = new AnchorPane();
Image img = new Image(getClass().getResourceAsStream("Edit-Male-User-icon.png"));
ImageView imageView = new ImageView(img);
anch.getChildren().add(imageView );
ImageView app = (ImageView) (Node) anchorPane.getChildren().get(0);
app.setX(100);
app.setY(100);

Answer 2

Créer un Group et scène dans votre méthode de démarrage :

Group root = new Group();
Scene scene = new Scene(root, 551, 400, Color.BLACK);
primaryStage.setScene(scene);

Créé un ImageView et définissez les propriétés suivantes :

ImageView imageView = new ImageView();
// set aspect ratio
imageView.setPreserveRatio(true);
// resize based on the scene
imageView.fitWidthProperty().bind(scene.widthProperty());
imageView.fitHeightProperty().bind(scene.heightProperty());

Créer un StackPane (du moins c'est ce que j'ai utilisé) et liez vos propriétés :

StackPane stack = new StackPane();
stack.getChildren().add(imageView);

    stack.translateXProperty()
            .bind(scene.widthProperty().subtract(stack.widthProperty())
                    .divide(2));

    stack.translateYProperty()
            .bind(scene.heightProperty().subtract(stack.heightProperty())
                    .divide(2));

Ajoutez cette pile à l'élément racine :

root.getChildren().add(stack);

Montrer primaryStage et exécutez un autre code dans votre méthode de démarrage :

primaryStage.show();

Answer 3

Un moyen simple de centrer dynamiquement de petites images :

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class CenterInStage extends Application {

    private final String TITLE = "Center in Stage";
    private final double WIDTH = 350;
    private final double HEIGHT = 250;
    private final String IMAGE_PATH =
            "http://icons.iconarchive.com/icons/iconka/meow-2/64/cat-rascal-icon.png";

    @Override
    public void start(Stage primaryStage) {

        primaryStage.setTitle(TITLE);

        Image image = new Image(IMAGE_PATH);
        ImageView imageView = new ImageView(image);
        imageView.setPreserveRatio(true);

        StackPane pane = new StackPane();
        pane.getChildren().add(imageView);
        StackPane.setAlignment(imageView, Pos.CENTER);

        Scene scene = new Scene(pane, WIDTH, HEIGHT);

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

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