如何使jointjs论文响应？答案

【问题标题】：How to make jointjs paper responsive?如何使jointjs论文响应？
【发布时间】：2015-03-13 10:01:33
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript angularjs jointjs

【解决方案1】：

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

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

#modelCanvas {
    overflow: hidden;
}

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

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

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

【讨论】：

使用此解决方案时，有时将窗口调整为更小时单元格会丢失。有没有办法在窗口调整大小期间为单元格元素设置尺寸
您可以在调整大小事件处理程序中执行任何操作。您可以调用 paper.scale()（也可能是 paper.setOrigin()）来更改视图以包含您之前拥有的所有详细信息，但您需要弄清楚将哪些参数传递给这些视图。

【解决方案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 });
}));

和/或在css中将min-width/min-height设置为px，并将overflow: auto添加到父级。

【讨论】：

我在链接文档中的任何地方都没有看到，而且它不起作用，至少对我来说是这样
为我工作。它在文档中，至少在新版本中：resources.jointjs.com/docs/jointjs/v3.3/…

【解决方案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文件和图形初始化

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 论文是响应式的最好的，股份公司

【讨论】：

$('#modelCanvas').width() 在我的情况下等于 0。因为它可以帮助某人。
不是最佳答案，因为这不是真正的响应式（即这无助于将平板手机从横向变为纵向），因为在初始加载后更改媒体断点不会更新纸张. SpoonMeiser 的回答更好，因为它包含 javascript 支持，因此它是真正响应式的。

【解决方案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;");

【讨论】：