绘制成品线的“drawopenpath”颜色与正在绘制的线

Question

我目前正在开发一个 R/shiny 应用程序，用户可以使用 plotly 的“drawopenpath”功能绘制随时间变化的轨迹。

当用户按下鼠标左键并开始绘制时，绘制的线条颜色会变浅（例如深灰色而不是黑色）。停止绘制（鼠标向上）后，线条获得其标称颜色（例如黑色），如下所示：

我正在寻找一种方法使这种视觉差异更加明显，最好是为绘图过程（例如浅灰色））与成品线（例如红色）分配不同的颜色。到目前为止，我只能更改两个“步骤”的颜色，如下所示。

library(plotly)
library(shiny)

ui <- fluidPage(
  
    plotlyOutput("myPlot", width = 500, height = 250)
    
  )



server <- function(input, output, session) {
  
  output$myPlot <- renderPlotly({
    plot_ly(type = "scatter", mode = "markers") %>% 
      
      plotly::layout(
        dragmode = "drawopenpath",
        
        #This only changes the color of the whole line
        newshape = list(line = list(color = "black")))
  })
} 


shinyApp(ui, server)

有什么方法可以通过颜色或使用不同的参数（可能是不透明度）更好地区分这两条线？我将非常感谢任何正确方向的想法或指示。

Answer 1

plotly 在使用

drawopenpath

时临时添加一条路径到其缩放图层：

<g class="zoomlayer">
    <path class="select-outline select-outline-0 select-outline-xy cursor-move" style="opacity: 0.5; stroke: black; stroke-width: 4px;" fill-rule="evenodd" transform="translate(60,25)" d="M38,135Z"></path>
    <path class="zoombox-corners" style="fill: rgb(255, 255, 255); stroke: rgb(68, 68, 68); stroke-width: 1px;" transform="translate(60,25)" d="M0,0Z"></path>
</g>

我们可以通过 css 重新设计它:

library(plotly)
library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .select-outline {
        // opacity: 1;
        stroke: rgb(255, 0, 0) !important;
        // stroke-opacity: 1;
        // fill: rgb(0, 0, 0);
        // fill-opacity: 0;
        // stroke-width: 4px;
        // pointer-events: stroke;
      }"))
  ),
  plotlyOutput("myPlot", width = 500, height = 250)
)

server <- function(input, output, session) {
  output$myPlot <- renderPlotly({
    plot_ly(type = "scatter", mode = "markers") %>% 
      
      plotly::layout(
        dragmode = "drawopenpath",
        
        # This only changes the color of the whole line
        newshape = list(line = list(color = "black")))
  })
} 

shinyApp(ui, server)