Wie zentriere ich eine Bildansicht in einem Ankerbereich?

Question

Ich verwende Scene Builder, um meine GUI zu erstellen und sie anzuzeigen Images, wenn Benutzer Elemente in einer Liste auswählen.Der Images sind unterschiedlich groß und wenn ein Image Wenn das Bild kleiner ist als der Bereich, in dem es sich befindet, wird das Bild oben links im Bereich angezeigt.Wie bekomme ich das? ImageView und/oder Image in der Mitte angezeigt werden soll Pane?

Ich habe mir die Imageview- und Image-APIs von javafx angesehen, aber nicht viel zum Zentrieren gefunden ImageViewin einem Pane.Auch im Scene Builder habe ich nichts gesehen.Wenn es im Scene Builder eine Möglichkeit gibt, einen Knoten zu zentrieren, gibt es normalerweise auch eine Option zum Zentrieren.

Answer 1

In jeder Art von Fenster ist es jetzt möglich, die Bildausrichtung in einer bestimmten Position festzulegen.Hierfür können Sie try verwenden HBox

wenn Sie eine einfügen Image in die HBox, zunächst wird es wie unten gezeigt.

Legen Sie nun die Ausrichtungseigenschaft des fest HBox

Ändern Sie nun die Ausrichtung auf „Mitte“ und sehen Sie sich die Ausgabe an

Ich hoffe, es funktioniert für Sie

Es ist auch möglich, dies programmgesteuert in einem zu tun Pane über get image

Versuche dies

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

Ein ... kreieren Group und Szene in Ihrer Startmethode:

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

Erstelle ein ImageView und legen Sie die folgenden Eigenschaften fest:

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

Ein ... kreieren StackPane (zumindest habe ich das verwendet) und binden Sie Ihre Eigenschaften:

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

Fügen Sie diesen Stapel zum Stammelement hinzu:

root.getChildren().add(stack);

Zeigen primaryStage und führen Sie anderen Code in Ihrer Startmethode aus:

primaryStage.show();

Answer 3

Eine einfache Möglichkeit, kleine Bilder dynamisch zentriert zu machen:

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