Как использовать FabricJS в виджете Jupyter Notebook - PullRequest
Новая
       23

Как использовать FabricJS в виджете Jupyter Notebook

0 голосов
/ 18 апреля 2019

Я пытаюсь создать виджет в Jupyter Notebook, который использует Fabric.js (http://fabricjs.com/),, однако я получаю сообщение об ошибке, которое является для меня блокирующим. Самое основное решение, которое мне нужно, это просто сделать виджет выводит холст с интерактивным красным прямоугольником, как на домашней странице Fabric.js:

enter image description here

Что я пробовал до сих пор:

Я начал с базового учебника «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, и она не выделяет красный квадрат:

JS console error

Пожалуйста, помогите мне исправить код, чтобы он работал!

1 Ответ

0 голосов
/ 18 апреля 2019

Моя проблема была в том, что я не понял, как работает 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) {...
...