Question

我刚发现javascript库JointJs，我用纸张和rects实现了图形。

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

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

Answer 1

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

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

#modelCanvas {
    overflow: hidden;
}

您必须确保您的#modelCanvas元素将通过某种方法延伸以填充可用空间，设置height: 100%（在可行的情况下）或使用flexbox或绝对定位。< / p>

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

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

Answer 2

我推荐使用响应式布局css，例如bootstrap我个人推荐纯css（http://purecss.io），其余的很容易，一旦你为包含JointJS论文的html页面设置了基本布局。

例如，假设您创建了html基础，并且您专门创建了一个名为＆＃34; modelCanvas＆＃34;的div容器。这个div是用响应式css制作的（对于这个例子我使用的是纯CSS）。

<div id="modelCanvas" style="height:100%;width:100%; overflow-y: auto; overflow-x: auto;background-image:url(../res/tiny_grid.png);background-repeat:repeat;">

现在进入您网站的JS部分，我们将初始化所需的JointJS论文和图形初始化

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

Answer 3

您可以更改包含您的论文的div的大小：

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

如果页面中还有其他元素，则可以将代码window.innterHeight更改为变量：

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

Answer 4

从setDimensions（http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.setDimensions）的文档中，您可以设置width: '100%', height: '100%'，然后使用CSS控制响应式显示。

然后，类似：

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

和/或还将px中的min-width/min-height设置为css中的纸张，并向父级添加overflow: auto。

如何使jointjs纸张响应？

4 个答案: