Блог

Я пытаюсь заставить базовый Fabricjs работать в R Shiny.

Я просто хочу, чтобы этот пример jsfiddle запускался на главной панели:

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

Я получаю пустой холст вместо того, чтобы видеть квадрат и круг.

Вот что я пробовал, в основном просто меняя некоторые кавычки и оборачивая скрипт и 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)
  

Существует проблема с кавычками 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);
  });
});'