Блог

Главная - Вопросы по программированию - JavaFX / CSS: «-fx-background-radius: 10;» привинчивает мой фон

JavaFX / CSS: «-fx-background-radius: 10;» привинчивает мой фон

#java #css #javafx #background

#ява #css #javafx #фон #java

Вопрос:

Я динамически создаю несколько VBoxes в своей игре, чтобы показать уменьшенную версию карты. Для этого я устанавливаю в VBoxes фон (фон объекта).

При попытке стилизовать их в CSS это действительно работает должным образом, но при попытке закруглить углы с помощью «-fx-background-radius: 10;» на самом деле фон больше не отображается.

Я думаю, что это как-то связано с тем, как я создаю фон:

 public Background getBackground(Boolean isOwnCard, Card card) {
    String fileName = card.getCardType().toString();
    BackgroundSize bgs;

    if (isOwnCard) {
        bgs = new BackgroundSize(110, 50, false, false, false, false);
    } else {
        bgs = new BackgroundSize(75, 50, false, false, false, false);
    }

    BackgroundImage bgi = new BackgroundImage(new Image("file:client.Resources/Images/CardImageSmall/"   fileName   ".jpg"), BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, bgs);
    Background bg = new Background(bgi);
    return bg;
}

С -fx-background-radius: 10; в CSS:

Изображение без quot;-fx-background-radius: 10;quot; в CSS

Без -fx-background-radius в CSS:

Изображение с фоновым радиусом в CSS на фоне

Есть ли какая-либо возможность закруглить углы фона? У кого-нибудь была такая же проблема?

Редактировать

Я пробовал это с настройкой фона в CSS, но, к сожалению, фон по-прежнему не хочет получать закругленные углы:

 #CardImageSmallBrown{
    -fx-background-image: url('../../client.Resources/Images/CardImageSmall/BRAUN.jpg"');
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0);
    -fx-background-radius: 50px;
    -fx-border-radius: 50px;
    -fx-border-width: 5px;
    -fx-border-color: black;
    -fx-background-position: center;
}

Результат:

изображение результата с помощью CSS

Как мне закруглить края фона!?

Комментарии:

1. Настройка свойств из CSS (т. Е. «таблицы стилей автора» или «встроенного») имеет приоритет над настройкой свойств программно (т. Е. setProperty(...) ). Я предполагаю, что установка фонового радиуса в CSS приводит к потере другой фоновой информации, установленной в коде. Попробуйте установить фон либо полностью с помощью CSS, либо полностью с помощью кода.

2. Спасибо, Slaw! Я пробовал это сейчас с CSS, но все еще не получаю результата. Вы можете увидеть в РЕДАКТИРОВАНИИ, что я изменил. Вы знаете, как закруглить край с помощью css?

3. Я ошибся. Я думаю, что проблема в том, что у BackgroundImage не может быть угловых радиусов. Возможно, вы сможете обойти это, установив shape на своем Region .

4. В качестве альтернативы задайте clip свойство…