Svg-pan-zoom не поддерживается в Joint js v3.1.1? - PullRequest
Новая
       51

Svg-pan-zoom не поддерживается в Joint js v3.1.1?

1 голос
/ 02 февраля 2020

Я создаю gragh, используя Joint js v1.0.3, и добавив к нему svg-pan-zoom. js, это сработало хорошо. но недавно я изменяю Joint js v1.0.3 на Joint js v3.1.1, он не работает.

, поэтому Svg-pan-zoom больше не поддерживается Joint js v3.1.1 ?

следующий код хорошо работает с Joint js v1.0.3, но когда я изменяю его на Joint js v3.1.1, панорамирование и масштабирование не работают.

это проводной, потому что я думаю, что svg-pan-zoom работает для всех графиков svg, независимо от того, как изменился совместный код js. 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');
    }
}

здесь есть похожий вопрос Как сделать бумагу перетаскиваемой

1 Ответ

0 голосов
/ 03 февраля 2020

Наконец я выясняю, что не так.

меняя targetElt.childNodes [0] на document.getElementById ('paper'). ChildNodes [2] и меняя targetElt.childNodes [0] .childNodes [0] to document.getElementById ('paper'). childNodes [2] .childNodes [1]

это сработало.

...