具有不同角的 JavaFX 图像

Question

正如此线程中所回答的，可以对 ImageView 进行裁剪以实现圆角（无法使用 CSS 实现 imageView 的圆角）。然而，我试图有不同的角半径，非常像这段 CSS 所描述的那样：

.background {
    -fx-background-radius: 64 0 16 0;
}

我希望图像看起来像（图像=黑色区域）：

我目前面临的问题是，例如，无法imageViews使用 a进行剪辑。VBox不过，我可以imageView用Rectangle剪辑，但这又不能让我有可能拥有不同的角半径。

我怎样才能达到与上面的CSS代码相同的效果（当然不适用于imageView）并且让图像具有不同的角？

Answer 1

使用路径剪辑 ImageView

在这种方法中， anImageView 被 a 剪裁Path。该路径将适应传递给getClipmethod 的每个 imageView 的 FitWidth 和 FitHeight 值。传递的第二个和第三个参数是根据 Fitheight 计算顶部和底部圆角半径的值。

getClip方法将绘制如下路径：

这是一个单类 javafx 应用程序，您可以尝试

应用程序.java

public class App extends Application {

    @Override
    public void start(Stage stage) {

        ImageView imageView = new ImageView("https://ioppublishing.org/wp-content/uploads/2017/03/cat-web-cc0.jpg");
        imageView.setFitHeight(300);
        imageView.setFitWidth(300);
        imageView.setClip(getClip(imageView, 0.1,0.3));

        ImageView imageView1 = new ImageView("https://ioppublishing.org/wp-content/uploads/2017/03/cat-web-cc0.jpg");
        imageView1.setFitHeight(400);
        imageView1.setFitWidth(400);
        imageView1.setClip(getClip(imageView1, 0.2,0.3));

        VBox vBox = new VBox(imageView, imageView1);
        vBox.setSpacing(20);
        vBox.setPadding(new Insets(20));
        vBox.setAlignment(Pos.CENTER);
        vBox.setFillWidth(true);
        var scene = new Scene(new StackPane(vBox), 1024, 800);

        stage.setScene(scene);
        stage.setTitle("clipping with path");
        stage.show();

    }

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

    private Node getClip(ImageView imageView, double radiusTop,double radiusBot) {
        Path clip;

        double height = imageView.getFitHeight();
        double width = imageView.getFitWidth();
        double radius1 = height * radiusTop;
        double radius2 = height * radiusBot;
        clip = new Path(new MoveTo(0, radius1), new ArcTo(radius1, radius1, 0, radius1, 0, false, true),
                new HLineTo(width),
                new VLineTo(height - radius2),
                new ArcTo(radius2, radius2, 0, width - radius2, height, false, true),
                new HLineTo(0));

        clip.setFill(Color.ALICEBLUE);

        return clip;

    }

}

更新所有角落

应用程序.java

public class App extends Application {

    @Override
    public void start(Stage stage) {

        ImageView imageView = new ImageView("https://ioppublishing.org/wp-content/uploads/2017/03/cat-web-cc0.jpg");
        imageView.setFitHeight(300);
        imageView.setFitWidth(300);
        imageView.setClip(getClip(imageView, 0.3, 0.1, 0.2, 0.1));

        ImageView imageView1 = new ImageView("https://ioppublishing.org/wp-content/uploads/2017/03/cat-web-cc0.jpg");
        imageView1.setFitHeight(400);
        imageView1.setFitWidth(400);
        imageView1.setClip(getClip(imageView1, 0.3, 0.2, 0.1, 0.2));

        VBox vBox = new VBox(imageView, imageView1);
        vBox.setSpacing(20);
        vBox.setPadding(new Insets(20));
        vBox.setAlignment(Pos.CENTER);
        vBox.setFillWidth(true);
        var scene = new Scene(new StackPane(vBox), 1024, 800);

        stage.setScene(scene);
        stage.setTitle("clipping with path");
        stage.show();

    }

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

    private Node getClip(ImageView imageView, double topLeft, double topRight, double bottomLeft, double bottomRight) {
        Path clip;

        double height = imageView.getFitHeight();
        double width = imageView.getFitWidth();
        double radius1 = height * topLeft;
        double radius2 = height * topRight;
        double radius3 = height * bottomLeft;
        double radius4 = height * bottomRight;

        clip = new Path(new MoveTo(0, radius1),
                new ArcTo(radius1, radius1, 0, radius1, 0, false, true),
                new HLineTo(width - radius2),
                new ArcTo(radius2, radius2, 0, width, radius2, false, true),
                new VLineTo(height - radius4),
                new ArcTo(radius4, radius4, 0, width - radius4, height, false, true),
                new HLineTo(radius3),
                new ArcTo(radius3, radius3, 0, 0, height - radius3, false, true));

        clip.setFill(Color.ALICEBLUE);

        return clip;

    }

}