JavaFX如何为按钮裁剪图形？实现按钮镂空显示背景图像

我懂你想要的效果——把图片放在底层，按钮作为镂空区域只显示按钮范围内的图片部分，而且要让图片自动适配按钮尺寸，超出的部分直接裁剪掉。你现在的代码只是把ImageView直接设为按钮的graphic，这会让图片按自身尺寸（或ImageView的默认缩放）显示，自然达不到你要的蒙版裁剪效果。

下面给你两种实用的解决方案，根据你的需求选就行：

方法一：用按钮背景实现（最简单直接） #

这种方法直接把图片设为按钮的背景，JavaFX会自动帮你适配按钮尺寸并裁剪超出部分，同时还能保留按钮本身的交互样式（比如点击反馈、hover效果）。

// 加载目标图片
Image image = new Image(Main.class.getResource("/texture.png").toExternalForm());

// 配置背景图片的显示规则：居中、不重复、完全适配按钮尺寸并裁剪
BackgroundImage bgImage = new BackgroundImage(
    image,
    BackgroundRepeat.NO_REPEAT,
    BackgroundRepeat.NO_REPEAT,
    BackgroundPosition.CENTER,
    new BackgroundSize(BackgroundSize.AUTO, BackgroundSize.AUTO, false, false, true, true)
    // 最后两个true表示强制按按钮的宽高缩放图片，超出部分裁剪
);

// 给按钮设置这个背景
yesButton.setBackground(new Background(bgImage));

// 如果你需要按钮文字，直接设置就行，文字会自动叠加在图片上方
yesButton.setText("Confirm");

方法二：用StackPane+裁剪器实现（镂空蒙版场景） #

如果你的需求是按钮本身透明（只保留边框），底层图片只在按钮区域内显示，那可以用StackPane把ImageView和按钮叠加，再给ImageView设置裁剪区域匹配按钮的边界。

Image image = new Image(Main.class.getResource("/texture.png").toExternalForm());
ImageView imageView = new ImageView(image);

// 让ImageView始终填满StackPane的大小，并且不保持图片比例（完全适配）
imageView.fitWidthProperty().bind(stackPane.widthProperty());
imageView.fitHeightProperty().bind(stackPane.heightProperty());
imageView.setPreserveRatio(false);
imageView.setSmooth(true); // 开启平滑缩放，避免锯齿

// 配置按钮样式：透明背景，保留边框（可以根据需求调整）
yesButton.setStyle("-fx-background-color: transparent; -fx-border-color: #333; -fx-border-width: 2px;");
yesButton.setText("Yes");

// 把ImageView和按钮放入StackPane，按钮在上方
stackPane.getChildren().addAll(imageView, yesButton);

// 创建裁剪矩形，绑定按钮的尺寸和位置，让裁剪区域刚好匹配按钮
Rectangle clip = new Rectangle();
clip.widthProperty().bind(yesButton.widthProperty());
clip.heightProperty().bind(yesButton.heightProperty());
clip.layoutXProperty().bind(yesButton.layoutXProperty());
clip.layoutYProperty().bind(yesButton.layoutYProperty());

// 给ImageView设置裁剪器
imageView.setClip(clip);

为什么你原来的代码不行？ #

你之前直接把ImageView设为按钮的graphic，ImageView会以自身的默认尺寸（或你手动设置的尺寸）显示，不会自动适配按钮的大小，也没有裁剪逻辑——相当于把图片放在按钮内部的一个容器里，而不是让按钮作为蒙版去裁剪图片。

内容的提问来源于stack exchange，提问作者VeeAyeInIn