javascript – 如何使jointjs文件响应?

我刚刚发现javascript库JointJs,我用纸张和rects实现了一个图形.

但是当我减少浏览器大小时,我无法使其响应,我的图形无法正确显示.

如何让我的论文与jointjs一起响应?

最佳答案
您最初可以将纸张设置为与包含元素相同的尺寸,但这仅在创建纸张时进行初始计算.如果您想在调整浏览器大小时更改尺寸,则需要对调整大小事件作出反应.

首先,您需要将overflow设置为隐藏在容器上,否则其尺寸将拉伸以适合其子项,并且如果缩小浏览器,它将不会缩小.

#modelCanvas {
    overflow: hidden;
}

您必须确保您的#modelCanvaselement将通过某种方法拉伸以填充可用空间,设置高度:100%(在可行的情况下)或使用flexbox或绝对定位.

其次,您需要一个resize事件处理程序

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

转载注明原文:javascript – 如何使jointjs文件响应? - 代码日志