javascript - 如何使jointjs论文响应？

Question

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

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

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

Answer 1

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

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

#modelCanvas {
    overflow: hidden;
}

您必须确保您的#modelCanvas元素将通过某种方法拉伸以填充可用空间，无论是设置height: 100%（在可行的情况下）还是使用弹性盒或绝对定位。

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

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

Answer 2

从 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 });
}));

和/或还将 a min-width/min-heightin px 设置为 css 中的纸张并将 an 添加overflow: auto到父级。

Answer 3

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

例如，假设您创建了 html 基础，并专门创建了一个名为“modelCanvas”的 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 文件和图形 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 论文是响应式 Best, AG

Answer 4

您可以更改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;");