R Shiny App 中的 Fabric JS 没有显示

Question

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

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

我得到一片空白 canvas 而不是看到正方形和圆形。

这是我尝试过的方法，主要是更改一些引号并将脚本和 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)

Answer 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);
  });
});'

R Shiny App 中的 Fabric JS 没有显示

Nothing showing with Fabric JS in R Shiny App

javascript

css

r

fabricjs

shiny