Javascript 如何使jointjs纸张具有响应性？

我刚刚发现了javascript库JointJs，并用paper和rect实现了一个图形

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

---

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

我建议使用响应性布局css，如bootstrap，我个人推荐纯css（），其他内容在为包含jointjs论文的html页面设置基本布局后就很容易了

例如，让我们假设您创建了html基础，并专门创建了一个名为“modelCanvas”的div容器。这个div是使用响应css创建的（在这个示例中，我使用了纯css）

现在进入网站的JS部分，我们将初始化所需的JointJSPaper和graph init

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
 el: $('#modelCanvas'),
 gridSize: 10,
 height: $('#modelCanvas').height(),
 width: $('#modelCanvas').width(),
 gridSize: 1,
 model: graph,
});

现在JointJS的论文是有反应的 最好的，

---

AG

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

首先，您需要将容器上的“溢出”设置为“隐藏”，否则其尺寸将拉伸以适合其子对象，并且如果收缩浏览器，则不会收缩

#modelCanvas {
    overflow: hidden;
}

您必须确保您的

#modelnavas

元素将通过某种方法拉伸以填充可用空间，可以设置

高度：100%

（在这种情况下）或使用flexbox或绝对定位

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

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

---

从setDimensions（）上的文档中，您可以设置

宽度：“100%”，高度：“100%”

，然后用css控制响应显示

然后，类似于：

$(window).on('resize', joint.util.debounce(function() {
    paper.scaleContentToFit({ padding: 10 });
}));

---

和/或在css中为纸张设置px中的

最小宽度/最小高度

，并将

溢出：自动

添加到父级。

您只需更改包含纸张的

分区的大小即可：

document.getElementById("your-paper-container").setAttribute("style", "height: " + window.innerHeight + "px; overflow: scroll;");

如果页面中有一些其他元素，则可以将code
窗口inInterheight
更改为变量：

headers = 210;
height = window.innerHeight - headers;
document.getElementById("paper-container").setAttribute("style", "height: " + height + "px; overflow: scroll;");

$（'#modelCanvas'）.width（）
在我的例子中等于0。这不是最好的答案，因为这不是真正的响应（即这无助于将照片从横向变成纵向），因为初始加载后媒体断点的改变不会更新纸张。Spoonmiser的回答是：下面的回答更好，因为它包含javascript支持，因此它具有真正的响应能力。有没有办法在调整窗口大小期间也设置单元格元素的尺寸？您可以在调整大小事件处理程序中执行任何操作。您可以调用
paper.scale（）
（也可能调用
paper.setOrigin（）
）来更改视图，以包含以前的所有详细信息，但您需要弄清楚要传递给这些信息的参数。我在链接文档中没有看到这一点，至少对我来说，它不起作用