在jointjs中使用paperScroller显示工具栏

Question

我是新手。我尝试使用QAD演示应用程序添加带缩小和缩放功能的工具栏，但不知道为什么没有出现纸张内容。

这是显示工具栏的代码。

initializeToolbar: function() {
    var paperScroller = new joint.ui.PaperScroller({
        paper: this.paper,
        autoResizePaper: true
    });

    paperScroller.$el.appendTo('#paper');
    var toolbar = new joint.ui.Toolbar({
        // initialize tools with default settings
        tools: ['zoomIn','zoomSlider','zoomOut'],

        references: {
            paperScroller: paperScroller
        }
    });

    toolbar.render().$el.appendTo('#toolbar-container');
},

这是功能创建论文的代码

initializePaper: function() {
    this.paper = new joint.dia.Paper({
        el: this.$('#paper'),
        width: 1920,
        height: 1080,
        gridSize: 10,
        snapLinks: {
            radius: 75
        },
        linkPinning: false,
        multiLinks: false,
        defaultLink: app.Factory.createLink(),
        validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
            // Prevent linking from input ports.
            if (magnetS && magnetS.getAttribute('port-group') === 'in') return false;
            // Prevent linking from output ports to input ports within one element.
            if (cellViewS === cellViewT) return false;
            // Prevent linking to input ports.
            return (magnetT && magnetT.getAttribute('port-group') === 'in') || (cellViewS.model.get('type') === 'qad.Question' && cellViewT.model.get('type') === 'qad.Answer');
        },
        validateMagnet: function(cellView, magnet) {
            // Note that this is the default behaviour. Just showing it here for reference.
            return magnet.getAttribute('magnet') !== 'passive';
        }
    });


    this.graph = this.paper.model;
},