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

Question

我刚开始使用 JavaFX。我想要一个 BorderPane，控件位于顶部、左侧和右侧，中间有一个图像。我希望中心窗格在您调整 window 大小时调整大小，但始终能够看到所有左侧、右侧和顶部控件。

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

但是图像超出了中心边界并隐藏了右键。

奇怪的是，如果我在中央窗格的图像视图上设置一个裁剪矩形（取消注释第 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.

或者您可以使用合适的父级，例如。 G。 ScrollPane in order to limit the region or e. g. an 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: 
    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 的大小

How to clip and resize javafx borderpane

javafx

clipping

borderpane