我正在使用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/