Как разделить границу и эффект? - PullRequest
Новая
       61

Как разделить границу и эффект?

1 голос
/ 25 января 2020

В настоящее время у меня есть кнопка со следующим CSS: 

Button {
    -fx-text-fill: -fx-color-text;
    -fx-font: 15pt "Raleway SemiBold";

    -fx-background-color: -fx-color-theme;
    -fx-background-insets: 0, 0, 0, 0, 0, 1, 2;
    -fx-background-radius: 0;
    -fx-padding: 4px 20px;
    /* -fx-effect: innershadow(two-pass-box, white, 2, 0.2, 0, 0); */
    -fx-border-insets: 0;
    -fx-border-color: black;
}

И это выглядит так:

enter image description here

И я пытаюсь добавить внутреннюю тень к кнопке. Я хочу, чтобы граница отображалась на за пределами этой кнопки, что должно привести к примерно так:

enter image description here

Я сделал что в свинге. Однако, когда я пытаюсь применить свою внутреннюю тень, она накладывается на aws поверх моей границы, как показано:

enter image description here

Я пробовал установив границу вставки в -1 (потому что для эффекта нет свойства вставки), но это просто переместило эффект вместе с ним:

enter image description here

Мой вопрос: что я могу сделать, чтобы убедиться, что я могу видеть свою границу вокруг, но сохранить свой эффект изнутри?

РЕДАКТИРОВАТЬ: Я почти уверен, что это ошибка в OpenJFX и Я отправил отчет об ошибке. Вот небольшой код, который вы можете использовать для воспроизведения проблемы: 

public class App extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Region example = new Region();
        example.setMaxWidth(100);
        example.setMaxHeight(100);
        example.setEffect(new InnerShadow(BlurType.GAUSSIAN, Color.RED, 10, 0.04, 0, 0));
        example.setStyle("-fx-background-color: white; -fx-border-color: BLUE; -fx-border-width: 5px;");

        StackPane container = new StackPane();
        container.setStyle("-fx-background-color: black;");
        container.setAlignment(Pos.CENTER);
        container.getChildren().add(example);

        Scene scene = new Scene(container, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

1 Ответ

3 голосов
/ 29 января 2020

Я думаю, что граница смешивается с эффектом, который применяется. И поскольку вы абсолютно уверены, что это может быть ошибка в рендеринге JavaFX, ниже приведен один из способов заставить его выглядеть так, как вы хотите.

Вы можете рассмотреть приведенное ниже решение так, как если бы вы думали, что " Я определенно хочу, чтобы этот вид был только !! " вроде: :)

Идея в том, что вместо устанавливая эффект, вы рисуете эффект вручную. 

.button {
    -fx-text-fill: #FFFFFF;
    -fx-font: 15pt "Raleway SemiBold";
    -fx-background-color: #000000, #720D4D, #D03A9A, #DD70B6, #B01378, #CC2C93, #D03A9A, #C81688;
    -fx-background-insets: 0, 1, 1 2 2 1, 1 2 2 2, 2, 2 3 3 2, 2 3 3 3, 3;
    -fx-background-radius: 0;
    -fx-padding: 4px 20px;
    -fx-border-insets: 0px;
    -fx-border-radius: 0px;
    -fx-border-width: 0px;
}

И вывод такой, как показано ниже [игнорируйте шрифт, так как у меня нет .tff;)]:

enter image description here

И более внимательный взгляд для проверки:

enter image description here

Это может быть не фактическим решением, но может быть одним альтернативным (наименьший случай).

...