Question

我正在使用jsPlumb在div之间绘制线条。棘手的部分是我使用bootstrap tab-panes，因此在打开页面时可能无法呈现窗格。第二个困难，一些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();
}

Answer 1

好的找到我的解决方案。告诉jsPlumb正确的容器是一个问题。而不是'身体'，我给出了我的顶级主要内容（不包括导航栏）和voilà，它神奇地适用于所有地方。

jsPlumb repaint除了Firefox之外，所有浏览器都没有

1 个答案: