R Shiny App 中的 Fabric JS 没有显示任何内容答案

【问题标题】：Nothing showing with Fabric JS in R Shiny AppR Shiny App 中的 Fabric JS 没有显示任何内容
【发布时间】：2020-12-23 06:11:11
【问题描述】：

我正在尝试让一个基本的 Fabricjs 在 R 的 Shiny 中工作。

我只想让这个 jsfiddle 示例在主面板中运行：

http://jsfiddle.net/fabricjs/fmgXt/

我得到一个空白画布，而不是看到正方形和圆形。

这是我尝试过的，主要只是更改了一些引号并将脚本和 css 内容包装为 Shiny 格式。

library(shiny)

js <- '
// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: "rgba(102,153,255,0.5)",
    cornerSize: 12,
    padding: 5
});

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas("c");

var json = "{"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}],"background":""}"

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  fabric.log(o, object);
});

'

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  tags$head(tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js", type="text/javascript")),
  tags$head(
  tags$style(HTML("
   canvas {
    border: 1px solid #999;
}
    "))
  ),

  
    
  titlePanel("Fabric Demo"),
  sidebarLayout(
    sidebarPanel(
     
      h4("Side")
    ),
    mainPanel(
      
      HTML('<canvas id="c" width="600" height="600"></canvas>')
    )
  )
)


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

shinyApp(ui=ui,server=server)

【问题讨论】：

标签： javascript css r shiny fabricjs

【解决方案1】：

json 变量的引号有问题。并使用$(document).ready，这样脚本只有在文档准备好时才会执行。

js <- '
$(document).ready(function () {
  // Do some initializing stuff
  fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: "rgba(102,153,255,0.5)",
    cornerSize: 12,
    padding: 5,
  });

  // initialize fabric canvas and assign to global windows object for debug
  var canvas = (window._canvas = new fabric.Canvas("c"));

  var json =
    "{\\\"objects\\\":[{\\\"type\\\":\\\"rect\\\",\\\"originX\\\":\\\"center\\\",\\\"originY\\\":\\\"center\\\",\\\"left\\\":300,\\\"top\\\":150,\\\"width\\\":150,\\\"height\\\":150,\\\"fill\\\":\\\"#29477F\\\",\\\"overlayFill\\\":null,\\\"stroke\\\":null,\\\"strokeWidth\\\":1,\\\"strokeDashArray\\\":null,\\\"strokeLineCap\\\":\\\"butt\\\",\\\"strokeLineJoin\\\":\\\"miter\\\",\\\"strokeMiterLimit\\\":10,\\\"scaleX\\\":1,\\\"scaleY\\\":1,\\\"angle\\\":0,\\\"flipX\\\":false,\\\"flipY\\\":false,\\\"opacity\\\":1,\\\"shadow\\\":{\\\"color\\\":\\\"rgba(94, 128, 191, 0.5)\\\",\\\"blur\\\":5,\\\"offsetX\\\":10,\\\"offsetY\\\":10},\\\"visible\\\":true,\\\"clipTo\\\":null,\\\"rx\\\":0,\\\"ry\\\":0,\\\"x\\\":0,\\\"y\\\":0},{\\\"type\\\":\\\"circle\\\",\\\"originX\\\":\\\"center\\\",\\\"originY\\\":\\\"center\\\",\\\"left\\\":300,\\\"top\\\":400,\\\"width\\\":200,\\\"height\\\":200,\\\"fill\\\":\\\"rgb(166,111,213)\\\",\\\"overlayFill\\\":null,\\\"stroke\\\":null,\\\"strokeWidth\\\":1,\\\"strokeDashArray\\\":null,\\\"strokeLineCap\\\":\\\"butt\\\",\\\"strokeLineJoin\\\":\\\"miter\\\",\\\"strokeMiterLimit\\\":10,\\\"scaleX\\\":1,\\\"scaleY\\\":1,\\\"angle\\\":0,\\\"flipX\\\":false,\\\"flipY\\\":false,\\\"opacity\\\":1,\\\"shadow\\\":{\\\"color\\\":\\\"#5b238A\\\",\\\"blur\\\":20,\\\"offsetX\\\":-20,\\\"offsetY\\\":-10},\\\"visible\\\":true,\\\"clipTo\\\":null,\\\"radius\\\":100}],\\\"background\\\":\\\"\\\"}";

  canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function (
    o,
    object
  ) {
    fabric.log(o, object);
  });
});'

【讨论】：