jsPlumb repaint除了火狐浏览器之外的所有浏览器都不工作
问题描述:
我使用jsPlumb在div之间绘制线条。棘手的部分是我使用引导选项卡窗格,因此打开页面时可能无法呈现窗格。第二个难点是,一些div可折叠,迫使我重新绘制连接器。jsPlumb repaint除了火狐浏览器之外的所有浏览器都不工作
重绘动作在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à,它在任何地方都可以神奇地工作。