如何在闪亮的屏幕截图中排除radioGroupButtons

Question

我正在使用

shinyscreenshot

构建一个 Shiny 应用程序。 我的应用程序包括一个“分数”卡，其中包含用户可以从中选择的 radioGroupButtons 列表。 radioGroupButtons 在应用程序中不可见，但是，当我使用

shinyscreenshot

截取屏幕截图时，radioGroupButtons 出现并与数值重叠，使屏幕截图变得混乱。

我想在截图时隐藏 radioGroupButtons。 我尝试使用shinyjs来切换按钮的可见性，但它没有按预期工作。

这是一个最小的可重现示例，演示了我的设置和方法：

library(shiny)
library(bs4Dash)
library(shinyWidgets)
library(shinyjs)
library(shinyscreenshot)

my_ids <- c("region_1", "region_2") 
my_labels <- c("A", "B") 

ui <- bs4DashPage(
  title = "My Example",
  header = bs4DashNavbar(),
  sidebar = bs4DashSidebar(disable = TRUE),  
  body = bs4DashBody(
    useShinyjs(),
    
    # CSS for radio button styles and hiding elements
    tags$style(HTML("
      .btn-zero {background-color: white; color: black;}
      .btn-zero.active {background-color: #a2ff45; color: black;}
      .btn-one {background-color: white; color: black;}
      .btn-one.active {background-color: #a2ff45; color: black;}
      .btn-two {background-color: white; color: black;}
      .btn-two.active {background-color: #a2ff45; color: black;}
      .btn-three {background-color: white; color: black;}
      .btn-three.active {background-color: #a2ff45; color: black;}
      .region-label { line-height: 2.5; }

      /* Hide elements during screenshot */
      .hide-for-screenshot { display: none !important; }
    ")),
    
    bs4Card(
      title = "My Score",
      width = 6,
      style = "height: 200px; overflow: auto;",  
      tags$style(HTML("
        .region-label { margin-top: -10px; }
      ")),
      # Render radio buttons for each region
      lapply(seq_along(my_ids), function(i) {
        fluidRow(
          column(6, h4(class = "region-label", paste(i-1, my_labels[i]))),
          column(6, div(
            style = "display: inline-block;",
            shinyWidgets::radioGroupButtons(
              inputId = my_ids[i],
              label = NULL,
              choices = 0:3,
              selected = 0,
              checkIcon = list(yes = icon("check")),
              status = c("zero", "one", "two", "three"),
              size = 'xs'
            )
          ))
        )
      })
    ),
    
    # Screenshot Button
    actionButton("take_screenshot", "Take Screenshot", style = "margin-top: 10px;")
  )
)

server <- function(input, output, session) {
  observeEvent(input$take_screenshot, {
    # Temporarily hide radio buttons
    shinyjs::addClass(selector = ".radioGroupButtons", class = "hide-for-screenshot")
    
    # Take screenshot and remove the hide class afterward
    shinyscreenshot::screenshot()
    
    # Show radio buttons again
    shinyjs::removeClass(selector = ".radioGroupButtons", class = "hide-for-screenshot")
  })
}

shinyApp(ui, server)

我尝试过的事情 自定义 CSS：我添加了一个

.hide-for-screenshot

CSS 类，其中显示：none

!important

；隐藏元素。该类在截图之前应用，然后删除。

使用

shinyjs

：我使用

shinyjs::addClass

和

shinyjs::removeClass

来切换

.hide-for-screenshot

上的

radioGroupButtons

类。

问题 尽管在截取屏幕截图之前添加了

hide-for-screenshot

类并隐藏了

radioGroupButtons

，它们仍然出现在屏幕截图中。我怀疑

shinyscreenshot

可能不尊重临时 CSS 更改，或者延迟不足以应用样式。

问题 如何确保

radioGroupButtons

截屏时，

shinyscreenshot

完全隐藏？

任何建议或替代方法将不胜感激！谢谢。

截图如下：

它应该看起来像这样：

Answer 1

关于您的示例，有几点需要说明 - 首先，您试图隐藏整个

radioGroupButton

对象，而不仅仅是导致问题的

<input>

元素，并且您还使用了无效的类 - 它们是在

radio-group-buttons

不是

radioGroupButtons

。此外，

observeEvent

内的事件仅在最后触发，因此您的

addClass

和

removeClass

相互抵消。因此，您需要三个

observeEvents

，一个用于隐藏它们，一个用于截取屏幕截图，然后另一个用于取消隐藏它们。请注意，这当前隐藏了所有

<input>

元素，这在实际用例中不太可能是您想要的，但我无法弄清楚要使用什么选择器。

server <- function(input, output, session) {
  observeEvent(input$take_screenshot, {
    shinyjs::addClass(selector = "input", class = "hide-for-screenshot")
    if (is.null(input$take_screenshot2)){
      new_value <- 1
    } else {
      new_value <- input$take_screenshot2 + 1
    }
    shinyjs::runjs(paste0("Shiny.setInputValue('take_screenshot2',", new_value, ");"))
  })

  observeEvent(input$take_screenshot2, {
    shinyscreenshot::screenshot()
    if (is.null(input$take_screenshot3)){
      new_value <- 1
    } else {
      new_value <- input$take_screenshot3 + 1
    }
    shinyjs::runjs(paste0("Shiny.setInputValue('take_screenshot3',", new_value, ");"))
  })

  observeEvent(input$take_screenshot3, {
    shinyjs::removeClass(selector = "input", class = "hide-for-screenshot")
  })
}