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

【问题标题】：How to use FabricJS in Jupyter Notebook widget如何在 Jupyter Notebook 小部件中使用 FabricJS
【发布时间】：2019-04-17 21:01:08
【问题描述】：

我正在尝试在 Jupyter Notebook 中构建一个使用 Fabric.js (http://fabricjs.com/) 的小部件，但是我遇到了一个错误，这对我来说是一个障碍。我需要的最基本的解决方案就是让小部件输出一个带有交互式红色矩形的画布，就像您在 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 控制台中收到了以下错误，并且没有显示红色方块：

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

【问题讨论】：

标签： jupyter-notebook requirejs fabricjs ipywidgets

【解决方案1】：

我的问题是我不明白 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) {...

【讨论】：