Прозрачный вид

Я хочу создать View (сцена, окно) с частично прозрачным фоном. У меня есть изображение с альфа-каналом

изображение, содержащее альфа-канал

Я использовал такие сцены в JavaFx, где мне пришлось установить для заливки сцены значение null, а цвет фона корневого узла - прозрачный. Я попробовал то же самое с TornadoFX:

class NextRoundView : View("Következő kör") {

    override val root = vbox {
        style {
            backgroundColor = multi(Color.TRANSPARENT)
            backgroundImage = multi(URI.create("/common/rope-bg-500x300.png"))
            backgroundRepeat = multi(BackgroundRepeat.NO_REPEAT 
                                  to BackgroundRepeat.NO_REPEAT)
        }
        prefWidth = 500.0
        prefHeight = 300.0

        spacing = 20.0
        padding = insets(50, 20)
        text("A text") {
            font = Font.font(40.0)
            alignment = Pos.CENTER
        }

        button("OK")
        {
            font = Font.font(20.0)
            action {
                close()
            }
        }
        sceneProperty().addListener{ _,_,n ->
            n.fill = null
        }
    }

}

Я называю это представлением так:

NextRoundView().apply { 
    openModal(stageStyle = StageStyle.TRANSPARENT, block = true) 
}

Однако у сцены еще есть предыстория:

введите описание изображения здесь

Что я пропустил?


tornadofx
person Balage1551    schedule 29.01.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы сделали пару ошибок, из-за которых это произошло. Прежде всего, вы никогда не должны вручную создавать экземпляры UICompoenents (View, Fragment). Это заставит их пропустить важные обратные вызовы жизненного цикла. Одним из важных обратных вызовов является onDock, который является идеальным местом для управления назначенной сценой. Изменение этих двух проблем, а также очистка некоторого синтаксиса приводит к этому коду, который успешно делает фон прозрачным:

class MyApp : App(MyView::class)

class MyView : View() {
    override val root = stackpane {
        button("open").action {
            find<NextRoundView>().openModal(stageStyle = StageStyle.TRANSPARENT, block = true)
        }
    }
}

class NextRoundView : View("Következő kör") {
    override val root = vbox {
        style {
            backgroundColor += Color.TRANSPARENT
            backgroundImage += URI.create("/common/rope-bg-500x300.png")
            backgroundRepeat += BackgroundRepeat.NO_REPEAT to BackgroundRepeat.NO_REPEAT
        }
        prefWidth = 500.0
        prefHeight = 300.0

        spacing = 20.0
        padding = insets(50, 20)
        text("A text") {
            font = Font.font(40.0)
            alignment = Pos.CENTER
        }

        button("OK") {
            font = Font.font(20.0)
            action {
                close()
            }
        }
    }

    override fun onDock() {
        currentStage?.scene?.fill = null
    }
}

Вот скриншот приложения с внесенными изменениями:

введите описание изображения здесь

person Edvin Syse    schedule 29.01.2019
comment
Вау! Этот ответ мне очень пригодился. Помимо того, что он решил мою проблему, он также научил меня нескольким другим вещам, например, использовать + = вместо multi () в стиле, правильно вызывать представления и где манипулировать сценой. Большое спасибо! - person Balage1551; 29.01.2019