Javascript 在R Shining应用程序中，Fabric JS没有显示任何内容

我想让一个基本的Fabricjs在R的光泽范围内工作

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

我得到的是一张空白画布，而不是正方形和圆形

以下是我尝试过的，主要是更改一些引号，并以闪亮的格式包装脚本和css内容

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)

库（闪亮）
js变量
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);
  });
});'

js变量
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);
  });
});'

js