javascript - 如何使jointjs文件具有响应性？

我只是发现javascript库JointJs，并用纸和矩形实现了一个图形。

但是，当我减小浏览器尺寸时，我的图形无法正确显示，因此我无法使其响应。

我怎样才能使我的论文与jointjs响应？

最佳答案

您可以最初将纸张设置为其包含元素的尺寸，但是仅在创建纸张时才进行初始计算。如果您希望在调整浏览器大小时通过纸张更改大小，则需要对调整大小事件使用react。

首先，您需要将溢出设置为隐藏在容器上，否则容器的尺寸将拉伸(stretch)以适合其子容器，并且如果收缩浏览器也不会收缩。

#modelCanvas {
    overflow: hidden;
}

您必须通过某种方法(设置#modelCanvas(在可行的情况下)或使用flexbox或绝对定位)来确保height: 100%元素将拉伸(stretch)以填充可用空间。

其次，您需要一个调整大小的事件处理程序

$(window).resize(function() {
    var canvas = $('#modelCanvas');
    paper.setDimensions(canvas.width(), canvas.height());
});