javascript - 如何使 jointjs 文件响应？

Question

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

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

如何使用 jointjs 使我的论文具有响应性？

Answer 1

您最初可以将纸张设置为与其包含元素相同的尺寸，但这只会在创建纸张时进行初始计算。如果您想在调整浏览器大小时更改纸张大小，则需要对调整大小事件使用react。

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

#modelCanvas {
    overflow: hidden;
}

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

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

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