Jointjs v3.1.1不支持Svg-pan-zoom？

Question

我使用Jointjs v1.0.3构建了gragh，并在其中添加了svg-pan-zoom.js，效果很好。但是最近我将Jointjs v1.0.3更改为Jointjs v3.1.1，它不起作用。

所以Jointjs v3.1.1不再支持Svg-pan-zoom吗？

以下代码在Jointjs v1.0.3上运行良好，但是当我将其更改为Jointjs v3.1.1时，平移和缩放不起作用。

它是有线的，因为我认为svg-pan-zoom适用于所有svg图，无论jointjs.js代码如何更改，它仍然是svg图，所以不确定为什么它不起作用。

var gridsie = 1;
var currentSle = 1;
var realscale = 1;
var targetElt = $('#paper')[0];

var graph = new joint.dia.Graph; 
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 1200,
    height: 600,
    gridsize: gridsie,
    model: graph,
    snapLinks: true,
    linkPinning: false,
    embeddingMode: true
});

var cell = new joint.shapes.devs.Atomic({
    position: { x: 400, y: 150 },
    size: { width: 100, height: 100 }
});
graph.addCells([cell]);

setGrid(paper, gridsie * 0.1, '#000000');

//Enable pan when a blank area is click (held) on
paper.on('blank:pointerdown', function(evt, mouseX, mouseY) {
        panAndZoom.enablePan();
});

//Disable pan when the mouse button is released
paper.on('cell:pointerup', function(cellView, event) {
    panAndZoom.disablePan();
});

panAndZoom = svgPanZoom(targetElt.childNodes[0],
        {
            viewportSelector : targetElt.childNodes[0].childNodes[0],
            fit : false,
            zoomScaleSensitivity : 0.4,
            panEnabled : false,
            minZoom : 0.01,
            center : false,
            onZoom : function(scale) {
                currentSle = scale;
                setGrid(paper, gridsie * 15 * currentSle, '#808080');
            },
            beforePan : function(oldpan, newpan) {
                setGrid(paper, gridsie * 15 * currentSle, '#808080', newpan);

            },
            beforeZoom : function() {
                realscale = panAndZoom.getSizes().realZoom;
            }
        });
//BONUS function - will add a css background of a dotted grid that will scale reasonably
//well with zooming and panning.
function setGrid(paper, size, color, offset) {

    // Set grid size on the JointJS paper object (joint.dia.Paper instance)
    paper.options.gridsie = gridsie;
    // Draw a grid into the HTML 5 canvas and convert it to a data URI image
    var canvas = $('<canvas/>', {
        width : size,
        height : size
    });
    canvas[0].width = size;
    canvas[0].height = size;
    var context = canvas[0].getContext('2d');
    context.beginPath();
    context.rect(1, 1, 1, 1);
    context.fillStyle = color || '#666666';
    context.fill();
    // Finally, set the grid background image of the paper container element.
    var gridBackgroundImage = canvas[0].toDataURL('image/png');
    $(paper.el.childNodes[0]).css('background-image', 'url("' + gridBackgroundImage + '")');
    if (typeof (offset) != 'undefined') {
        $(paper.el.childNodes[0]).css('background-position', offset.x + 'px ' + offset.y + 'px');
    }
}

这里有一个类似的问题，How to make a paper draggable

Answer 1

最后我找出了问题所在。

将targetElt.childNodes [0]更改为document.getElementById（'paper'）。childNodes [2]并将targetElt.childNodes [0] .childNodes [0]更改为document.getElementById（'paper'）。childNodes [2] .childNodes [1]

有效。