java - 在 JavaFX 中将节点的形状和大小绑定(bind)到剪切蒙版

Question

是否有一种方便的方法让剪贴蒙版能够绑定(bind)目标节点的任何形状/大小？考虑以下区域节点:

import javafx.application.Application;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class App extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Region content = new Region();
        content.setStyle(
            "-fx-background-color: #444444;" +
            "-fx-background-radius: 50px;" +
            "-fx-max-width: 150px;" +
            "-fx-max-height: 150px;");
        StackPane root = new StackPane(content);
        Scene scene = new Scene(root, 300, 300);
        stage.setScene(scene);
        stage.show();
    }
}

怎样才能拥有一个可以自动调整自身形状和大小的 mask ？

<小时/>

编辑

这就是我实现这个东西的方法，但是它太长而且不方便:

import javafx.application.Application;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Region;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class App extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Region content1 = new Region();
        content1.setStyle(
            "-fx-background-color: teal;" +
            "-fx-background-radius: 50px;" +
            "-fx-pref-width: 150px;" +
            "-fx-pref-height: 150px;" +
            "-fx-translate-x: 30px;" +
            "-fx-translate-y: 30px;");

        Rectangle mask = new Rectangle();

        Region content2 = new Region() {{
            // TODO: Implement better clip mask size and shape handling
            mask.widthProperty().bind(widthProperty());
            mask.heightProperty().bind(heightProperty());
            backgroundProperty().addListener(((observable, oldBackground, newBackground) -> {
                for (BackgroundFill backgroundFill : newBackground.getFills()) {
                    double topLeftHRadius = backgroundFill.getRadii().getTopLeftHorizontalRadius();
                    double topLeftVRadius = backgroundFill.getRadii().getTopLeftVerticalRadius();
                    double topRightHRadius = backgroundFill.getRadii().getTopRightHorizontalRadius();
                    double topRightVRadius = backgroundFill.getRadii().getTopRightVerticalRadius();
                    double bottomLeftHRadius = backgroundFill.getRadii().getBottomLeftHorizontalRadius();
                    double bottomLeftVRadius = backgroundFill.getRadii().getBottomLeftVerticalRadius();
                    double bottomRightHRadius = backgroundFill.getRadii().getBottomRightHorizontalRadius();
                    double bottomRightVRadius = backgroundFill.getRadii().getBottomRightVerticalRadius();
                    mask.setArcWidth((topLeftHRadius + topRightHRadius + bottomLeftHRadius + bottomRightHRadius) / 2);
                    mask.setArcHeight((topLeftVRadius + topRightVRadius + bottomLeftVRadius + bottomRightVRadius) / 2);
                }
            }));
            setClip(mask);
            getChildren().add(content1);
        }};
        content2.setStyle(
            "-fx-background-color: cyan;" +
            "-fx-background-radius: 50px;" +
            "-fx-pref-width: 150px;" +
            "-fx-pref-height: 150px;" +
            "-fx-translate-x: 70px;" +
            "-fx-translate-y: 70px;");

        Region root = new Region() {{
            getChildren().add(content2);
        }};

        Scene scene = new Scene(root, 300, 300);

        stage.setScene(scene);
        stage.setResizable(false);
        stage.show();
    }
}

我正在寻找一种方便、更好的方法来做到这一点。另一方面，HTML + CSS overflow属性可以轻松实现这一点:

div {
  position: relative;
  background-color: cyan;
  border-radius: 50px;
  width: 150px;
  height: 150px;
  /* clipping property */
  overflow: hidden;
}

div:before {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  background-color: teal;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

<div></div>

Answer 1

运行代码并尝试操纵窗口的大小。

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.image.ImageView;
    import javafx.scene.layout.StackPane;
    import javafx.scene.shape.Circle;
    import javafx.stage.Stage;

    public class ClipApp extends Application {

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

        @Override
        public void start(Stage stage) throws Exception {
            ImageView imageView = new ImageView("https://hips.hearstapps.com/ghk.h-cdn.co/assets/18/01/2048x1024/landscape-1515004324-boston-terrier.jpg?resize=480:*");
            StackPane stackPane = new StackPane(imageView);
            Scene scene = new Scene(stackPane);
            stage.setScene(scene);
            stage.show();

            Circle circle = new Circle(60);
            circle.centerXProperty().bind(stackPane.widthProperty().divide(2.));
            circle.centerYProperty().bind(stackPane.heightProperty().divide(2.));
            stackPane.setClip(circle);
        }
    }