导轨中的fabric.js错误

Question

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

我的视图文件中有一个 canvas 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 .

更新

所以，当画布代码包含在 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/assets/javascripts/application.js 中

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

使用 canvas 变量，您可以在任何需要的地方调用已初始化的结构函数。如下所示

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