用图像制作按钮

Question

事实上，我设法做到了，但是遇到一个问题，可以在下图中轻松看到：

如您所见，图像“ jugar”和按钮的末尾之间有一个边界。我要做的就是删除它，因此只能看到背景图像和按钮“ jugar”。这是我的代码：

public final class GUI extends Application {


@Override
public void start(final Stage primaryStage) throws InterruptedException, FileNotFoundException {

    primaryStage.setTitle("CARCASSONE");

    StackPane layout = new StackPane();

    ImageView jugar = new ImageView(new Image(new FileInputStream("JUGAR.png")));
    final Button openButton = new Button(null, jugar);
    openButton.;
    layout.getChildren().add(openButton);

    BackgroundImage bI = new BackgroundImage(new Image(new FileInputStream("CARCASSONE.png")), null, null, null, null);
    layout.setBackground(new Background(bI));

    openButton.setOnAction(
        new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent e) {
                jugarPartida(primaryStage);
            }
        });

    Scene inici = new Scene(layout, 610, 900);
    primaryStage.setScene(inici);

    primaryStage.show(); 

}

我必须使用JavaFX，所以不能使用jbutton。

有什么办法解决吗？只想删除那个烦人的边框。

Answer 1

您可以做的是应用CSS将openbutton的颜色设置为rgba（255，255，255，0.00）之类的颜色。您也可以直接在代码中执行此操作。

类似String的样式=“ -fx-background-color：rgba（255，255，255，0.00）;”; openButton.setStyle（style）;

最后的0.0将使其透明。

Answer 2

背景透明的问题是，仍然存在一个不可见的矩形区域，可以响应鼠标单击。

您可以将按钮的region shape及其clip设置为与您的图像范围相匹配的形状，因此按钮实际上不在这些范围之内：

openButton.setStyle("-fx-padding: 0;");

SVGPath shape = new SVGPath();
shape.setContent("M 18 0 "
    + "H 251 C 265 0  277 7  277 25 "
    + "V 52  C 277 69 265 76 251 76 "
    + "H 18  C 12  76 0   69 0   52 "
    + "V 25  C 0   7  12  0  18  0  "
    + "z");
shape.setFill(Color.BLACK);

openButton.setShape(shape);
openButton.setClip(shape);

SVG快速路径教程：

• M表示移动到（从该位置开始绘制）
• H表示将水平线绘制到指定的X位置
• V表示将垂直线绘制到指定的Y位置
• C表示curveto（使用指定的控制点绘制贝塞尔曲线；最后一个坐标对是曲线的最终端点）
• z表示闭合形状