Question

我刚开始使用JavaFX。我希望在顶部，左侧和右侧有一个带控件的BorderPane，在中心有一个图像。我希望在调整窗口大小时调整中心窗格，但始终能够看到所有左，右和顶部控件。

使用下面的代码，我可以在左侧，顶部和右侧显示一个按钮。我可以在中心显示图像。

但是图像会超出中心范围并隐藏右键。

奇怪的是，如果我在中心窗格的图像视图上设置了一个剪裁矩形（取消注释第67行和第68行），它实际上只绘制了剪切区域，但其余的布局就像是在绘制全貌。也就是说，图像的UNDRAWN部分仍然会遮挡右侧的按钮。

非常感谢任何帮助。

如果这很简单，请提前致谢并道歉。

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class ImageApp extends Application {
    private BorderPane root;
    private Rectangle clipRect;
    private ImageView iv;
    private StackPane leftPane;
    private StackPane rightPane;
    private Button topButton;
    private Button leftButton;
    private Button rightButton;

    @Override
    public void start(Stage primaryStage) {
        root = new BorderPane();
        Scene primaryScene = new Scene(root, 900, 800);
        initializePrimaryStage(primaryStage, primaryScene);
        initializeFrameContent(root, topButton, leftButton);
        initializeContent(root);
        primaryStage.show();
    }

    private void initializeFrameContent(BorderPane root, Button topButton, Button leftButton) {

        topButton = new Button("TOP");
        leftButton = new Button("LEFT");
        rightButton = new Button("RIGHT");

        leftPane = new StackPane(leftButton);
        leftPane.setAlignment(Pos.TOP_LEFT);

        rightPane = new StackPane(rightButton);
        rightPane.setAlignment(Pos.TOP_RIGHT);

        root.setLeft(leftPane);
        root.setTop(topButton);
        root.setRight(rightButton);
    }

    private void initializePrimaryStage(Stage primaryStage, Scene   primaryScene) {
        primaryStage.setTitle("Image Clip Test");
        primaryStage.setScene(primaryScene);
        primaryStage.setWidth(400);
        primaryStage.setHeight(300);
        primaryStage.minWidthProperty().setValue(400);
        primaryStage.minHeightProperty().setValue(300);
    }

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

    }

    private void initializeContent(BorderPane root) {
        Image image = new Image(
                "http://www.ciee.org/study-abroad/images/cities/0020/headers/desktop/big-ben-london-traffic-trafalgar-abroad-studies.jpg"
        );
        iv = new ImageView(image);
        root.setCenter(iv);
        //clipRect = new Rectangle(400,200);
        //root.getCenter().setClip(clipRect);
    }
}

Answer 1

您没有指定您打算做什么。你为什么要剪辑内容？你描述它的方式就是一些被剪裁的背景。你可以用各种机制来做到这一点，例如： G。的CSS。

或者你可以使用合适的父母，e。 G。 a ScrollPane以限制区域或e。 G。一个ImageViewPane以便伸展以适应：

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class ImageApp extends Application {
    private BorderPane root;
    private Rectangle clipRect;
    private ImageView iv;
    private StackPane leftPane;
    private StackPane rightPane;
    private Button topButton;
    private Button leftButton;
    private Button rightButton;

    @Override
    public void start(Stage primaryStage) {
        root = new BorderPane();
        Scene primaryScene = new Scene(root, 900, 800);
        initializePrimaryStage(primaryStage, primaryScene);
        initializeFrameContent(root, topButton, leftButton);
        initializeContent(root);
        primaryStage.show();
    }

    private void initializeFrameContent(BorderPane root, Button topButton, Button leftButton) {

        topButton = new Button("TOP");
        leftButton = new Button("LEFT");
        rightButton = new Button("RIGHT");

        leftPane = new StackPane(leftButton);
        leftPane.setAlignment(Pos.TOP_LEFT);

        rightPane = new StackPane(rightButton);
        rightPane.setAlignment(Pos.TOP_RIGHT);

        root.setLeft(leftPane);
        root.setTop(topButton);
        root.setRight(rightButton);
    }

    private void initializePrimaryStage(Stage primaryStage, Scene   primaryScene) {
        primaryStage.setTitle("Image Clip Test");
        primaryStage.setScene(primaryScene);
        primaryStage.setWidth(400);
        primaryStage.setHeight(300);
        primaryStage.minWidthProperty().setValue(400);
        primaryStage.minHeightProperty().setValue(300);
    }

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

    }

    private void initializeContent(BorderPane root) {

        Image image = new Image(
                "http://www.ciee.org/study-abroad/images/cities/0020/headers/desktop/big-ben-london-traffic-trafalgar-abroad-studies.jpg"
        );
        iv = new ImageView(image);

        // ImageViewPane content = new ImageViewPane( iv);
        ScrollPane content = new ScrollPane( imageView);

        // hide scrollbars
        content.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
        content.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
        content.setPadding(Insets.EMPTY);

        root.setCenter(content);
    }


    // code from here: https://stackoverflow.com/questions/22993550/how-to-resize-an-image-when-resizing-the-window-in-javafx
    class ImageViewPane extends Region {

        private ObjectProperty<ImageView> imageViewProperty = new SimpleObjectProperty<ImageView>();

        public ObjectProperty<ImageView> imageViewProperty() {
            return imageViewProperty;
        }

        public ImageView getImageView() {
            return imageViewProperty.get();
        }

        public void setImageView(ImageView imageView) {
            this.imageViewProperty.set(imageView);
        }

        public ImageViewPane() {
            this(new ImageView());
        }

        @Override
        protected void layoutChildren() {
            ImageView imageView = imageViewProperty.get();
            if (imageView != null) {
                imageView.setFitWidth(getWidth());
                imageView.setFitHeight(getHeight());
                layoutInArea(imageView, 0, 0, getWidth(), getHeight(), 0, HPos.CENTER, VPos.CENTER);
            }
            super.layoutChildren();
        }

        public ImageViewPane(ImageView imageView) {
            imageViewProperty.addListener(new ChangeListener<ImageView>() {

                @Override
                public void changed(ObservableValue<? extends ImageView> arg0, ImageView oldIV, ImageView newIV) {
                    if (oldIV != null) {
                        getChildren().remove(oldIV);
                    }
                    if (newIV != null) {
                        getChildren().add(newIV);
                    }
                }
            });
            this.imageViewProperty.set(imageView);
        }
    }
}

如何剪辑和调整javafx borderpane的大小

1 个答案: