实现“自由放任”的方式包括：在闪亮的形状？ [英] Way to "free-hand" draw shapes in shiny?

问题描述

是否有功能或其他方法可以在Shiny中使用鼠标启用徒手绘制（即绘制随机形状/尺寸）？

Is there a function or some other way to enable free-hand drawing (i.e., drawing of random shapes/sizes) using the mouse in Shiny?

具体地说，我希望能够通过将其标记为 renderPlot 中的一个图进行交互多种（但不统一）的方式。 -换句话说，我希望能够标记已经存在的图形。

Specifically, I'd like to be able to "interact" with a plot from renderPlot by marking it in various (but non-uniform) ways. -- In other words, I want to be able to mark-up already existing graphics.

我发现的功能的缺点包括：

The shortcomings of functions I have found include:

1. 绘制点，线，矩形或圆的工具对我来说不够灵活。


2. 工具并不总是与 click_plot 交互类型的设置兼容。

1. Tools for drawing points, lines, rectangles, or circles are not flexible enough for me.
2. Tools are not always compatible with a click_plot interaction kind of set-up.

推荐答案

这是使用 shinyjs 和签名板，使演示适应绘制图像。

Here's an idea using shinyjs and Signature Pad, adapting the demo for "drawing over an image".

1. 保存 signature_pad.js （如果尚未创建，则需要创建此文件夹）。 此子目录是一个特殊文件夹。我使用了最新版的Signature Pad v1.5.3。


2. 使用以下代码创建CSS文件并将其放置在主应用程序目录中。


3. 在页面加载时，使用 shinyjs 运行JavaScript函数。了解有关使用 shinyjs :: extendShinyjs 此处。从小插图中注意到，应该安装软件包 V8 。

1. Save a copy of signature_pad.js in the "wwww" sub-directory of your app directory (you'll need to create this folder if you haven't already). This subdirectory is a special folder. I used the latest release of Signature Pad, v1.5.3.
2. Create a CSS file with the below code and place the file in the main app directory.
3. Use shinyjs to run the JavaScript function when the page loads. Read about using shinyjs::extendShinyjs here. Note from the vignette that package V8 should be installed.

CSS

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 400px;
}

.wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

应用

library(shiny)
library(dplyr)
library(ggplot2)
library(shinyjs)

jscode <- "shinyjs.init = function() {

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');

// Send data to server instead...
  window.open(data);
});

cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});

}"

server <- function(input, output, session){

  output$plot1 <- renderPlot({

    df <- sample_frac(diamonds, 0.1)

    ggplot(df, aes(x = carat, y = price, color = color)) +
      geom_point()

  })
}

ui <- fluidPage(

  includeCSS("custom.css"),
  tags$head(tags$script(src = "signature_pad.js")),

  shinyjs::useShinyjs(),
  shinyjs::extendShinyjs(text = jscode),

  h1("Draw on plot"),
  div(class="wrapper",
      plotOutput("plot1"),
      HTML("<canvas id='signature-pad' class='signature-pad' width=600 height=400></canvas>"),
      HTML("<div>
           <button id='save'>Save</button>
           <button id='clear'>Clear</button>
           </div>")

  )
)

shinyApp(ui = ui, server = server)

< img src = https://i.stack.imgur.com/pTnsR.png alt =在此处输入图片描述>

这篇关于实现“自由放任”的方式包括：在闪亮的形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！