在闪亮应用程序的 svg 文件中添加缩放重置按钮

Posted 2023-02-14

【中文标题】在闪亮应用程序的 svg 文件中添加缩放重置按钮

【英文标题】：Add a zoom reset button in svg file in shiny app

【发布时间】：2022-01-20 14:46:35

【问题描述】：

我有下面的shiny 应用程序，我想在其中使用 panzoom 包添加平移和缩放控件，例如here。我已经添加了+/-，但是重置选项呢？如果您知道任何其他可以做到的软件包，请随时这样做。

library(shiny)
library(shinyWidgets)
library(DiagrammeR)
library(magrittr)

js <- '
$(document).ready(function()
  var element = document.getElementById("grr");
  var instance = panzoom(element);
  $("#zoomout").on("click", function()
    instance.smoothZoom(0, 0, 0.9);
  );
  $("#zoomin").on("click", function()
    instance.smoothZoom(0, 0, 1.1);
  );
);
$("#zoomout").on("dblclick", function()
    return false;
  );
  $("#zoomin").on("dblclick", function()
    return false;
  );
'

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"),
    tags$script(html(js))
  ),
  
  grVizOutput("grr", width = "100%", height = "90vh"),
  
  actionGroupButtons(
    inputIds = c("zoomout", "zoomin"),
    labels = list(icon("minus"), icon("plus")),
    status = "primary"
  )
)

server <- function(input, output) 
  
  reactives <- reactiveValues()
  
  observe(
    reactives$graph <- render_graph(
      create_graph() %>%
        add_n_nodes(n = 2) %>%
        add_edge(
          from = 1,
          to = 2,
          edge_data = edge_data(
            value = 4.3
          )
        )
    )
  )
  
  output$grr <- renderGrViz(reactives$graph)
  


shinyApp(ui, server)

【参考方案1】：

library(shiny)
library(shinyWidgets)
library(DiagrammeR)
library(magrittr)

js <- '
$(document).ready(function()
  var element = document.getElementById("grr");
  var instance = panzoom(element);
  var z = 1;
  $("#zoomout").on("click", function()
    instance.smoothZoom(0, 0, 0.9);
    z *= 0.9;
  );
  $("#zoomin").on("click", function()
    instance.smoothZoom(0, 0, 1.1);
    z *= 1.1;
  );
  $("#reset").on("click", function()
    instance.smoothZoom(0, 0, 1/z);
    z = 1;
  );
  $("#zoomout").on("dblclick", function()
    return false;
  );
  $("#zoomin").on("dblclick", function()
    return false;
  );
);
'

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"),
    tags$script(HTML(js))
  ),
  
  grVizOutput("grr", width = "100%", height = "90vh"),
  
  actionGroupButtons(
    inputIds = c("zoomout", "zoomin", "reset"),
    labels = list(icon("minus"), icon("plus"), "Reset"),
    status = "primary"
  )
  
)

server <- function(input, output) 
  
  reactives <- reactiveValues()
  
  observe(
    reactives$graph <- render_graph(
      create_graph() %>%
        add_n_nodes(n = 2) %>%
        add_edge(
          from = 1,
          to = 2,
          edge_data = edge_data(
            value = 4.3
          )
        )
    )
  )
  
  output$grr <- renderGrViz(reactives$graph)
  


shinyApp(ui, server)

【讨论】：

我在这里遇到了问题***.com/questions/70420503/…