導致fabric.js錯誤

Question

我在我的rails 5應用程序中包含了fabric.js（dist文件夾） - vendor/assets/javascripts。

我在查看文件帆布的HTML元素 - view.html.erb

<div class="col-sm-6"> 
<canvas id="canvas" width="300" height="200" style="border:1px solid #000000"> 
</canvas> 
</div> 

然後我訪問assets/javascripts/event.js JavaScript文件中上述畫布。

var canvas = new fabric.Canvas('can'); 
var circle = new fabric.Circle({ 
    radius: 20, fill: 'green', left: 100, top: 100 
}); 
canvas.add(circle); 

```

我得到以下錯誤，當我瀏覽網頁，

fabric.self-85644f2….js?body=1:6519 Uncaught TypeError: Cannot create property 'style' on string 'can' at klass._createCanvasElement (fabric.self-85644f2….js?body=1:6519) at klass._createLowerCanvas (fabric.self-85644f2….js?body=1:6559) at klass._initStatic (fabric.self-85644f2….js?body=1:6249) at klass.initialize (fabric.self-85644f2….js?body=1:8496) at new klass (fabric.self-85644f2….js?body=1:1944) at event.self-e4cb5e2….js?body=1:3

這裏是我的application.js

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require fabric 
//= require_tree . 

更新

所以，當canvas代碼被包裝在一個DOM準備好的回調中時，我現在看到畫布已經呈現。但是，我仍然不知道什麼是初始化結構的正確方式，即等待DOM加載並運行結構相關代碼的正確方法。

顯然，這是等待DOM準備好的方式 - http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks。但是，在我訪問畫布的所有JavaScript文件中是否添加此包裝代碼？

$(document).on('turbolinks:load', function() { 
    var canvas = new fabric.Canvas('can'); 
    var circle = new fabric.Circle({ 
     radius: 20, fill: 'green', left: 50, top: 50 
    }); 
    canvas.add(circle); 
}); 

Answer 1

用正確答案編輯。

第1部分

與turbolinks沿文檔需要織物被初始化之前被加載。

$(document).on('turbolinks:load', function() { 
    var canvas = new fabric.Canvas('can'); 
    var circle = new fabric.Circle({ 
     radius: 20, fill: 'green', left: 50, top: 50 
    }); 
    canvas.add(circle); 
}); 

第2部分

您可以創建一個像在app /資產/ JavaScript的這個

一個可重複使用的功能/ application.js中

var canvas = $(document).on('turbolinks:load', function() { 
     new fabric.Canvas('can'); 
    }); 

使用畫布變量，您可以撥打初始化結構功能，你想要什麼。像下面一樣

var circle = canvas.Circle({ 
    radius: 20, fill: 'green', left: 50, top: 50 
}); 
canvas.add(circle);