javascript - 修改 JavaScript 以确定要在 R Shiny 中使用的字体颜色

Question

我希望根据背景颜色确定悬停消息的字体颜色，即如果背景较暗则为白色，如果背景较亮则为黑色，

我遇到了这个SO问题，有一个看起来很完美的javascript解决方案，但现在我正在努力让它在R中工作

原始的javascript来自这里:enter link description here

很可能我在某个地方遗漏了一些愚蠢的东西，因为我之前使用过 runjs 和 sprintf 方法，但无法发现它。

require('shiny')
require('shinyjs')

fontcolor <- function(color){
  sprintf(paste(
    " var bgColor = %s;",
    " var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;",
    " var r = parseInt(color.substring(0, 2), 16);",
    " var g = parseInt(color.substring(2, 4), 16);",
    " var b = parseInt(color.substring(4, 6), 16);",
    " var uicolors = [r / 255, g / 255, b / 255];",
    " var c = uicolors.map((col) => {",
    "  if (col <= 0.03928) {",
    "    return col / 12.92;",
    "  }",
    "  return Math.pow((col + 0.055) / 1.055, 2.4);",
    " });",
    " var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);",
    " var colfont (L > 0.179) ? #000000 : #ffffff;",
    "  Shiny.setInputValue('Frontfont', bgColor, {priority: 'event'});",
    sep = "\n"
  ), color)
}

ui <- fluidPage(
  useShinyjs(),
    textInput('ColorTyped', label = 'Enter hex code'), 
    h5('Font color result'),
    verbatimTextOutput('FontColorSelected')
  )


server <- function(input, output) {

  ColorResult <- reactive({
    runjs(fontcolor(input$ColorTyped))
  })

  output$FontColorSelected <- renderPrint({ 
    ColorResult()
    })

}

shinyApp(ui, server)

Answer 1

JS代码中缺少引号，服务器逻辑不正确。

require('shiny')
require('shinyjs')

froncolor <- function(color){
  sprintf(paste(
    " var bgColor = '%s';",
    " var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;",
    " var r = parseInt(color.substring(0, 2), 16);",
    " var g = parseInt(color.substring(2, 4), 16);",
    " var b = parseInt(color.substring(4, 6), 16);",
    " var uicolors = [r / 255, g / 255, b / 255];",
    " var c = uicolors.map((col) => {",
    "  if (col <= 0.03928) {",
    "    return col / 12.92;",
    "  }",
    "  return Math.pow((col + 0.055) / 1.055, 2.4);",
    " });",
    " var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);",
    " var colfont = (L > 0.179) ? '#000000' : '#ffffff';",
    " Shiny.setInputValue('Frontfont', colfont, {priority: 'event'});",
    sep = "\n"
  ), color)
}

ui <- fluidPage(
  useShinyjs(),
  textInput('ColorTyped', label = 'Enter hex code'), 
  h5('Font color result'),
  verbatimTextOutput('FontColorSelected')
)


server <- function(input, output) {

  observeEvent(input$ColorTyped, {
    runjs(froncolor(input$ColorTyped))
  })

  output$FontColorSelected <- renderPrint({ 
    input$Frontfont
  })

}

shinyApp(ui, server)