我正在使用jsPlumb在div之间绘制线条。棘手的部分是我正在使用引导程序选项卡窗格,因此打开页面时可能不会呈现该窗格。第二个困难是,一些div会折叠,迫使我重新粉刷连接器。

重绘操作在Firefox上效果很好,但是在其他任何浏览器上,连接器都放错了位置(Chrome实际上正在使偏移量恰好等于当前页面偏移量的大小,边缘只是在天空中的某个位置重绘所有连接器)。

任何想法?我将尝试尽快发布MWE(我的代码实际上很大,但这是我的工作):

jsPlumb.ready(function () {
    jsPlumb.setContainer($('body')); // needed because connected divs are not at the same dom-tree level

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (event)
        if (event.target.id == 'carto-pill') {
            drawConnections();
        } else {
            jsPlumb.detachEveryConnection(); // needed otherwise they are still visible when switching tabs
        }
    });
});

function drawConnections() {

    var red = '#ff1d25', orange = '#f7931e' , green = '#39b54a';

    var width = 2;
    var lineWidth = 2;
    var outlineWidth = 2;

    jsPlumb.connect({
        source:'carto-is_supported',
        target:'focused-arg',
        endpoint: [ "Rectangle", {width: width, height: 10 }],
        anchors: ["Right",  [0, 0.25, -1, 0] ],
        paintStyle:{lineWidth: lineWidth, strokeStyle: green},
        endpointStyle:{fillStyle: green, outlineWidth: outlineWidth}
    });
    // many other connections are also drawn
    jsPlumb.repaintEverything();
}

最佳答案

确定找到了我的解决方案。告诉jsPlumb正确的容器是一个问题。我提供的是我的顶级主要内容(不包括导航栏)和voilà,而不是“ body”,它可以在任何地方神奇地起作用。

关于javascript - jsPlumb repaint除了Firefox以外,其他所有浏览器都无法正常运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35806461/

10-11 13:59