如何让jointjs的论文反应灵敏？

Question

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

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

怎样才能让我的论文对jointjs做出反应呢？

Answer 1

最初可以将图纸设置为与其包含的元素相同的尺寸，但这仅在创建图纸时计算。如果你想在调整浏览器大小时改变大小，你需要调整事件的大小。

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

#modelCanvas {
    overflow: hidden;
}

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

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

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

Answer 2

在docs on 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添加到父对象。

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;">

现在进入您web站点的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