fabric.js rails 中的错误

Question

我已将 fabric.js（dist 文件夹）包含在我的 rails 5 应用程序中 - 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 文件中访问上面的 canvas。

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 就绪回调中时，我现在确实看到了 canvas 呈现。但是，我仍然不知道初始化结构的正确方法是什么，即等待 DOM 加载然后运行结构相关代码的正确方法。

显然，这是等待 DOM 就绪的方式 - http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks。但是，我是否将此包装代码添加到我访问 canvas 的所有 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);

fabric.js rails 中的错误

fabric.js error in rails

ruby-on-rails

fabricjs