How do I center an Image view in an anchor pane?

前端 未结 3 759
天涯浪人
天涯浪人 2021-01-19 04:20

I am using scene builder to create my GUI and I am displaying Images as users select items in a list. The Images are of different sizes and when an

相关标签:
3条回答
  • 2021-01-19 04:50

    In any kind of pane its now possible to set image alignment in specific postion.. for this you can use try HBox

    when you insert an Image into the HBox, initially its shown like below.

    screenshot

    now set the alignment property of the HBox

    screenshot

    now change the alignment to centre and see the output

    screenshot

    I hope its work for you

    Its also possible to do so programmatically in a Pane via get image

    try this

    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);
    
    0 讨论(0)
  • 2021-01-19 04:53

    Create a Group and scene in your start method:

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

    Create an ImageView and set the following properties:

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

    Create a StackPane (at least that is what I used) and bind your properties:

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

    Add this stack to root element:

    root.getChildren().add(stack);
    

    Show primaryStage and execute other code in your start method:

    primaryStage.show();
    
    0 讨论(0)
  • 2021-01-19 04:58

    A simple way to make small images dynamically centered :

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

    0 讨论(0)
提交回复
热议问题