如何使 jointjs 论文响应式

How to make jointjs paper responsive?

本文关键字：响应 文响应 何使 jointjs      更新时间：2023-09-26

我只是发现了javascript库JointJs，我用纸和矩形实现了一张图。

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

如何使我的论文响应 jointjs ？

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

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

#modelCanvas {
    overflow: hidden;
}

您必须确保您的#modelCanvas元素将通过某种方法拉伸以填充可用空间，要么设置height: 100%（在可以正常工作的情况下），要么使用 flexbox 或绝对定位。

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

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

从 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 中以 px 格式为纸张设置min-width/min-height，并向父项添加overflow: auto。

我建议使用响应式布局 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 论文是响应式的最好银

您可以更改包含纸张的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;");
相关文章：