كيف أقوم بتوسيط عرض الصورة في جزء الارتساء؟

Question

أنا أستخدم أداة إنشاء المشهد لإنشاء واجهة المستخدم الرسومية الخاصة بي وأنا أعرضها Imageعندما يقوم المستخدمون بتحديد العناصر في القائمة.ال Imageتكون بأحجام مختلفة ومتى Image أصغر من الجزء الموجود فيه، يتم عرض الصورة في الجزء العلوي الأيسر من الجزء.كيف أذهب للحصول على ImageView و/أو Image ليتم عرضها في وسط Pane?

لقد بحثت في جميع أنحاء javafx imageview وواجهات برمجة التطبيقات للصور ولكني لم أجد الكثير حول توسيط ملف ImageViewفي Pane.لم أر أي شيء في منشئ المشهد أيضًا.عادةً في أداة إنشاء المشهد، إذا كانت هناك طريقة لتوسيط العقدة، فسيكون هناك خيار للتوسيط.

Answer 1

في أي نوع من الأجزاء، أصبح من الممكن الآن ضبط محاذاة الصورة في موضع معين.لهذا يمكنك استخدام المحاولة HBox

عندما تقوم بإدراج Image داخل ال HBox, ، في البداية يظهر كما هو موضح أدناه.

الآن قم بتعيين خاصية المحاذاة لـ HBox

الآن قم بتغيير المحاذاة إلى المركز وشاهد الإخراج

آمل أن يكون العمل بالنسبة لك

من الممكن أيضًا القيام بذلك برمجيًا في ملف Pane عبر الحصول على الصورة

جرب هذا

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

إنشاء 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();

Answer 3

طريقة بسيطة لجعل الصور الصغيرة مركزة ديناميكيًا:

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