Сделать кнопку с изображением

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

Проблема с прозрачным фоном состоит в том, что все еще остается невидимая прямоугольная область, которая реагирует на щелчки мыши.

Вы можете установить форму области кнопки и ее клип на форму, которая соответствует границам вашего изображения, поэтому кнопка фактически не существует вне этих границ:

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 означает moveto (начать рисование в этой позиции)
• H означает рисование горизонтальной линии в указанной позиции X
• V означает рисование вертикальной линии в указанной позиции Y
• C означает кривой (нарисовать кривую Безье с использованием заданных контрольных точек; последняя пара координат является конечной конечной точкой кривой)
• z означает закрытие фигуры

Answer 2

Что вы можете сделать, это применить css, чтобы установить цвет открытой кнопки на что-то вроде rgba (255, 255, 255, 0,00). Вы также можете сделать это прямо в коде.

Что-то вроде String style = "-fx-background-color: rgba (255, 255, 255, 0.00);"; openButton.setStyle (стиль);

Последние 0.0 сделают его прозрачным.