如何在Jupyter Notebook小部件中使用FabricJS

Posted 2021-04-07

我正在尝试使用Fabric.js（http://fabricjs.com/）在Jupyter Notebook中构建一个小部件，但是我收到的错误对我来说是一个阻止。我需要的最基本的解决方案是让窗口小部件输出一个带有交互式红色矩形的画布，就像你在Fabric.js主页上找到的那样：

到目前为止我尝试过的：

我从基本的“Hello World”教程（https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Custom.html）开始，这是下面四个单元格的基础，我尝试从结构节点网页添加一个简单的例子来创建一个红色矩形。以下是我在Jupyter笔记本中的单元格：

单元格1：

%%html
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js" type="text/javascript"></script>

单元格2：

import ipywidgets as widgets
from traitlets import Unicode, validate

class HelloWidget(widgets.DOMWidget):
    _view_name = Unicode('HelloView').tag(sync=True)
    _view_module = Unicode('hello').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)

单元格3：

%%javascript
require.undef('hello');

define('hello', ["@jupyter-widgets/base"], function(widgets) {

var HelloView = widgets.DOMWidgetView.extend({

    render: function() {
        var canvas = document.createElement('canvas');
        canvas.id = 'canvas';
        canvas.width = 1000;
        canvas.height = 500;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "blue";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        this.el.appendChild(canvas);

        var fabricCanvas = new fabric.Canvas(canvas);

        var rect = new fabric.Rect({
            top : 100,
            left : 100,
            width : 60,
            height : 70,
            fill : 'red'
        });

        fabricCanvas.add(rect);             
    },
});

return {
    HelloView : HelloView
};
});

单元格4：

HelloWidget()

但是，我很遗憾在JS控制台中出现以下错误，并且它没有使红色正方形：

请帮我修复代码以使其正常工作！

答案

我的问题是我不明白require.js是如何工作的......：/

以下是我解决问题的方法：

%%javascript
require.undef('hello');
require.config({
  //Define 3rd party plugins dependencies
  paths: {
    fabric: "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min"
  }
});
define('hello', ["@jupyter-widgets/base", 'fabric'], function(widgets) {...