Javafx GridPane ColumnConstraints 导致在需要重叠的地方进行剪裁

Question

我正在制作一个带有数字键盘的登录屏幕。我为按钮背景创建了自己的按钮图像。这个按钮图像中有一个阴影，实际上只是一个半透明的深色模糊。我将这些按钮排列在一个 GridPane 中，我在其中使用 ColumnConstraints 将它们打包得比默认情况下阴影的多余空间要小一些。我也以同样的方式使用了 RowConstraints。行似乎按应有的方式组合在一起，但对于列，我注意到每个按钮右侧的阴影都被剪掉了，给了它们一个锋利的边缘。

buttonSize 是一个变量，它是屏幕最短尺寸之间距离的 1/6。我这样做是为了让按钮可以针对不同的屏幕尺寸进行缩放。

ColumnConstraints col0 = new ColumnConstraints(buttonSize * .95);
ColumnConstraints col1 = new ColumnConstraints(buttonSize * .95);
ColumnConstraints col2 = new ColumnConstraints(buttonSize * .95);
numberPad.getColumnConstraints().addAll(col0, col1, col2);

RowConstraints row0 = new RowConstraints(buttonSize * .95);
RowConstraints row1 = new RowConstraints(buttonSize * .95);
RowConstraints row2 = new RowConstraints(buttonSize * .95);
numberPad.getRowConstraints().addAll(row0, row1, row2);

从Stack Overflow的颜色鲜艳的页面可能很难看出，金线上方的数字键盘使用了ColumnConstraints，而金线下方的数字键盘则没有。您可以看到按键右侧的阴影存在于底部数字键盘中，而它被剪裁在顶部数字键盘上。 如何将按钮靠得更近而不剪掉它们的阴影？

如果我的代码的另一部分可能感兴趣，我可以添加任何内容。为了简洁起见，我只保留了简短的内容。

编辑 01：

这是一个函数，我将一个按钮传递给该函数以将其与我的图像一起显示。

private void drawButtonImage(Button button){
        FileInputStream button01FileInputStream = null;
        try{
            button01FileInputStream = new FileInputStream("F:\Programming\Professional\Merchant\Images\Button01.png");

            Image buttonImage = new Image(button01FileInputStream);
            BackgroundImage backgroundImage = new BackgroundImage(
                    buttonImage,
                    BackgroundRepeat.REPEAT,
                    BackgroundRepeat.NO_REPEAT,
                    BackgroundPosition.DEFAULT,
                    new BackgroundSize(buttonSize, buttonSize, false, false, false, false)
            );

            Background background = new Background(backgroundImage);
            button.setBackground(background);

        } catch (FileNotFoundException | NullPointerException e){
            e.printStackTrace();
        } finally {
            if (button01FileInputStream != null){
                try{
                    button01FileInputStream.close();
                } catch (IOException e){
                    e.printStackTrace();
                }
            }
        }
        button.setTextFill(Color.WHITE);
    }

Answer 1

受 Zephyr 建议的启发，我删除了 ColumnConstraints 并将 hgap 设置为 buttonSize * -0.05。按钮图像现在可以按照我的意愿挤在一起，而不会发生剪裁。

Javafx GridPane ColumnConstraints 导致在需要重叠的地方进行剪裁

Javafx GridPane ColumnConstraints causes clipping where overlap desired

image

javafx

transparency

gridpane

编辑 01：