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

На самом деле, мне удалось это сделать, НО я получил проблему, которую легко увидеть на следующем рисунке:

Скриншот

Как видите, между изображением «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.

Есть идеи, чтобы решить это? Просто хочу удалить эту надоедливую границу.

Всего 2 ответа


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

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

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


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

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

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 означает закрыть форму

Есть идеи?

10000