如何裁剪 javafx 边框窗格并调整其大小

Question

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

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

但图像会扩展到中心边界之外并隐藏右按钮。

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

任何帮助将不胜感激。

提前感谢，如果很简单，我们深表歉意。

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

您不指定要执行的操作。为什么要剪辑内容？你描述它的方式只是你想要的一些背景被剪掉了。您可以使用各种机制来做到这一点，例如.css。

或者，您可以使用适当的父级，例如 ScrollPane 来限制区域，或者例如 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);
        }
    }
}