Как центрировать представление изображения на панели привязки?

Я использую построитель сцен для создания своего графического интерфейса, и я отображаю Images, когда пользователи выбирают элементы в списке. Image имеют разные размеры, и когда Image меньше, чем панель, в которой она находится, изображение отображается в верхнем левом углу панели. Как мне сделать так, чтобы ImageView и/или Image отображались в центре Pane?

Я просмотрел API-интерфейсы изображений и изображений javafx, но не нашел много информации о центрировании ImageView в Pane. Я тоже ничего не видел в конструкторе сцен. Обычно в конструкторе сцен, если есть способ центрировать узел, будет опция для центрирования.


java user-interface javafx imageview scenebuilder
person j will    schedule 16.11.2013    source источник

Ответы (3)


arrow_upward
12
arrow_downward

На любой панели теперь можно установить выравнивание изображения в определенной позиции. Для этого вы можете использовать try HBox

когда вы вставляете Image в HBox, сначала он отображается, как показано ниже.

скриншот

теперь установите свойство выравнивания HBox

скриншот

теперь измените выравнивание на центр и посмотрите вывод

скриншот

Я надеюсь, что это работает для вас

Это также возможно сделать программно в Pane через get image

попробуй это

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);
person Anshul Parashar    schedule 16.11.2013
comment
Подходит ли hbox для родителя? - person j will; 16.11.2013
comment
@jwill yes offcouse я редактирую ответ, вы также можете сделать это программно, используя панель ... см. изменения - person Anshul Parashar; 16.11.2013
comment
В вашем примере, как бы вы сохранили изображение по центру, а также изображение в верхней части панели? - person j will; 16.11.2013

arrow_upward
7
arrow_downward

Создайте Group и сцену в методе запуска:

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

Создайте ImageView и установите следующие свойства:

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

Создайте StackPane (по крайней мере, это то, что я использовал) и привяжите свои свойства:

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

Добавьте этот стек в корневой элемент:

root.getChildren().add(stack);

Покажите primaryStage и выполните другой код в вашем методе запуска:

primaryStage.show();
person easyScript    schedule 01.09.2014
comment
github.com/BITPlan/com.bitplan.javafx/blob/master/src/test/java/ имеет этот код, встроенный в TestApplication, чтобы показать эффект - person Wolfgang Fahl; 17.08.2018

arrow_upward
2
arrow_downward

Простой способ сделать небольшие изображения динамически центрированными:

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

введите здесь описание изображения

person c0der    schedule 21.04.2017
comment
вопрос касается AnchorPane. не StackPane! - person hassan moradnezhad; 23.10.2019